Главная WordPress

Загрузка части контента на 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. Dimox, подскажите пожалуйста, почему данный код, dimox.name/display-category-name-without-link/#comment-18 439 (он рабочий, проверял) при использовании метода 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'); ?>

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

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

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

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

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

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

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

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

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