AJAX поиск для WordPress

Вы обращали внимание на AJAX поиск на сайтах, которые Вы посещаете? А хотели бы добавить на свой сайт подобный поиск именно в том виде, в котором хотите именно Вы?

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

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

Поиски статей на эту тему в интернете принесли неудовлетворительные результаты. Большинство предлагало использовать плагины, другие были слишком сложными, а третьи вообще незаконченными (работали не совсем корректно). Отсюда было решено описать мой вариант AJAX поиска.

Как это работает?

Ввиду того, что я решил перейти целиком и полностью на WordPress, то и AJAX поиск делать будем именно на нём. Это первая моя статья из цикла статей по WordPress, потому прошу извинить, если что-то неверно истолковываю.

Наш поиск будет срабатывать при вводе более 2-х символов и выводить результаты в соответствующий блок. При нажатии кнопки Enter, как и раньше, пользователь будет перемещаться на страницу результатов поиска.

Итак, в нужное место добавьте форму поиска:

В файле functions.php Вашей темы добавьте следующий фильтр, чтобы переопределить шаблон вывода формы:

С помощью фильтра мы изменяем форму стандартного поиска WordPress так, как нужно именно нам. Здесь мы убрали кнопку поиска, оставив только поле ввода, а также добавили пустой блок, в который будем выводить результаты поиска.

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

Внешний вид

Теперь давайте добавим некоторое оформление, чтобы всё красиво смотрелось:

Обратите внимание на блок, который оборачивает весь наш поиск, он имеет свойство position: relative; а сам блок результатов — абсолютное позиционирование. В основном всё оформление зависит исключительно от Вас, главное обратите внимание на позиционирование и на то, какие блоки скрыты.

Отправка данных с помощью AJAX

Создайте файл search.js и добавьте в него следующий скрипт:

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

После этого мы проверяем, чтобы в поле поиска было более 2-х символов. Функция $.trim(); позволяет нам удалить пробелы вначале и конце строки, что опять таки позволит предотвратить отправку формы, если пользователь просто ввел много пробелов.

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

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

Теперь необходимо подключить наш файл скрипта, Вы можете сделать это любым удобным для Вас способом, лично я предпочитаю осуществлять подключение в файле functions.php

Обратите внимание, что скрипт у нас работает на основе библиотеки jQuery, поэтому не забудьте подключить её тоже.

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

Основной обработчик

Откройте файл functions.php и добавьте следующий код:

Здесь мы описали стандартную функцию WordPress WP_Query(), о которой Вы можете найти множество статей в интернете. В качестве аргумента поиска «s» мы передаем полученное значение переменной term, которую отправили с помощью AJAX.

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

Вот и всё, ничего сложного. Если у Вас остались вопросы, оставляйте их в комментариях.

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
5,00 / 5 баллов
3 участников
Комментарии

Здесь еще никто не оставлял комментарии.

Добавить комментарий

* - поля обязательные для заполнения. E-mail не публикуется.