Как подгрузить блоки контента при помощи Ajax

В данной статье рассказано, как подгружать часть контента на сайте WordPress при помощи технологий Ajax. Подобная штука позволяет прятать от поисковых машин выбранный контент (блоки).
И в то же время данные блоки будут доступны пользователю как и раньше, т.е. юзабельность сайта не теряется, при условии, что эти пользователи не выключали JavaScript в своем браузере.

Данную штуку уже довольно давно я использую на клиентских сайтах. А на ее использование меня подтолкнуло видео, которое будет в конце статьи (советую посмотреть всем).
[infob]

Прежде чем приступать к работе с файлами шаблона сайта - сделайте резервную копию, чтобы в случае чего вернуть все назад. Для редактирования файлов советую воспользоваться бесплатной программой Notepad++, в которой можно откатить все изменения назад, если еще не закрыли файл.[/infob]

ШАГ 1: создание подгружаемого файла

Прежде всего нам нужно создать файл, где у нас будет размещаться нужный контент. Под контентом понимается от самих слов, до целых блоков (например облако меток, целый сайдбар, или "Информация об авторе сайта без плагина"). Т.е. сами определитесь, что будете прятать.

Итак, нам нужно создать в корневой папке шаблона сайта файл с расширением .php (ajax-content.php например). Внутри него необходимо разместить следующее:

В первой строке Контент Ajax обозначает название шаблона (любое). Во второй строке функция wp_tag_cloud(); отобразит облако меток - вместо данной функции подставляете свой контент.

К слову: контентом может быть целый сайдбар, либо его часть. Так же можно поместить другие элементы сайта.

ШАГ 2: создание страницы

Теперь необходимо создать страницу на сайте, которая будет служить некой прокладкой, позволяющая реализовать задуманное. Для этого в админке сайта Страницы ► Добавить новую и пишите любой заголовок:

В сайдбаре выбираете свой шаблон, который создали на Шаге 1:

После этого нажимаем Опубликовать и подводим курсор на кнопку Изменить (первая картинка с названием страницы). Когда курсор стоит на данной кнопке, снизу слева в браузере появляется ссылка с большим количеством символов. В этой ссылке нужно найти цифры после page_id. Запишите их на бумажку, т.к. они понадобятся дальше.

Саму страницу можно прикрыть от индекса в robots.txt

ШАГ 3: убираем страницу из меню сайта

Создав новую страницу на предыдущем шаге, скорее всего она автоматически разместиться в вашем меню на сайте. Если подобное произошло, то необходимо избавиться от данной вещи. В файлах шаблона header.php, functions.php или даже footer.php будет размещаться конструкция, которая отвечает за меню сайта. Необходимо найти нечто подобное

wp_list_pages(‘title_li=’)

До этого будет какое-то обозначение menu, поэтому сразу соориентируетесь. В Notapad++ можете открыть эти файлы и нажать CTRL+F и попробовать найти по wp_list_pages. После того, как нашли искомое - необходимо добавить исключение созданной страницы. Я говорил на Шаге 1 записать цифры после page_id. Вот теперь они нам понадобятся:

wp_list_pages(‘exclude=154&title_li=’)

Цифра 154 - это номер страницы, которую исключаем из меню сайта.

ШАГ 4: выбор места отображения контента

Теперь необходимо вставить на то место, где вы хотите видеть подгружаемый контент из ШАГ 1 следующую конструкцию:

Вместо ajax-content можно написать все что угодно на латинице. Но стоит запомнить название, т.к. понадобится его прописать еще раз в другом файле.

ШАГ 5: подключаем Jquery

Во многих шаблонах Jquery подключен по-умолчанию. Следовательно для них не нужно выполнять данный шаг. Откройте файл header.php и посмотрите, если до тега </head> стоит подобный url в скрипте, то значит библиотека подключена. В противном случае вставляем:

Есть несколько способов подключения Jquery на сайте. Я показал лишь один из них.

ШАГ 6: создаем JS-файл

Теперь необходимо создать сам файл скрипта. Для этого создаем новый файл с расширением .js и любым названием на латинице. Внутри данного файла помещаем следующий код:

(function($) { $(function() { 
  $("#ajax-content").load("https://mojwp.ru/oblako");
}) })(jQuery)

Здесь обращаем внимание на следующее:

• #ajax-content - название id из Шага 4;
• https://mojwp.ru/oblako - url созданной страницы из Шага 2.

Данный файл .js (к примеру вы его обзовете oblako.js) необходимо разместить в корне шаблона сайта, либо специальной папке js, если она уже была создана разработчиками вашего шаблона (такое бывает довольно часто).

ШАГ 7: заключительный

Теперь осталось подключить скрипт на сайте. Для этого в файле header.php перед закрывающим тегом </head> вставляем следующее:

Суть конструкции: указать путь до файла со скриптом. Т.е. можно прописать вручную http://сайт.ру/wp-content/themes..... Либо воспользоваться bloginfo('template_url'), которая говорит, что файл лежит в корне шаблона. Если он не в корне, то можно немного подправить:

В этом случае файл oblako.js лежит в папке js, которая находится в корне шаблона.

Послесловие

Вот и все манипуляции. Текста получилось много, но на самом деле все делается за пару минут. Главное определитесь - нужно ли вам что-то прятать и что это будет.

В результате при нажатии CTRL+U в браузере, вместо контента будет просто выводиться div, который был прописан на Шаге 4.

А теперь обещанное видео, которое рекомендую посмотреть всем увлекающихся поисковой оптимизацией (2 части):

Муза статьи: блог dimox.name.