AJAX — это динамическая загрузка отдельной части содержания страницы сайта с помощью языка программирования JavaScript. На сайте эта часть будет отображается, но в исходном коде страницы — нет. При отключенной поддержке JavaScript в браузере эта часть тоже не будет отображаться.
Поисковые системы не смогут увидеть эту часть, выводимую через AJAX.
Рассмотрим два способа выведения контента через AJAX в Worpress.
Содержание
Способ 1
I. Создать в папке темы WordPress-темы сайта новый php-файл (пример: ajax_content.php) с таким кодом №1, содержимое которого и будет подгружаться:
|
1 2 3 4 5 6 7 8 9 10 |
<?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’е видно в строке браузера, при редактировании страницы, например:
https://wpcraft.top/wp-admin/post.php?post=9478&action=edit.
III. В том месте файла sidebar.php, index.php, footer.php, где нужно вывести блок, вставить код:
|
1 2 3 4 5 |
<div id="ajaxcontent"></div> |
IV. Т. к. AJAX реализуется с помощью jQuery, и если jQuery не подключен к сайту, тогда в файле header.php перед <?php wp_head(); ?> нужно добавить следующее:
|
1 2 3 4 5 6 7 8 9 |
<?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 кодом:
|
1 2 3 4 5 6 7 8 9 |
(function($) { $(function() { $("#ajaxcontent").load("http://домен/адрес-созданной-страницы/"); }) })(jQuery) |
b) Созданный js-файл положить в папку темы сайта. c) Подключить в header.php такой строкой перед тегом </head>:
|
1 2 3 4 5 |
<script src="http://site.com/wp-content/themes/ТЕМА/jscontent.js"></script> |
Способ 2
Второй вариант немного короче.
I. Создать в папке темы WordPress-темы php-файл (пример: ajax_content.php) с кодом:
|
1 2 3 4 5 6 |
<?php require_once("../../../wp-load.php"); ?> <a href="http://site.com/page.html" rel="nofollow">Ссылка или всё что угодно</a> |
II. В том месте, где необходимо вывести блок, вставить html-код:
|
1 2 3 4 5 |
<div id="ajaxcontent"></div> |
III. если jQuery не подключен к сайту, тогда в файле header.php перед
<?php wp_head(); ?> нужно добавить следующее:
|
1 2 3 4 5 6 7 8 9 |
<?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 кодом:
|
1 2 3 4 5 6 7 8 9 |
(function($) { $(function() { $("#ajaxcontent").load("http://домен/адрес-созданной-страницы/"); }) })(jQuery) |
b) Созданный js-файл положить в папку темы сайта.
c) Подключить в header.php такой строкой перед тегом </head>:
|
1 2 3 4 5 |
<script src="http://site.com/wp-content/themes/ТЕМА/jscontent.js"></script> |
Способы выведения блоков через AJAX взяты у dimox.name, за что ему — спасибо.