Как добавить автоподсказки в поиске WordPress

Автоподсказки в поисковой строке — это важный элемент удобства сайта, особенно если у вас много контента. В WordPress стандартный поиск довольно примитивен: он не предлагает подсказки и не помогает пользователю сформулировать запрос быстрее. В этом руководстве мы рассмотрим, как добавить автоподсказки в поиск WordPress, используя готовые плагины и кастомный код для максимальной гибкости.

Почему автоподсказки важны для поиска на WordPress

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

Кроме удобства, автоподсказки могут повысить конверсию: посетитель быстрее ориентируется и остается на сайте дольше. В WordPress это особенно актуально, так как стандартный поиск не предлагает подобного функционала.

Давайте рассмотрим, как реализовать такой функционал.

Использование плагинов для автоподсказок в поиске WordPress

Самый простой способ — воспользоваться специализированными плагинами. Вот несколько популярных и надежных вариантов:

• Ajax Search Lite — популярный плагин с поддержкой AJAX-поиска и автоподсказок. Легко настраивается и быстро работает.
• SearchWP Live Ajax Search — расширение для SearchWP, которое добавляет живые подсказки при вводе.
• Relevanssi — мощный плагин для улучшенного поиска с настройками автоподсказок.

Рассмотрим пример настройки плагина Ajax Search Lite:

1. Установите и активируйте плагин через админку WordPress.
2. Перейдите в настройки плагина и выберите тип поиска — например, по заголовкам и содержимому.
3. Настройте внешний вид автоподсказок, количество результатов и скорость отклика.
4. Вставьте шорткод [ajax_search_lite] в нужное место шаблона или страницу.

Плагин сразу начнет показывать подсказки при вводе текста в поисковую форму.

Кастомная реализация автоподсказок через AJAX и REST API WordPress

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

Создание AJAX обработчика для поиска подсказок

В файле functions.php вашей темы или отдельном плагине добавим обработчик AJAX-запроса:

add_action('wp_ajax_journalx_search_suggestions', 'journalx_search_suggestions_callback');
add_action('wp_ajax_nopriv_journalx_search_suggestions', 'journalx_search_suggestions_callback');

function journalx_search_suggestions_callback() {
    $search_term = sanitize_text_field($_GET['term']);
    if (empty($search_term)) {
        wp_send_json([]);
        wp_die();
    }
    $args = [
        's' => $search_term,
        'posts_per_page' => 5,
        'post_status' => 'publish',
        'post_type' => 'post',
    ];
    $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($suggestions);
    wp_die();
}

Этот код создает AJAX-обработчик, который ищет первые 5 записей по введенному термину и возвращает их заголовки и ссылки в JSON.

JavaScript для отправки запроса и отображения подсказок

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

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('search-input');
    const suggestionsBox = document.createElement('div');
    suggestionsBox.id = 'journalx-suggestions';
    suggestionsBox.style.position = 'absolute';
    suggestionsBox.style.border = '1px solid #ccc';
    suggestionsBox.style.background = '#fff';
    suggestionsBox.style.zIndex = '9999';
    suggestionsBox.style.width = searchInput.offsetWidth + 'px';
    searchInput.parentNode.appendChild(suggestionsBox);

    searchInput.addEventListener('input', function() {
        const term = this.value.trim();
        if (term.length < 2) {
            suggestionsBox.innerHTML = '';
            return;
        }
        fetch(journalx_ajax_object.ajax_url + '?action=journalx_search_suggestions&term=' + encodeURIComponent(term))
            .then(response => response.json())
            .then(data => {
                suggestionsBox.innerHTML = '';
                if (data.length === 0) {
                    suggestionsBox.style.display = 'none';
                    return;
                }
                data.forEach(item => {
                    const div = document.createElement('div');
                    div.textContent = item.title;
                    div.style.padding = '5px';
                    div.style.cursor = 'pointer';
                    div.addEventListener('click', () => {
                        window.location.href = item.permalink;
                    });
                    suggestionsBox.appendChild(div);
                });
                suggestionsBox.style.display = 'block';
            });
    });

    document.addEventListener('click', function(e) {
        if (!suggestionsBox.contains(e.target) && e.target !== searchInput) {
            suggestionsBox.style.display = 'none';
        }
    });
});

Этот скрипт создает выпадающий блок с подсказками, который появляется при вводе текста, и скрывается при клике вне поля.

Регистрация и локализация скрипта в WordPress

Чтобы подключить скрипт и передать URL AJAX, добавим в functions.php:

function journalx_enqueue_scripts() {
    wp_enqueue_script('journalx-search-suggestions', get_template_directory_uri() . '/js/search-suggestions.js', ['jquery'], null, true);
    wp_localize_script('journalx-search-suggestions', 'journalx_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'journalx_enqueue_scripts');

Не забудьте добавить поле поиска с id="search-input" в вашем шаблоне:

<input type="text" id="search-input" name="s" placeholder="Поиск..." autocomplete="off" />

Оптимизация и расширение функционала автоподсказок

Если хотите, чтобы поиск учитывал категории, теги или пользовательские типы записей, просто расширьте $args в запросе WP_Query, добавив нужные параметры:

$args = [
    's' => $search_term,
    'posts_per_page' => 5,
    'post_status' => 'publish',
    'post_type' => ['post', 'page', 'product'], // например
];

Также для улучшения производительности стоит добавить кеширование результатов, например, используя Transients API.

Для UX полезно выделять жирным совпадающие части в подсказках. Это можно сделать, изменяя вывод в JavaScript с использованием регулярных выражений и HTML-разметки.

Выводы и рекомендации по внедрению автоподсказок

Автоподсказки — отличный способ улучшить поиск на сайте WordPress. Для быстрого старта используйте проверенные плагины, если нужна гибкость и уникальный дизайн — пишите собственный AJAX функционал.

Важный момент — адаптивность и скорость работы. Автоподсказки должны работать плавно на мобильных устройствах и не создавать дополнительной нагрузки на сервер.

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