Технология Ajax для WordPress: плагины и их назначение

Здравствуйте, друзья! С каждым годом мы, пользователи сети, становимся все более требовательны к такому показателю веб-ресурсов, как интерактивность. Согласитесь, гораздо удобнее, отправив форму с контактными данными или нажав кнопку «Подписаться», продолжить изучение интересной нам информации на страницах сайта, а не ожидать их перезагрузки. По этой же причине широкую популярность приобрела и бесконечная прокрутка, как во Вконтакте или на Фейсбуке, когда новости подгружаются «на лету» и нет необходимости переходить по ссылкам постраничной навигации.

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

Такой способ динамического выведения контента реализовывается с помощью технологии AJAX. И сегодня мы узнаем, по какому принципу она работает и какие существуют Ajax-плагины в WordPress для создания фильтров записей, выведения постов и добавления комментариев без перезагрузки страниц. Также мы рассмотрим ряд случаев, в которых рекомендуется избегать применения Ajax для WordPress-блога.

Содержание:

1. Суть концепции асинхронных запросов
2. WordPress и Ajax-запросы: преимущества и недостатки использования
3. Ajax-подгрузка постов на WordPress
4. Плагины для создания Ajax-фильтров записей
5. Отправка комментариев без перезагрузки страницы

AJAX-технология: обновление данных страницы без перезагрузки

Прежде чем мы познакомимся со способами интеграции и использования Ajax в WordPress, давайте разберемся, что скрывается за этим понятием.

AJAX (аббревиатура от Asynchronous JavaScript And XML) – это подход к осуществлению обмена данными между браузером и сервером без перезагрузки страницы. Ajax по сути не является отдельным языком программирования или технологией. Это – способ взаимодействия JavaScript, XML, HTML, CSS с базой данных асинхронно, в фоновом режиме, с помощью которого генерируется какой-то конкретный участок обновленного контента, а не вся страница целиком.

Чтобы лучше понять, чем отличается Ajax-технология взаимодействия пользователя с веб-ресурсом, рассмотрим вначале, как работает стандартная схема обработки пользовательских данных и формирования HTML-страницы:

1. Например: мы вводим некоторые данные в форму
2. Браузер формирует HTTP-запрос и передает его серверу. В это время управление страницей блокируется
3. Сервер обрабатывает его и отправляет данные PHP-скриптам (или другим серверным языкам программирования)
4. Скрипты совершают требуемые операции с данными (в нашем случае — вносят их в базу данных), генерируют обновленную страницу и возвращают ее серверу
5. Сервер передает ее браузеру в формате HTTP-ответа
6. Браузер интерпретирует полученную информацию и отображает в формате HTML-разметки, которую мы и можем видеть. Управление страницей снова становится доступно. При этом все скрипты и стили, подключенные к странице, тоже будут получены повторно.

Это – основа работы интернет-ресурсов. При таком сценарии после каждого обращения к серверу происходит полная перезагрузка страницы.

А как будут выглядеть на блоге WordPress Ajax-запросы?

1. Мы совершаем некоторое действие с интерактивным элементом веб-приложения (например, отправляем данные с помощью все той же формы)
2. Клиентский язык программирования, а это в основном JavaScript/jQuery, подготавливает данные для отправки серверу
3. Браузер передает запрос серверу. Но при этом, в отличии от традиционного веб-ресурса, управление страницей моментально возвращается. Во всех браузерах на данный момент существует специальный объект XMLHttpRequest . Он предназначен для обмена данными между вызывающим скриптом и сервером напрямую
4. Сервер обрабатывает запрос, генерирует и возвращает ответ клиенту
5. Полученную информацию браузер отдает в JavaScript
6. Функция JavaScript обрабатывает ответ и обновляет соответствующие фрагменты контента.

Для работы с AJAX в WordPress существуют некоторые специальные функции, обработчики и хуки. Но для самостоятельной реализации техники асинхронных запросов требуются знания в JavaScript/jQuery, HTML и PHP. К счастью, движок ВП располагает широким выбором плагинов, которые помогут нам реализовать самые востребованные на Вордпресс-блогах приемы Ajax.

Всегда ли уместно использование Ajax?

Теперь мы с вами знаем, что технология AJAX дает возможность разработчику веб-сайта отбросить классическую схему взаимодействия сервера и браузера, когда последний «замирает» на некоторое время в ожидании ответа на отправленный запрос. Очевидно, что динамическое изменение контента на странице без полной ее перезагрузки улучшает такой показатель, как скорость реакции на совершенное пользователем действие. Это, в свою очередь, отражается наилучшим образом на юзабилити, или удобстве сайта.

Еще одним аргументом в пользу интеграции Ajax в WordPress-блог можно по праву считать значительную экономию web-трафика. При каждом запросе, поступающем от браузера, сервер не генерирует целую страницу и не передает все относящиеся к ней скрипты и стили.

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

Но при очевидных плюсах AJAX у seo-оптимизаторов существуют основания с осторожностью относиться к данной технологии. Давайте теперь обозначим самые существенные недостатки асинхронных запросов:

• контент, загружаемый динамически, не может быть проиндексирован поисковыми системами. Поисковые роботы не умеют осуществлять переход по JavaScript-ссылкам. Чтобы содержимое вашего ресурса, отвечающее запросу пользователей, не осталось незамеченным, требуются альтернативные способы обеспечения доступа к нему. Один из самых простых – создать страницу карты сайта;
• счетчики статистики ( например, счетчик посещений сайта LiveInternet), размещенные на страницах с использованием Ajax, отображают данные некорректно. Это закономерное следствие того, что такие страницы недоступны ботам;
• поскольку содержимое Ajax-страницы формируется «на лету», кнопка «Назад» теряет свою актуальность. Это достаточно неудобно для пользователя, потому что данный способ перемещения по ресурсу – второй по популярности способ навигации после непосредственно перехода по ссылкам;
• загруженную динамически страницу нельзя добавить в «Избранное». У каждой такой группы страниц на AJAX будет адрес самой первой из них;
• большое количество Ajax-запросов при некачественно написанном коде может не ускорить загрузку контента, а наоборот, сделать работу блога медленнее.

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

А мы переходим к практической части нашего знакомства с асинхронными запросами. Далее будут рассмотрены некоторые Ajax-плагины WordPress для реализации самых популярных задач данной технологии.

Плагин бесконечного скроллинга на AJAX

Наверняка вы замечали, что большинство соцсетей использует на своих сайтах эффект бесконечной прокрутки, когда следующие посты/новости/твиты подгружаются автоматически по мере того, как мы скроллим страницу. И отсутствие необходимости отрываться от просмотра информации на переходы по ссылкам пагинации в значительной мере способствует тому, что мы дольше остаемся на таком веб-ресурсе. Очередной пост, появляющийся еще до того, как мы успели прочесть предыдущий, сразу же перехватывает наше внимание. Приходится признать: это затягивает!

Статистика тоже указывает на это. По имеющимся данным, что при наличии бесконечной прокрутки на сайте количество страниц, просмотренных пользователем за одно посещение, больше на 20%. В то же время количество отказов меньше на 15%.

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

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

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

                Если вы все же решили отказаться от привычной пагинации, то одним из самых простых способов реализации Ajax-подгрузки постов на WordPress  является использование плагина Ajax Pagination and Infinite Scroll. Функционал плагина позволяет работать с записями, страницами, пользовательскими типами записей и c WooCommerce.

                После стандартной установки и активации, в «Настройках» консоли появляется пункт меню «Ajax Pagination Settings». Переходим по этой ссылке. Плагин англоязычный, но опций мало и сейчас мы разберем их все. Первый блок — «Wrapper Settings». Эти настройки позволяют определить селекторы, которые отвечают за оформление записей/продуктов и ссылок постраничной навигации с помощью css-стилей. Если предыдущее предложение показалось вам набором непонятных слов, то обязательно прочтите статью о редактировании стилей CSS в Вордпресс.

• Theme Defaults. В этом поле необходимо выбрать тему, по отношению к которой мы будем применять технику подгрузки постов на Ajax в WordPress. В выпадающем списке можно увидеть только самые популярные шаблоны, в основном те, которые идут в базовом пакете CMS. Если вы находите подходящий вам вариант, то все последующие поля блока «Wrapper Settings», заполняются автоматически. В том случае, когда вы используете стороннюю тему, потребуется заполнить их вручную;
• Posts Selector. Здесь указывается селектор того блока html-разметки, в который заключены все посты или список продуктов. Если вам приходится прописывать его самостоятельно, воспользуйтесь браузерным расширением Firebug или другой панелью инструментов разработчика. Ею оснащены и Гугл Хром, и Опера, и все имеют идентичный принцип работы.

Для тестирования Ajax Pagination мною была установлена новая базовая тема ВП «Twenty Seventeen», еще не вошедшая на момент написания статьи в список «Theme Defaults». На скриншоте видно, как выглядит div с соответствующим классом в моем случае.

• Post Selector. Этот параметр – селектор отдельной записи. На картинке выше отмечено, как данные элементы располагаются в DOM (объектной модели документа, которую мы и инспектируем, кода открываем инструменты разработчика);
• Navigation Selector. Здесь следует прописать, в случае такой необходимости, класс постраничной навигации. Как и в браузере, в разметке блок пагинации в большинстве случаев расположен сразу под записями. В моем шаблоне он помещен между тегами «nav» «/nav» с классом .navigation;
• Next Selector. Это селектор ссылки (тег <a>) на следующую страницу записей. В блогах такая ссылка обычно отображается как стрелочка или кнопка с соответствующим текстом. В разметке чаще всего она оформляется классом .next. Поскольку такой класс может использоваться и с другими элементами, практикуется следующее написание – a.next. Это буквально означает: ссылка с классом next. Так мы избежим возможной путаницы.

Проверяем, правильно ли выбраны все необходимые селекторы. Если вы прописывали их вручную, обратите внимание, чтобы перед классами стояла точка. И переходим к следующим опциям.

Настройки блока «Pagination Type Settings» отвечают за то, какой вид Ajax-пагинации WordPress мы применим на нашем веб-ресурсе.

В поле «Paging Type» плагин позволяет нам выбрать один из трех вариантов: Infinite Scroll (бесконечная прокрутка), Load More Button (кнопка «Загрузить еще») и Pagination (привычная пагинация).

Параметр «Infinite Scroll Buffer» устанавливается только в том случае, если был выбран бесконечный скроллинг. Он измеряется в пикселях и означает расстояние от нижней части окна браузера до нижней границы записи. Когда при прокрутке страницы это расстояние будет равно указанному числовому значению, будут динамически загружаться следующие посты. Другими словами, чем выше значение, тем раньше исполняется функция AJAX.

Количество выводимых за один раз записей или товаров равно количеству записей на странице, выбранных в стандартных настройках чтения Вордпресс.

В следующем разделе «Loader Settings» мы можем загрузить свой прелоадер в формате gif, если нам не подходит предлагаемый плагином AJAX Loader. Прелоадер – это предзагрузчик, который информирует, что происходит загрузка и необходимо подождать.

Следующий раздел нам понадобиться, если мы выбрали в качестве Ajax-пагиннации для WordPress-блога кнопку «Загрузить еще».

«Load More Button Text»: пропишите текст кнопки загрузки записей.

«Loading More Posts Text»: укажите текст для кнопки, отображающийся во время загрузки. Это по сути аналог предзагрузчика для данного варианта Ajax-пагинации.

Блок с названием «Callback Settings» относится к более продвинутым опциям и нам не понадобится.

Сохраняем изменения и получаем готовый работающий механизм пагинации на AJAX.

Хочется еще отметить, что Ajax Pagination and Infinite Scroll позволяет производить множественные настройки. Например, если на вашем сайте размещена и витрина WooCommerce, и блог, то вам потребуется несколько селекторов на каждый параметр для реализации Ajax-технологии на обеих страницах. Это осуществляется очень просто. Жмем кнопку  «Add New» возле заголовка «Ajax Pagination Settings» и проделываем те же шаги. В результате формируется еще одна страница настроек.  Для удаления такой страницы воспользуйтесь кнопкой «Delete» размещенной в нижем левом углу. Кнопка появляется только в том случае, если создано более одной страниц настроек.

Фильтры товаров на WooCommerce

Для любого современно интернет-магазина возможность осуществлять фильтрацию по различным категориям без перезагрузки страницы  – это своеобразный маст-хэв. Если вы уже произвели основные настройки WooCommerce своего проекта и создали атрибуты товаров, то пришло время позаботиться об интеграции в свой магазин на WordPress Ajax-фильтров продуктов. Как это делается, узнаем на примере плагина YITH WooCommerce Ajax Product Filter.

После установки и активации плагина в админ-панели CMS появляется новый пункт меню «YITH Plugins», с двумя подпунктами: «Ajax Product Filter» и «How to install premium version». Маловероятно, что они нам понадобятся. На странице Ajax Product Filter во вкладке «Front End» необходимо указать селекторы определенных блоков по аналогии с «Wrapper Settings» плагина Ajax Pagination And Infinite Scroll, рассмотренного нами ранее. Но делать это самостоятельно нужно только в том случае, если вы создали интернет-магазин не на основе шаблона WooCommerce.

Открыв таб «Custom Style», вы можете вручную ввести свой кастомный код css-стилей, чтобы изменить оформление тех или иных элементов плагина.

Вкладка «Premium Version» предоставляет информацию о преимуществах премиум-версии шаблона. А подпункт меню «How to install premium version» — о том, как инсталлировать платный вариант YITH WooCommerce Ajax Product Filter. Одним из явных преимуществ премиальной версии является возможность фильтрации по ценовому диапазону.

Помимо пунктов меню, плагин создает в разделе «Внешний вид» — «Виджеты» 2 новых виджета: «YITH WooCommerce Ajax Product Filter» и «YITH WooCommerce Ajax Reset Filter». Разместим их в сайдбаре страницы магазина.  

«YITH WooCommerce Ajax Product Filter» предполагает следующие настройки:

• «Title» — название, обозначающее характеристику, по которой будет сортироваться товар данным фильтром. Это может быть «Объем» для рюкзаков, «Событие» для подарков или «Выберите цвет» для одежды или букетов и т.п.;
• «Type» — вид, в котором будет представлен фильтр посетителю. На выбор предлагается 4 варианта: List (обычный список с перечнем свойств), Color (маленькие квадраты, окрашенные в соответствующий цвет, если речь идет о выборке по атрибуту «цвет»), Label (ярлык, метка, название можно назначать произвольно), Dropdown (выпадающий список);
• «Query Type» — этот параметр отвечает за то, как будет осуществляться фильтрация при одновременном выборе нескольких свойств. «AND» — результаты должны содержать товары, соответствующие сразу всем отмеченным характеристикам. «OR» — хотя бы одной из указанных;
• «Attribute» — непосредственно сам атрибут товара.

Допускается неограниченное количество расположенных в сайдбаре блога WordPress Ajax-фильтров.

В виджете «YITH WooCommerce Ajax Reset Filter», который отвечает за сброс всех фильтров, от нас требуется только название («Title») и текст, отображающийся на кнопке («Button Label»).            

Вот так может выглядеть Ajax-фильтр, созданный с помощью данного плагина:

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

Если после установки и произведения настроек плагина фильтр Ajax для wordPress не работает, проверьте, добавлены ли товарам атрибуты и относится ли используемая вами тема к стандартным шаблонам WooCommerce.

WP Ajaxify Comments: комментарии с помощью технологии AJAX

После отправки комментария на Вордпресс-блоге по умолчанию происходит перезагрузка страницы, чтобы мы могли увидеть новое добавленное посетителем сообщение.  В случае возникновения ошибки, например, если была отправлена пустая форма комментариев, открывается страница с сообщением о некорректном действии. Пользователь вынужден возвращаться к нужной ему записи по ссылке «Назад». Это достаточно неудобно.

На сегодняшний день разработано достаточное количество плагинов, позволяющих реализовать на WordPress комментарии по Ajax-технологии. Одно из популярных решений – WP Ajaxify Comments. Данный плагин не создает свою систему комментирования, а просто добавляет уже существующей в шаблоне функциональность асинхронных запросов.

Устанавливаем, активируем и переходим в настройки по адресу в консоли «Настройки» — «WP Ajaxify Comments». Если вы используете одну из стандартных тем движка, достаточно поставить галочку напротив поля «Enable Plugin» и сохраниться. Тем самым вы активируете работу плагина. Дело в том, что для работы ему необходим доступ к некоторым элементам разметки, обозначенным тем или иным селектором. В базовых настройках уже прописаны значения этих селекторов, используемых в стандартных шаблонах WP («Twenty Seventeen», «Twenty Sixteen» и т.д). Если вам нужно назначить кастомные классы или id элементов, чтобы найти их в структуре страницы, воспользуйтесь способом, о котором мы говорили ранее в контексте создания бесконечного сроллинга.

Плагин готов к работе. Теперь после отправки комментария страница не перезагружается, а сообщение об ошибке, как и об успешном добавлении комментария, появляется в виде всплывающего окошка.

WP Ajaxify Comments предлагает нам достаточно длинный список настроек. В основном они касаются не функционала плагина, а отображения попапов. Мы можем изменять их цвет фона, прозрачность, расположение на странице, текст, шрифт и прочие детали. Думаю, нет смысла описывать все параметры. Поэкспериментировав, вы достаточно легко поймете, за что отвечает каждый из них и сможете подобрать подходящий под дизайн вашего блога вид модальных окон.

Вот для наглядности видео по установке и настройке плагина WP Ajaxify:

Это все, что я хотела вам рассказать сегодня о способах применения Ajax в WordPress. Теперь мы знаем, что данная технология может сделать пользовательский интерфейс еще более удобным и быстрым. А помочь в вопросе ее интеграции в Вордпресс могут такие плагины, как: Ajax Pagination and Infinite Scroll, YITH WooCommerce Ajax Product Filter, WP Ajaxify Comments.