Загрузка части контента на WordPress с помощью AJAX
Сергей Сосновский в своем блоге рассказывал, что с помощью технологии AJAX в целях поисковой оптимизации скрыл часть содержимого сайта от поисковых систем (что, кстати, не является клоакингом).
Технически реализовал это я. Поскольку нашлось много желающих повторить то же самое на своих блогах, попытаюсь донести информацию о том, как это сделать.
AJAX по сути – это динамическая загрузка части содержимого страницы с помощью JavaScript. Т.е. вроде бы на сайте эта часть контента отображается, но, если заглянуть в исходный код страницы, то там его нет. Или, если отключить в браузере поддержку JavaScript, то этого контента также не будет видно.
Такую возможность можно использовать, например, чтобы уменьшить количество внутренних ссылок на сайте для поисковых систем. Ни Гугл, ни Яндекс не проиндексируют ту часть контента, которая подключается через AJAX.
Итак, переходим к практике. Расскажу, как это сделать на WordPress на примере помесячного списка архивов, который выводится обычно в сайдбаре.
Предлагаю 2 варианта решения. Второй – наиболее простой.
Первый вариант
-
Создайте в папке с вашим WordPress-шаблоном новый php-файл (например, ajax_archives.php) со следующим содержимым:
<?php /* Template Name: AJAX список архивов */ ?> <ul> <?php wp_get_archives('type=monthly'); ?> </ul>
-
Зайдите в админку WordPress и создайте новую страницу. Назовите ее как угодно, например “Список архивов”. Справа в блоке “Атрибуты страницы” выберите шаблон “AJAX список архивов”.
Если вы откроете эту страницу в браузере, то увидите, что там только нужный нам список и больше ничего лишнего. Вот это мы и будем подгружать на сайте в нужном месте.
-
В том месте файла sidebar.php, где вы хотите увидеть список архивов, вставьте такой html-код:
<div id="archives"></div>
-
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'); ?>
-
Теперь осталось добавить на сайт малюсенький скриптик, который будет загружать нужный контент. Создайте 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>
Второй вариант
Этот вариант заметно проще, т.к. здесь не потребуется создавать дополнительную страницу.
-
Создайте в папке с вашим WordPress-шаблоном новый php-файл (например, ajax_archives.php) со следующим содержимым:
<?php require_once("../../../wp-load.php"); ?> <ul> <?php wp_get_archives('type=monthly'); ?> </ul>
Именно первая строчка кода и позволяет избежать необходимости создания новой страницы.
-
В том месте файла sidebar.php, где вы хотите увидеть список архивов, вставьте такой html-код:
<div id="archives"></div>
-
Если 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'); ?>
-
Создайте новый 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)
А как правильно надо прописать, например если надо закрыть custom.js
User-agent: *
Disallow: /custom.js
В Интернете легко можно найти, как это делается.
Да вполне обыяно, просто не видел чтобы кто-то закрывал js. Спасибо.
Браво! это классное решение, мне сильно помогло! Спасибо автору!
У Вас отличный блог!
Сделал вывод меню на своем сайте по второму способу. Но, обнаружил проблему.
Раньше меню было с раскрывающимися пунктами, а теперь оно всегда одинаковое. Подскажите, как передавать адреса страниц в Ajax запрос, чтобы функции меню остались прежними?
Не знаю, как это сделать.
Спасибо. Понятно написано. Все сделал как описано выше. Только сайдбар весь в абракадабре выводится. Уже и кодировку менял в UTF-8 c BUM – без BUM. Не помогает. Есть решение?
Очень круто! Спасибо! Пока сделал только для рубрик, но уже победа!
Здравствуйте! Скажите пожалуйста, а как можно скрыть ссылки в комментариях? Заранее спасибо!
А что хостер конкретно написал ? В чем причина ?
Дело в том, что Аякс выполняется на стороне пользователя и мне кажется наоборот – разгружает сайт. Вообще после внедрений таких вещей проблем с нагрузкой не возникало при большой посещаемости.
Случайно не тому пользователю написал (
Ответ предназначался Павлу.
– это бред. Он выполняется на сервере. И соответственно нагружает сайт. Один запрос – это примерно как генерация одной страницы. Т.е. вы заходите на страницу (один запрос) и нажимаете на кнопку подгрузки (это второй запрос) . Проще генерить статику – потом это кэшировать для незарегистрированных пользователей, и отдавать им из кэша. Срок кэша или сутки, или по факту – добавился комментарий, обновилась статья… А не заниматься ерундой. Архив генерить аяксом…
Я понимаю фильтр на аяксе или поиск.
А как пример в статье для других целей – неплохой
Можете подсказать как сделать так, чтобы подгруженные части через Аякс кэшировались?
Или помочь в решении данной задачи. В долгу не останусь :-)
Здравствуйте!
Отличное решение, спасибо.
Но у меня такой вопрос:
Данное решение создает очень большую нагрузку на сервер. При трафике в 1000 посетителей от хостинга уже приходят письма, что превышена допустимая нагрузка. Есть ли способ оптимизировать нагрузку на сервер?
В этом я, к сожалению, не разбираюсь.
Написал вам выше.
Хостер предоставил статистику запросов к файлам.
Максимальное количество запросов как раз у файлов где содержаться части подгружаемого контента.
Пример:
У файла подгружаемого аяксом 14851 запросов в неделю, а у ближайшего “конкурента” в данном случае у конкретной статьи 1575 запросов.
На данный момент у меня 2 файла подгружаемых аяксом на странице. Вместе получается примерно 30000 запросов в неделю.
До этого у меня было 6 таких файлов. Убрав 4 из них мне удалось снизить нагрузку примерно на 40-50%.
В дни пиковой посещаемости нагрузка снова сверх допустимой.
Точно все правильно сделали ? Кеш в Яндексе\Гугле проверили – точно не видит бот его ?
У меня на WP последней версии с посещалкой от 3-4К нет проблем, а хостер далеко не самый дорогой. Даже не VPS, shared обычный.
Да, все сделал правильно. Кеш проверил, бот не видит.
Я делал с помощью второго способа. Вы с помощью какого делали?
Возможно имеет смысл добавить контент из аякс-файлов непосредственно в файл single.php. Тем самым не будет запросов к дополнительным файлам. Подскажите пожалуйста как это сделать, если в курсе.
Ребята подскажите пожалуйста, если нужно спарятать категорию товаров (список ссылок-картинок с ценами) которая выводится шорткодом плагина-магазина Wooсcommerce. Будет ли вы водится этот список товаров на странице если поместить шорткод в файл предложенным выше методом?
Здравствуйте, Dimox !
Подскажите пожалуйста, если я на своем сайте реализовал вывод контента через AJAX по 2 способу, то что закрывать в robots.txt ?
Файл ajax_archives.php таким образом:
Disallow: /wp-content/themes/theme_name/ajax_archives.php
Правильно ? Не могу понять этот момент.
Да, все верно.
Подскажите пожалуйста как реализовать скрытие от поисковых систем кода тизерных блоков? Данные примеры здесь не выводят блоки с рекламмой((( Может потому что код тизеров содержит свой javascript? Очень надеюсь на Вашу помощь! Заранее спасибо!
От наличия JavaScript ничего не зависит. Скорее всего, что-то неправильно делаете.
Здравствуйте, подскажите, как в статье вывести ее заголовок, с помощью Ajax. К примеру простой текст выводится без проблем, а вот php функции почему-то не работают.
Скажите как вызвать JS событие после полной подгрузки контента этим скриптом:
$(“#archives”).load(“http://ВАШ_ДОМЕН/wp-content/themes/ПАПКА_С_ШАБЛОНОМ/ajax_archives.php”);
Нашел способ:
$(‘#ajaxCatalog’).bind(‘DOMNodeInserted’, function(){
$(“#archives”).html(”);
});
http://ru.stackoverflow.com/questions/462701/Событие-изменения-содержимого-тега
Благодарю за полезную статью!
Похоже что это самый простой варианты из всех, что я сегодня видел
Dimox, подскажите пожалуйста, почему данный код, http://dimox.name/display-category-name-without-link/#comment-18439 (он рабочий, проверял) при использовании метода 2 не работает:
Вывожу его строго по инструкции и ничего не появляется. Делаю проверку, меняю код на:
Выводятся ссылки на архивы, которых нет в исходном коде.
Не подскажите куда копать? Спасибо
Код вывода тегов предназначен для использования внутри цикла записи. Возможно, вы нарушаете данное правило.
Друзья, подскажите, а как скрыть пункты меню(часть)?
то есть нужно скрыть “Главная страница”
Вывод осуществляется так: wp_nav_menu( array(
‘theme_location’ => ‘menu-1’,
‘menu_class’=>’nav navbar-nav pull-right’,
‘container’ => ‘ul’,
‘menu_id’ => ‘responsive-menu’
) );
Наконец-то нашел дельную статью. Мне надо было скрыть блок похожие статьи от робота. Так как поиск от google выводил ненужные статьи по запросам, потому что брал текст из ссылок блока похожих статей :). В с помощью 2 способа удалось спрятать, в коде страницы отображается только сам div c id.
Пытался сделать непрерывную ленту новостей в блоге. почему то не получилось. Можете подсказать как сделать?
а почему демо нет, просто способ 2 не срабатывает… просто пустой блок…. пути проверил все работают
Вариант 2 сработал, просто вышла беда с путями, нужно указывать путь точно включая www или без.
вопрос такого формата, это хорошо срабатывает с данными которые не генерируются js – что я имею в виду – у меня есть слайдер с отзывами – он выводит их отзывы – но не создает доп классов или стилей для слайдера
можно ли как-то это решить?