Загрузка части контента на WordPress с помощью AJAX

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

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

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

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

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

1. Создайте в папке с вашим WordPress-шаблоном новый php-файл (например, ajax_archives.php) со следующим содержимым:

   1 2 3 4 5 6 7 8

   <?php /* Template Name: AJAX список архивов */ ?> <ul>   <?php wp_get_archives('type=monthly'); ?> </ul>

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

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

3. В том месте файла sidebar.php, где вы хотите увидеть список архивов, вставьте такой html-код:

   <div id="archives"></div>

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

   1 2 3 4 5

   <?php   wp_deregister_script('jquery');   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"), false, '1.6.4');   wp_enqueue_script('jquery'); ?>

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

   1 2 3 4 5 6 7

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

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

   Файл закиньте в папку с шаблоном вашего сайта и подключите в файле header.php, вставив следующую строку перед тегом </head>:

   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts.js"></script>

Вот, собственно, и все. Можете наблюдать результат.

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