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

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>
    

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

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

Комментарии (198)

  1. 17 мая 2014 г. в 14:11

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

    1. 17 мая 2014 г. в 18:41 / ответ на коммент Oleg

      User-agent: *
      Disallow: /custom.js

      В Интернете легко можно найти, как это делается.

      1. 17 мая 2014 г. в 23:46 / ответ на коммент Dimox

        Да вполне обыяно, просто не видел чтобы кто-то закрывал js. Спасибо.

  2. Вадим
    29 июня 2014 г. в 01:28

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

  3. Алексей
    23 июля 2014 г. в 21:30

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

    1. Не знаю, как это сделать.

      1. 7 августа 2014 г. в 16:58 / ответ на коммент Dimox

        Спасибо. Понятно написано. Все сделал как описано выше. Только сайдбар весь в абракадабре выводится. Уже и кодировку менял в UTF-8 c BUM – без BUM. Не помогает. Есть решение?

  4. 1 августа 2014 г. в 14:39

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

  5. 10 октября 2014 г. в 15:47

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

    1. VM
      22 декабря 2014 г. в 18:10 / ответ на коммент Павел

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

      1. VM
        22 декабря 2014 г. в 18:11 / ответ на коммент VM

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

      2. 22 декабря 2014 г. в 19:12 / ответ на коммент VM

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

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

        1. Андрей
          12 января 2015 г. в 13:47 / ответ на коммент Otshelnik-fm

          Можете подсказать как сделать так, чтобы подгруженные части через Аякс кэшировались?

          1. Андрей
            12 января 2015 г. в 13:51 / ответ на коммент Андрей

            Или помочь в решении данной задачи. В долгу не останусь :-)

  6. Андрей
    22 декабря 2014 г. в 17:57

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

    1. 22 декабря 2014 г. в 18:05 / ответ на коммент Андрей

      В этом я, к сожалению, не разбираюсь.

    2. VM
      22 декабря 2014 г. в 18:11 / ответ на коммент Андрей

      Написал вам выше.

      1. Андрей
        22 декабря 2014 г. в 18:44 / ответ на коммент VM

        Хостер предоставил статистику запросов к файлам.
        Максимальное количество запросов как раз у файлов где содержаться части подгружаемого контента.
        Пример:
        У файла подгружаемого аяксом 14851 запросов в неделю, а у ближайшего “конкурента” в данном случае у конкретной статьи 1575 запросов.
        На данный момент у меня 2 файла подгружаемых аяксом на странице. Вместе получается примерно 30000 запросов в неделю.

        До этого у меня было 6 таких файлов. Убрав 4 из них мне удалось снизить нагрузку примерно на 40-50%.

        В дни пиковой посещаемости нагрузка снова сверх допустимой.

        1. VM
          22 декабря 2014 г. в 20:20 / ответ на коммент Андрей

          Точно все правильно сделали ? Кеш в Яндексе\Гугле проверили – точно не видит бот его ?
          У меня на WP последней версии с посещалкой от 3-4К нет проблем, а хостер далеко не самый дорогой. Даже не VPS, shared обычный.

          1. Андрей
            24 декабря 2014 г. в 18:03 / ответ на коммент VM

            Да, все сделал правильно. Кеш проверил, бот не видит.
            Я делал с помощью второго способа. Вы с помощью какого делали?

  7. Андрей
    22 декабря 2014 г. в 18:47

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

  8. Андрей
    12 января 2015 г. в 14:09

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

  9. Плотницкий
    2 августа 2015 г. в 16:06

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

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

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

    1. Да, все верно.

  10. Андрей
    31 августа 2015 г. в 11:22

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

    1. 31 августа 2015 г. в 11:30 / ответ на коммент Андрей

      От наличия JavaScript ничего не зависит. Скорее всего, что-то неправильно делаете.

  11. Андрей
    30 декабря 2015 г. в 22:52

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

  12. 31 марта 2016 г. в 23:51

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

    1. Нашел способ:

      $(‘#ajaxCatalog’).bind(‘DOMNodeInserted’, function(){
      $(“#archives”).html(”);
      });

      http://ru.stackoverflow.com/questions/462701/Событие-изменения-содержимого-тега

      Благодарю за полезную статью!

  13. 15 августа 2017 г. в 14:28

    Похоже что это самый простой варианты из всех, что я сегодня видел

  14. Node
    6 октября 2017 г. в 16:18

    Dimox, подскажите пожалуйста, почему данный код, http://dimox.name/display-category-name-without-link/#comment-18439 (он рабочий, проверял) при использовании метода 2 не работает:

    <?php
    $tags = wp_get_post_tags($post->ID);
    for ($i = 0; $i < count($tags); $i++) {
      $comma = '';
      if ($i > 0) $comma = ', ';
      echo $comma . $tags[$i]->name;
    }
    ?>

    Вывожу его строго по инструкции и ничего не появляется. Делаю проверку, меняю код на:

    <?php wp_get_archives('type=monthly'); ?>

    Выводятся ссылки на архивы, которых нет в исходном коде.

    Не подскажите куда копать? Спасибо

    1. 6 октября 2017 г. в 17:36 / ответ на коммент Node

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

  15. Владимир
    26 марта 2018 г. в 10:41

    Друзья, подскажите, а как скрыть пункты меню(часть)?
    то есть нужно скрыть “Главная страница”
    Вывод осуществляется так: wp_nav_menu( array(
    ‘theme_location’ => ‘menu-1’,
    ‘menu_class’=>’nav navbar-nav pull-right’,
    ‘container’ => ‘ul’,
    ‘menu_id’ => ‘responsive-menu’
    ) );

  16. 2 августа 2018 г. в 09:52

    Наконец-то нашел дельную статью. Мне надо было скрыть блок похожие статьи от робота. Так как поиск от google выводил ненужные статьи по запросам, потому что брал текст из ссылок блока похожих статей :). В с помощью 2 способа удалось спрятать, в коде страницы отображается только сам div c id.

  17. 5 октября 2018 г. в 11:49

    Пытался сделать непрерывную ленту новостей в блоге. почему то не получилось. Можете подсказать как сделать?

  18. Artem
    19 ноября 2018 г. в 23:00

    а почему демо нет, просто способ 2 не срабатывает… просто пустой блок…. пути проверил все работают

  19. Artem
    19 ноября 2018 г. в 23:06

    Вариант 2 сработал, просто вышла беда с путями, нужно указывать путь точно включая www или без.

  20. Zurab
    28 июля 2021 г. в 23:13

    вопрос такого формата, это хорошо срабатывает с данными которые не генерируются js – что я имею в виду – у меня есть слайдер с отзывами – он выводит их отзывы – но не создает доп классов или стилей для слайдера
    можно ли как-то это решить?

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код