Как добавить AJAX Live Search на сайт WordPress? –

По умолчанию WordPress предлагает блок поиска с редактором Gutenberg. Вы можете вставить этот блок поиска в любое место на вашем сайте, например, в верхний и нижний колонтитулы, на боковую панель и в область контента. Однако функция поиска по умолчанию не поддерживает поиск в реальном времени AJAX. Вам нужен сторонний плагин, чтобы добавить функцию живого поиска AJAX в ваш WordPress.

Сайт WordPress по умолчанию против поиска AJAX

Вот как работает поиск по умолчанию в WordPress:

• Введите запрос или ключевые слова в поле поиска и нажмите Enter.
• Результаты поиска откроются на новой странице.
• Щелкните нужный результат, чтобы открыть эту страницу.

Это длительный процесс, особенно когда ключевые слова имеют точное совпадение. Вот как работает живой поиск AJAX:

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

Целью AJAX является динамическая загрузка контента без обновления страницы. Здесь вам вообще не нужно посещать страницу результатов поиска, что может сэкономить время пользователя и увеличить концентрацию внимания.

Добавьте AJAX Live Search в WordPress

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

Установить плагин SearchWP

• Перейдите в раздел «Плагины > Добавить новый» в панели администратора и введите «searchwp» в поле поиска.
• Это отфильтрует доступные плагины из репозитория WordPress и покажет плагин «SearchWP Live AJAX Search».
• Нажмите кнопку «Установить сейчас», а затем кнопку «Активировать», чтобы начать использовать плагин на своем сайте.

Установите поисковый плагин SearchWP Live AJAX

Настройка плагина SearchWP

У плагина не так много опций, и после активации автоматический поиск AJAX в реальном времени. Однако перейдите в раздел «SearchWP > Live Search», чтобы изменить настройки по умолчанию.

• Включить живой поиск – убедитесь, что этот флажок установлен, чтобы использовать функцию поиска в реальном времени AJAX.

Включить Live AJAX-поиск в плагине SearchWP

• Включить стиль – выберите опцию «Позиционирование и визуальное оформление», чтобы загрузить CSS из плагина. Если вы видите какие-либо проблемы со стилем CSS во внешнем интерфейсе, вы можете попробовать другие варианты, такие как «Только стиль позиционирования» или «Без стилей».
• Позиционирование – вы можете выбрать отображение живого поиска над или под полем поиска. Рекомендуется выбрать «Под формой поиска», особенно если у вас есть опция поиска в шапке навигации или на боковой панели. Если у вас есть окно поиска в нижнем колонтитуле, вам может подойти вариант «Над формой поиска».
• Автоматическая ширина – включите эту опцию, чтобы ширина раскрывающегося списка поиска в реальном времени совпадала с шириной формы поиска.
• Скрыть объявления – включите это, чтобы отключить объявления плагинов.

Настройки плагина SearchWP

После выбора параметров нажмите кнопку «Сохранить настройки», чтобы применить изменения.

Тестирование живого поиска AJAX

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

Добавление поиска AJAX в WordPress

Если вы не видите совпадений в списке, нажмите клавишу ввода, чтобы открыть страницу поиска по умолчанию. WordPress откроет результаты поиска на одной из следующих страниц поиска и покажет 10 элементов в списке в соответствии со стилем вашей темы.

Вы можете изменить количество элементов, отображаемых на странице результатов, перейдя в раздел «Настройки > Написание» или введите число в поле «Страницы блога отображать не более». Однако этот выбор также повлияет на количество сообщений, отображаемых в блоге и на других страницах архива. Также можно заблокировать страницы внутреннего поиска в файле robots.txt, чтобы поисковые системы не индексировали эти страницы.

Заключительные слова

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