AJAX поиск по сайту WordPress (REST API v2)

  • 490
  • 0
  • 03 февраля 2018

Envirepment: WordPress, Bootstrap3, jQuery, WP REST API v2.

Сегодня мы будем делать современный, красивый и легко переносимый на другие сайты AJAX поиск по записям сайта с использованием REST API версии 2.

Итак, для начала обрисуем план действий:

  1. Создаем модальное окно (используем для этого шаблон из Bootstrap 3 )
  2. В модальном окне размещаем форму поиска
  3. Пишем скрипт, который будет перехватывать данные их формы поиска и отправлять их обработчику REST API и возвращать нам результат в виде JSON-обьекта. Который мы в цикле выведем в область результатов.

Ниже приведен html-разметка модального окна с формой. Вставляем её в футер вашего шаблона (в WP это – footer.php) перед закрывающим тегом body.

JS обработчик: (подключаем после jQuery)

Стилизуем модальное окно и поле поиска: (Sass)

 

Добавьте класс “search_li_trigger” к кнопке, которая будет вызывать поп-ап.

Для отображения миниатюр вам нужно обязательно установить плагин Better REST API Featured Images
По-умолчанию REST API post list не продоставляет доступ к миниатюрам записей, и для того что бы добавить информацию о миниатюрах (url, sizes) нам нужно как до добавить эту информацию в результирующий json обьект. В этом нам как раз и поможет данный плагин.
Как это выглядит на деле?

Прокомментировать

×
Ваш комментарий успешно отправлен
и будет опубликован после модерации
× Превышен лимит отправки комментариев за период времени.
Пожалуйста, отправьте комментарий позже.