Автоподсказки в поиске — это удобная функция, которая значительно улучшает пользовательский опыт на сайте WordPress. Она позволяет посетителям видеть варианты запросов и релевантные результаты уже во время ввода текста в поисковую строку. В этой статье мы рассмотрим, как добавить автоподсказки в стандартный поиск WordPress, разберем лучшие плагины и приведем примеры собственного кода с использованием AJAX.
Почему стоит добавить автоподсказки в поиск WordPress
Стандартный поиск WordPress часто критикуют за простоту и ограниченный функционал. Пользователь вводит запрос, нажимает Enter и получает результаты. Без автоподсказок посетителю приходится угадывать правильное написание или формулировку, что снижает конверсию и повышает показатель отказов.
Автоподсказки помогают:
- Сократить время поиска информации;
- Улучшить юзабилити сайта;
- Предложить релевантные варианты запросов;
- Повысить конверсию сайта за счет быстрого нахождения нужного контента.
Реализовать автоподсказки можно как с помощью готовых плагинов, так и самостоятельно, если нужен легкий и гибкий вариант без лишних зависимостей.
Лучшие плагины WordPress для автоподсказок в поиске
1. Relevanssi — расширенный поиск с поддержкой автоподсказок
Relevanssi — один из самых популярных плагинов для улучшения поиска. Он индексирует контент, учитывает релевантность и поддерживает автоподсказки с помощью дополнительной настройки.
Чтобы активировать автоподсказки, нужно подключить скрипты и использовать AJAX-запросы к серверу. Relevanssi предоставляет удобный API для поиска совпадений по ключевым словам.
2. Ajax Search Lite — простой и функциональный
Ajax Search Lite — плагин с готовой поддержкой поиска с автоподсказками. Он легко настраивается через админку, позволяет выбирать посты, страницы и пользовательские типы записей для поиска.
Этот плагин отлично подходит для сайтов, где нужно быстро внедрить поиск с автоподсказками без программирования.
3. WPSearch Autocomplete (ссылка на WPS Autocomplete)
Плагин из магазина WPSHOP.RU, который фокусируется на быстром автодополнении и простоте интеграции. Поддерживает кастомизацию шаблонов и интеграцию с WP REST API.
Как самостоятельно добавить автоподсказки в поиск WordPress
Если вы предпочитаете контролировать весь процесс, можно сделать автоподсказки своими силами на PHP и jQuery (или другом JS). Рассмотрим пример простой реализации.
Шаг 1. Добавляем AJAX обработчик в functions.php
add_action('wp_ajax_wpbe_get_search_suggestions', 'wpbe_get_search_suggestions');
add_action('wp_ajax_nopriv_wpbe_get_search_suggestions', 'wpbe_get_search_suggestions');
function wpbe_get_search_suggestions() {
if (!isset($_GET['term'])) {
wp_send_json_error('No search term');
wp_die();
}
$term = sanitize_text_field($_GET['term']);
$args = [
's' => $term,
'posts_per_page' => 5,
'post_status' => 'publish',
];
$query = new WP_Query($args);
$suggestions = [];
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$suggestions[] = [
'title' => get_the_title(),
'permalink' => get_permalink(),
];
}
}
wp_reset_postdata();
wp_send_json_success($suggestions);
wp_die();
}Этот код регистрирует обработчик AJAX-запросов, который принимает параметр term и возвращает до 5 публикаций с совпадениями по заголовку или содержимому.
Шаг 2. Добавляем JavaScript для отправки AJAX-запросов и отображения подсказок
jQuery(document).ready(function($) {
$('#search-input').on('input', function() {
var term = $(this).val();
if (term.length < 2) {
$('#search-suggestions').empty().hide();
return;
}
$.ajax({
url: wpbe_ajax_object.ajax_url,
data: {
action: 'wpbe_get_search_suggestions',
term: term
},
success: function(response) {
if (response.success) {
var suggestions = response.data;
var html = '';
suggestions.forEach(function(item) {
html += '<li><a href="' + item.permalink + '">' + item.title + '</a></li>';
});
$('#search-suggestions').html(html).show();
} else {
$('#search-suggestions').empty().hide();
}
}
});
});
// Скрыть список при клике вне
$(document).click(function(e) {
if (!$(e.target).closest('#search-input, #search-suggestions').length) {
$('#search-suggestions').hide();
}
});
});Этот скрипт отправляет запросы при вводе текста в поле с id search-input и отображает результаты в элементе с id search-suggestions. Для работы скрипта нужно локализовать скрипт и передать ajax_url из PHP.
Шаг 3. Локализация скрипта и верстка
В functions.php подключаем скрипт и передаем параметры:
function wpbe_enqueue_scripts() {
wp_enqueue_script('wpbe-search-autocomplete', get_template_directory_uri() . '/js/search-autocomplete.js', ['jquery'], '1.0', true);
wp_localize_script('wpbe-search-autocomplete', 'wpbe_ajax_object', [
'ajax_url' => admin_url('admin-ajax.php'),
]);
}
add_action('wp_enqueue_scripts', 'wpbe_enqueue_scripts');В шаблоне поиска добавьте HTML:
<input type="search" id="search-input" placeholder="Поиск..." autocomplete="off"/>
<ul id="search-suggestions" style="display:none; position:absolute; background:#fff; border:1px solid #ccc; list-style:none; padding:0; margin:0; width:300px; max-height:200px; overflow-y:auto;"></ul>Так вы получите простой, но функциональный механизм автоподсказок.
Дополнительные советы и оптимизации
Кэширование результатов поиска
Чтобы снизить нагрузку на сервер при большом количестве запросов, полезно добавить кэширование результатов. Можно использовать Transients API WordPress для хранения результатов на некоторое время.
Расширение поиска по пользовательским полям
Если вы хотите искать не только по заголовкам и содержимому, но и по метаданным, добавьте соответствующие параметры в WP_Query и измените логику поиска в AJAX обработчике.
Использование сторонних сервисов
Для очень больших сайтов имеет смысл интегрировать поиск с автоподсказками через внешние сервисы, например Algolia или ElasticPress. Это позволит получить молниеносный поиск с учетом синонимов и опечаток.
Заключение
Автоподсказки в поиске WordPress — это важный элемент улучшения удобства пользователей. Вы можете выбрать готовые плагины, такие как Ajax Search Lite или Relevanssi, либо написать собственное решение, используя AJAX и WP_Query. В статье приведены детальные примеры кода и советы по оптимизации, которые помогут вам внедрить эту функцию быстро и эффективно.