Подгрузка контента в вордпресс без перезагрузки страницы. Бесконечная прокрутка постов WordPress без плагина. Фильтры товаров на WooCommerce

Что с помощью технологии AJAX в целях поисковой оптимизации скрыл часть содержимого сайта от поисковых систем (что, кстати, не является клоакингом).

Технически реализовал это я. Поскольку нашлось много желающих повторить то же самое на своих блогах, попытаюсь донести информацию о том, как это сделать.

AJAX по сути — это динамическая загрузка части содержимого страницы с помощью JavaScript. Т.е. вроде бы на сайте эта часть контента отображается, но, если заглянуть в исходный код страницы, то там его нет. Или, если отключить в браузере поддержку JavaScript, то этого контента также не будет видно.

Такую возможность можно использовать, например, чтобы уменьшить количество внутренних ссылок на сайте для поисковых систем. Ни Гугл, ни Яндекс не проиндексируют ту часть контента, которая подключается через AJAX.

Итак, переходим к практике. Расскажу, как это сделать на WordPress на примере помесячного списка архивов, который выводится обычно в сайдбаре.

Предлагаю 2 варианта решения. Второй — наиболее простой.

Первый вариант

ajax_archives.php ) со следующим содержимым:

Зайдите в админку WordPress и создайте новую страницу. Назовите ее как угодно, например «Список архивов». Справа в блоке «Атрибуты страницы » выберите шаблон «AJAX список архивов».

Если вы откроете эту страницу в браузере, то увидите, что там только нужный нам список и больше ничего лишнего. Вот это мы и будем подгружать на сайте в нужном месте.

В том месте файла sidebar.php

AJAX мы реализуем с помощью jQuery, поэтому, если он еще не подключен на вашем сайте, в файл header.php перед кодом добавьте следующий код:

Теперь осталось добавить на сайт малюсенький скриптик, который будет загружать нужный контент. Создайте js-файл (например, scripts.js

(function($) { $(function() { $("#archives").load("http://ВАШ_ДОМЕН/ajax_archives/"); }) })(jQuery)

Вместо http://ВАШ_ДОМЕН/ajax_archives/ подставьте адрес выше созданной страницы.

header.php :

Месяцы - Рубрики

get_header(); и get_footer(); получают шапку и подвал шаблона соответственно. get_sidebar(); я вырезал намеренно, чтобы он не мешался в понимании кода. Остальная часть кода выводит выпадающие списки Месяцев и Рубрик.

Пустой блок - это контейнер куда будут выводится результаты запроса, т.е. записи.

2. Оформим выпадающие списки через CSS, для этого добавим такой код сразу после вызова шапки ():

#archive_browser >

На этом этапе у меня получилось следующее:


3. Добавим JavaScript код , который будет выполнять запрос к серверу и выводить его в блок archive_pot (код добавляем после css стилей):