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

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

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

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

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

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

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

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

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

    <?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(); ?> добавьте следующий код:

    <?php
    	wp_deregister_script('jquery');
    	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"), false, '1.7.2');
    	wp_enqueue_script('jquery');
    ?>
    
  5. Теперь осталось добавить на сайт малюсенький скриптик, который будет загружать нужный контент. Создайте js-файл (например, scripts.js) и вставьте в него следующий код:

    (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>
    

Второй вариант

Этот вариант заметно проще, т.к. здесь не потребуется создавать дополнительную страницу.

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

    <?php require_once("../../../wp-load.php"); ?>
    
    <ul>
    	<?php wp_get_archives('type=monthly'); ?>
    </ul>
    

    Именно первая строчка кода и позволяет избежать необходимости создания новой страницы.

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

    <div id="archives"></div>
    
  3. Если jQuery еще не подключен на вашем сайте, в файл header.php перед кодом <?php wp_head(); ?> добавьте следующий код:

    <?php
    	wp_deregister_script('jquery');
    	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"), false, '1.7.2');
    	wp_enqueue_script('jquery');
    ?>
    
  4. Создайте новый js-файл (например, scripts.js) и вставьте в него следующий код:

    (function($) {
    $(function() {
    
    	$("#archives").load("http://ВАШ_ДОМЕН/wp-content/themes/ПАПКА_С_ШАБЛОНОМ/ajax_archives.php");
    
    })
    })(jQuery)
    

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

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

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

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

Комментарии (189)
  1. 150
    Тимур

    Ну реализовать же можно? или нельзя!?

  2. 151

    Попробуйте путь к картинке прописать через произвольное поле, а саму ссылку на картинку закрывать с помощью советов на странице alaev.info/blog/post/4042. А почему Вы решили, что это нужно делать? Дайте ссылку на источник информации.

    • 152
      Тимур

      Информацию давно узнал, инфа как Я понял досих пор не в паблике.. Не помню как их зовут, но вродебы это кто-то из создателей сервисов сеопуль, мегаиндекс или веб-эфектор, кто-то из них.. Они в основном раньше всё время вдвоём высутпали..

  3. 153
    Тимур

    Интересует как вообще выводить ajax-ом не только все картинки, но и любые блоки сайта, при это чтобы при изменении виджетов в сайдбаре автоматом всё менялось..

  4. 154
    sergey666

    автор, как с помощью ajax вывести полную новость wordpress?

  5. 155

    Привет, Dimox. Сильное решение, спасибо. У меня такой вопрос. Насколько актуально закрывать контент от индексации таким способом сейчас. Пишут что google научился индексировать ajax.

  6. 157

    Спасибо, прочитал. Мне интересно ваше мнение, вы все-таки творец решения. Можно коротко(стоит не стоит)

  7. 159

    Спасибо. Уже сделал. В роботс подгруж. страницу закрыл, закрыл подгружаемую страницу даже <meta name="robots" способом. После проверки отпишусь, спасибо еще раз. Удачи в творчестве. А есть ли способ закрыть js от индексации не знаешь?

  8. 161

    А как правильно надо прописать, например если надо закрыть custom.js

  9. 164
    Вадим

    Браво! это классное решение, мне сильно помогло! Спасибо автору!

  10. 165
    Алексей

    У Вас отличный блог!
    Сделал вывод меню на своем сайте по второму способу. Но, обнаружил проблему.
    Раньше меню было с раскрывающимися пунктами, а теперь оно всегда одинаковое. Подскажите, как передавать адреса страниц в Ajax запрос, чтобы функции меню остались прежними?

  11. 167

    Очень круто! Спасибо! Пока сделал только для рубрик, но уже победа!

  12. 169

    Здравствуйте! Скажите пожалуйста, а как можно скрыть ссылки в комментариях? Заранее спасибо!

    • 172
      VM

      А что хостер конкретно написал ? В чем причина ?
      Дело в том, что Аякс выполняется на стороне пользователя и мне кажется наоборот — разгружает сайт. Вообще после внедрений таких вещей проблем с нагрузкой не возникало при большой посещаемости.

      • 173
        VM

        Случайно не тому пользователю написал (
        Ответ предназначался Павлу.

      • 177

        «Дело в том, что Аякс выполняется на стороне пользователя»

        — это бред. Он выполняется на сервере. И соответственно нагружает сайт. Один запрос — это примерно как генерация одной страницы. Т.е. вы заходите на страницу (один запрос) и нажимаете на кнопку подгрузки (это второй запрос) . Проще генерить статику — потом это кэшировать для незарегистрированных пользователей, и отдавать им из кэша. Срок кэша или сутки, или по факту — добавился комментарий, обновилась статья… А не заниматься ерундой. Архив генерить аяксом…
        Я понимаю фильтр на аяксе или поиск.
        А как пример в статье для других целей — неплохой

  13. 170
    Андрей

    Здравствуйте!
    Отличное решение, спасибо.
    Но у меня такой вопрос:
    Данное решение создает очень большую нагрузку на сервер. При трафике в 1000 посетителей от хостинга уже приходят письма, что превышена допустимая нагрузка. Есть ли способ оптимизировать нагрузку на сервер?

  14. 176
    Андрей

    Возможно имеет смысл добавить контент из аякс-файлов непосредственно в файл single.php. Тем самым не будет запросов к дополнительным файлам. Подскажите пожалуйста как это сделать, если в курсе.

  15. 182
    Андрей

    Ребята подскажите пожалуйста, если нужно спарятать категорию товаров (список ссылок-картинок с ценами) которая выводится шорткодом плагина-магазина Wooсcommerce. Будет ли вы водится этот список товаров на странице если поместить шорткод в файл предложенным выше методом?

  16. 183
    Плотницкий

    Здравствуйте, Dimox !
    Подскажите пожалуйста, если я на своем сайте реализовал вывод контента через AJAX по 2 способу, то что закрывать в robots.txt ?

    Файл ajax_archives.php таким образом:
    Disallow: /wp-content/themes/theme_name/ajax_archives.php

    Правильно ? Не могу понять этот момент.

  17. 185
    Андрей

    Подскажите пожалуйста как реализовать скрытие от поисковых систем кода тизерных блоков? Данные примеры здесь не выводят блоки с рекламмой((( Может потому что код тизеров содержит свой javascript? Очень надеюсь на Вашу помощь! Заранее спасибо!

  18. 187
    Андрей

    Здравствуйте, подскажите, как в статье вывести ее заголовок, с помощью Ajax. К примеру простой текст выводится без проблем, а вот php функции почему-то не работают.

  19. 188

    Скажите как вызвать JS событие после полной подгрузки контента этим скриптом:
    $(«#archives»).load(«http://ВАШ_ДОМЕН/wp-content/themes/ПАПКА_С_ШАБЛОНОМ/ajax_archives.php»);