Загрузка частей страницы сайта на WordPress через Ajax

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

Рассмотрим два способа выведения контента через AJAX в Worpress.

Способ 1

I. Создать в папке темы WordPress-темы сайта новый php-файл (пример: ajax_content.php) с таким кодом, содержимое которого и будет подгружаться:

<?php
/*
Template Name: AJAX список архивов
*/
?>
<a href="http://site.com/page1.html" rel="nofollow">Ссылка или всё что угодно</a>

II. В админ-панели WordPress’а создать новую страницу с произвольным названием. Справа в блоке «Атрибуты страницы» выбрать шаблон «AJAX список архивов».

Нужно заметить, что страницу стоит закрыть в «noindex, nofollow» и если на сайте установлены плагины генерации карты сайта (например: XML-Sitemap, Dagon Design Sitemap Generator) — стоит в их настройках исключить данную страницу. ID страницы в WordPress’е видно в строке браузера, при редактировании страницы, например: http://qfurs.ru/wp-admin/post.php?post=9478&action=edit.

III. В том месте файла sidebar.php, index.php, footer.php, где нужно вывести блок, вставить код:

<div id="ajaxcontent"></div>

IV. Т. к. AJAX реализуется с помощью jQuery, и если 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');
?>

V. Последнее: добавить на сайт скрипт js-файла, который будет загружать требуемый контент. a) Создать файл с расширением .js произвольного названия (к примеру, jscontent.js) c кодом:

(function($) {
$(function() {
  $("#ajaxcontent").load("http://домен/адрес-созданной-страницы/");
})
})(jQuery)

b) Созданный js-файл положить в папку темы сайта. c) Подключить в header.php такой строкой перед тегом </head>:

<script src="http://site.com/wp-content/themes/ТЕМА/jscontent.js"></script>

Способ 2

Второй вариант немного короче.
I. Создать в папке темы WordPress-темы php-файл (пример: ajax_content.php) с кодом:

<?php require_once("../../../wp-load.php"); ?>
<a href="http://site.com/page.html" rel="nofollow">Ссылка или всё что угодно</a>

II. В том месте, где необходимо вывести блок, вставить html-код:

<div id="ajaxcontent"></div>

III. если 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');
?>

IV. Последние операции: добавить на сайт скрипт js-файла, который будет загружать требуемый контент.
a) Создать файл с расширением .js произвольного названия (к примеру, jscontent.js) c кодом:

(function($) {
$(function() {
  $("#ajaxcontent").load("http://домен/адрес-созданной-страницы/");
})
})(jQuery)

b) Созданный js-файл положить в папку темы сайта.
c) Подключить в header.php такой строкой перед тегом </head>:

<script src="http://site.com/wp-content/themes/ТЕМА/jscontent.js"></script>

Способы выведения блоков через AJAX взяты у dimox.name, за что ему — спасибо.

Ссылка на основную публикацию