Загрузка части контента на 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. 1
    Тимур

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

  2. 2

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

    • 3
      Тимур

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

  3. 4
    Тимур

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

  4. 5
    sergey666

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

  5. 6

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

  6. 8

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

  7. 10

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

  8. 12

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

  9. 15
    Вадим

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

  10. 16
    Алексей

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

  11. 19

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

  12. 20

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

    • 21
      VM

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

      • 22
        VM

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

      • 23

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

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

  13. 26
    Андрей

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

  14. 32
    Андрей

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

  15. 33
    Андрей

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

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

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

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

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

  17. 36
    Андрей

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

  18. 38
    Андрей

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

  19. 39

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