Как подгрузить блоки контента при помощи Ajax

как подгрузить часть контента ajaxВ данной статье рассказано, как подгружать часть контента на сайте WordPress при помощи технологий Ajax. Подобная штука позволяет прятать от поисковых машин выбранный контент (блоки).
И в то же время данные блоки будут доступны пользователю как и раньше, т.е. юзабельность сайта не теряется, при условии, что эти пользователи не выключали JavaScript в своем браузере.

Данную штуку уже довольно давно я использую на клиентских сайтах. А на ее использование меня подтолкнуло видео, которое будет в конце статьи (советую посмотреть всем).

Внимание

Прежде чем приступать к работе с файлами шаблона сайта - сделайте резервную копию, чтобы в случае чего вернуть все назад. Для редактирования файлов советую воспользоваться бесплатной программой Notepad++, в которой можно откатить все изменения назад, если еще не закрыли файл.

ШАГ 1: создание подгружаемого файла

Прежде всего нам нужно создать файл, где у нас будет размещаться нужный контент. Под контентом понимается от самих слов, до целых блоков (например облако меток, целый сайдбар, или "Информация об авторе сайта без плагина"). Т.е. сами определитесь, что будете прятать.

Итак, нам нужно создать в корневой папке шаблона сайта файл с расширением .php (ajax-content.php например). Внутри него необходимо разместить следующее:

<?php /* Template Name: Контент Ajax */ ?>
<?php wp_tag_cloud(); ?>

В первой строке Контент Ajax обозначает название шаблона (любое). Во второй строке функция wp_tag_cloud(); отобразит облако меток - вместо данной функции подставляете свой контент.

К слову: контентом может быть целый сайдбар, либо его часть. Так же можно поместить другие элементы сайта.

ШАГ 2: создание страницы

Теперь необходимо создать страницу на сайте, которая будет служить некой прокладкой, позволяющая реализовать задуманное. Для этого в админке сайта СтраницыДобавить новую и пишите любой заголовок:
ajax wordpress контент

В сайдбаре выбираете свой шаблон, который создали на Шаге 1:
ajax подгрузка контента

После этого нажимаем Опубликовать и подводим курсор на кнопку Изменить (первая картинка с названием страницы). Когда курсор стоит на данной кнопке, снизу слева в браузере появляется ссылка с большим количеством символов. В этой ссылке нужно найти цифры после page_id. Запишите их на бумажку, т.к. они понадобятся дальше.

Саму страницу можно прикрыть от индекса в robots.txt

ШАГ 3: убираем страницу из меню сайта

Создав новую страницу на предыдущем шаге, скорее всего она автоматически разместиться в вашем меню на сайте. Если подобное произошло, то необходимо избавиться от данной вещи. В файлах шаблона header.php, functions.php или даже footer.php будет размещаться конструкция, которая отвечает за меню сайта. Необходимо найти нечто подобное

wp_list_pages(‘title_li=)

До этого будет какое-то обозначение menu, поэтому сразу соориентируетесь. В Notapad++ можете открыть эти файлы и нажать CTRL+F и попробовать найти по wp_list_pages. После того, как нашли искомое - необходимо добавить исключение созданной страницы. Я говорил на Шаге 1 записать цифры после page_id. Вот теперь они нам понадобятся:

wp_list_pages(‘exclude=154&title_li=)

Цифра 154 - это номер страницы, которую исключаем из меню сайта.

ШАГ 4: выбор места отображения контента

Теперь необходимо вставить на то место, где вы хотите видеть подгружаемый контент из ШАГ 1 следующую конструкцию:

<div id="ajax-content"></div>

Вместо ajax-content можно написать все что угодно на латинице. Но стоит запомнить название, т.к. понадобится его прописать еще раз в другом файле.

ШАГ 5: подключаем Jquery

Во многих шаблонах Jquery подключен по-умолчанию. Следовательно для них не нужно выполнять данный шаг. Откройте файл header.php и посмотрите, если до тега </head> стоит подобный url в скрипте, то значит библиотека подключена. В противном случае вставляем:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Есть несколько способов подключения Jquery на сайте. Я показал лишь один из них.

ШАГ 6: создаем JS-файл

Теперь необходимо создать сам файл скрипта. Для этого создаем новый файл с расширением .js и любым названием на латинице. Внутри данного файла помещаем следующий код:

(function($) { $(function() { 
  $("#ajax-content").load("http://mojwp.ru/oblako");
}) })(jQuery)

Здесь обращаем внимание на следующее:

  • #ajax-content - название id из Шага 4;
  • http://mojwp.ru/oblako - url созданной страницы из Шага 2.

Данный файл .js (к примеру вы его обзовете oblako.js) необходимо разместить в корне шаблона сайта, либо специальной папке js, если она уже была создана разработчиками вашего шаблона (такое бывает довольно часто).

ШАГ 7: заключительный

Теперь осталось подключить скрипт на сайте. Для этого в файле header.php перед закрывающим тегом </head> вставляем следующее:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/oblako.js"></script>

Суть конструкции: указать путь до файла со скриптом. Т.е. можно прописать вручную http://сайт.ру/wp-content/themes..... Либо воспользоваться bloginfo('template_url'), которая говорит, что файл лежит в корне шаблона. Если он не в корне, то можно немного подправить:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/oblako.js"></script>

В этом случае файл oblako.js лежит в папке js, которая находится в корне шаблона.

Послесловие

Вот и все манипуляции. Текста получилось много, но на самом деле все делается за пару минут. Главное определитесь - нужно ли вам что-то прятать и что это будет.

В результате при нажатии CTRL+U в браузере, вместо контента будет просто выводиться div, который был прописан на Шаге 4.

А теперь обещанное видео, которое рекомендую посмотреть всем увлекающихся поисковой оптимизацией (2 части):

Муза статьи: блог dimox.name.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 12 комментариев
  1. Дмитрий (16 комм.):
    http://nashsovetik.ru/

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

    • Виталий (1674 комм.):

      в админке сайта:

  2. Дмитрий (16 комм.):
    http://nashsovetik.ru

    Огромное спасибо за оперативный ответ!

  3. Никита Рябин (11 комм.):
    http://pro97.ru/

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

  4. Василий (3 комм.):

    Странно, видимо код php в комментариях использовать нельзя.

    Как быть? Но может оно и к лучшему, не будет сбивать.

    Прошу помощи, Виталий.

    • Виталий (1674 комм.):

      не возьму в толк - зачем вам такое? Ведь в аяксе не индексируется контент (ссылки в том числе). Только жизнь усложняете себе

      • Василий (3 комм.):

        Да, это я знаю. Но потребность такая есть, прохожу марафон у Романа Пузата, и там задание - избавиться от циклических ссылок.

        Понятно, что ПС этих ссылок и так не видит, да и посетители вряд ли станут кликаться об ссылку, ведущую в раздел, где они уже и так находятся.

        Но все же, если это возможно реализовать, был бы весьма признателен за помощь.

        • Виталий (1674 комм.):

          сейчас не подскажу, т.к. не было необходимости разбираться в подобном. Если угодно, могу дать контакты PHP-кодера, который поможет в решении (будет платно, но не думаю что много)

          • Василий (3 комм.):

            Конечно давайте, спасибо. Можете на почту, она у Вас видна.

  5. Андрей (1 комм.):
    http://vyalte.org.ua

    Не получается спрятать сайдбар целиком, вызов функцию вызова сайдбара в файле PHP прописал так -

    потом в файле js
    (function($) { $(function() {
    $("#hidesidebar").load("http://vyalte.org.ua/skryt-kontent");
    }) })(jQuery)
    lfkmit
    дальше
    подгрузки ajax вставил в INDEX.PHP, PAGE.PHP, SINGLE.PHP в место функции вызова сайдбара

    тема foghorn может есть какие то особенности? Подскажите пожалуйста.

    • Виталий (1674 комм.):
      http://mojWP.ru/

      ваш шаблон не знаю, поэтому об особенностях сказать не могу. Нужно разбираться, что сделали. В комментариях од не отобразился полностью. Контакты указаны на сайте, также услуги.

    • Олег (1 комм.):
      http://money-creditor.ru

      Такая же история что не пытаюсь ничего не получается.. При подключении php файла, если там обычный html скрипт срабатывает и все выводится. А если в подключаемом php файле есть циклы, то отображается совсем пустая страница на рабочем сайте. Может у кого нибудь есть идеи как подключить сайтбар на сайте, чтобы все работало. Напишите на givi.tatarenko@ya.ru или здесь

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.84MB | MySQL:76 | 0,711sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html