Как добавить автоподсказки в поиск WordPress: практическое руководство с примерами

Автор: Светлана Николаева | Опубликовано: 08.03.2026

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

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

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

Быстро находить релевантные записи ещё во время ввода запроса.
Уменьшить количество ошибок в запросах за счёт предложений.
Повысить конверсию за счёт удобства и скорости.

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

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

Самый простой способ — использовать готовые плагины. Рассмотрим несколько популярных решений, которые легко интегрируются и настраиваются.

1. Ivory Search

Ivory Search — мощный плагин с поддержкой автозаполнения и подсказок. Он позволяет создавать кастомные поисковые формы с расширенными настройками.

Для активации автоподсказок нужно в настройках плагина включить опцию Enable Live Search. Плагин автоматически подгружает результаты с помощью AJAX.

Ссылка на плагин: Ivory Search на WPShop.ru

2. Ajax Search Lite

Ajax Search Lite — один из самых популярных бесплатных плагинов для живого поиска. Он добавляет автоподсказки с предварительным просмотром постов, картинок и категорий.

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

Ссылка на плагин: Ajax Search Lite на WPShop.ru

3. WPSearch Autocomplete (пример с WPShop)

Если вы используете WPShop, обратите внимание на их собственный модуль автоподсказок в поиске, который оптимизирован под их темы и плагины. Он быстро настраивается и хорошо интегрируется.

Реализация автоподсказок в WordPress своими силами

Если вы хотите более гибкое и лёгкое решение без лишних плагинов, можно добавить автоподсказки с помощью AJAX и собственного кода. Ниже пошаговый пример.

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

Добавим обработчик AJAX, который будет возвращать подходящие посты по запросу.

add_action('wp_ajax_wpbox_get_search_suggestions', 'wpbox_get_search_suggestions');
add_action('wp_ajax_nopriv_wpbox_get_search_suggestions', 'wpbox_get_search_suggestions');

function wpbox_get_search_suggestions() {
    $term = isset($_GET['term']) ? sanitize_text_field($_GET['term']) : '';
    if (empty($term)) {
        wp_send_json([]);
    }

    $args = [
        's' => $term,
        'post_status' => 'publish',
        'posts_per_page' => 5,
        'fields' => 'ids',
    ];

    $query = new WP_Query($args);
    $suggestions = [];

    foreach ($query->posts as $post_id) {
        $suggestions[] = get_the_title($post_id);
    }

    wp_send_json($suggestions);
}

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

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

jQuery(document).ready(function($) {
    var $input = $('#searchform input[name="s"]');
    var $suggestionsBox = $('<ul id="wpbox-suggestions" style="border:1px solid #ccc;position:absolute;background:#fff;z-index:9999;max-width:300px;padding:0;margin:0;list-style:none;"></ul>');
    $input.after($suggestionsBox);

    $input.on('input', function() {
        var term = $(this).val();
        if (term.length < 2) {
            $suggestionsBox.empty().hide();
            return;
        }

        $.ajax({
            url: wpbox_ajax_obj.ajax_url,
            data: {
                action: 'wpbox_get_search_suggestions',
                term: term,
            },
            success: function(data) {
                $suggestionsBox.empty();
                if (data.length) {
                    $.each(data, function(i, val) {
                        var $item = $('<li style="padding:5px;cursor:pointer;"></li>').text(val);
                        $item.on('click', function() {
                            $input.val(val);
                            $suggestionsBox.empty().hide();
                            $input.closest('form').submit();
                        });
                        $suggestionsBox.append($item);
                    });
                    $suggestionsBox.show();
                } else {
                    $suggestionsBox.hide();
                }
            }
        });
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('#wpbox-suggestions, #searchform input[name="s"]').length) {
            $suggestionsBox.empty().hide();
        }
    });
});

Подключение скриптов и локализация AJAX URL

Подключите этот скрипт в functions.php вашей темы или в плагине, не забудьте локализовать AJAX URL:

function wpbox_enqueue_search_scripts() {
    wp_enqueue_script('wpbox-search-autocomplete', get_template_directory_uri() . '/js/wpbox-search-autocomplete.js', ['jquery'], '1.0', true);
    wp_localize_script('wpbox-search-autocomplete', 'wpbox_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpbox_enqueue_search_scripts');

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

Добавление ссылок и миниатюр

Вместо простых названий можно возвращать массивы с заголовками, URL и миниатюрами, чтобы сделать подсказки более информативными. Например:

foreach ($query->posts as $post_id) {
    $suggestions[] = [
        'title' => get_the_title($post_id),
        'url' => get_permalink($post_id),
        'thumb' => get_the_post_thumbnail_url($post_id, 'thumbnail'),
    ];
}

В JavaScript тогда формируйте HTML с картинками и ссылками.

Поддержка кастомных типов записей и таксономий

В запросе WP_Query можно добавить параметр post_type для поиска не только по стандартным постам, но и по товарам, портфолио или другим типам, если они у вас есть.

Это позволит адаптировать подсказки под конкретные задачи сайта.

Использование кеширования для повышения производительности

Чтобы снизить нагрузку на сервер, результаты можно кешировать с помощью Transients API или внешних кеш-систем. Например, сохранять результаты поиска по конкретной строке на несколько минут.

function wpbox_get_search_suggestions() {
    $term = isset($_GET['term']) ? sanitize_text_field($_GET['term']) : '';
    if (empty($term)) {
        wp_send_json([]);
    }

    $cache_key = 'wpbox_search_suggestions_' . md5($term);
    $cached = get_transient($cache_key);
    if ($cached !== false) {
        wp_send_json($cached);
    }

    $args = [
        's' => $term,
        'post_status' => 'publish',
        'posts_per_page' => 5,
        'fields' => 'ids',
    ];

    $query = new WP_Query($args);
    $suggestions = [];

    foreach ($query->posts as $post_id) {
        $suggestions[] = get_the_title($post_id);
    }

    set_transient($cache_key, $suggestions, 10 * MINUTE_IN_SECONDS);
    wp_send_json($suggestions);
}

Заключение

Добавление автоподсказок в поиск WordPress значительно улучшает взаимодействие пользователей с сайтом. Для быстрого старта можно использовать плагины Ivory Search или Ajax Search Lite. Если нужно полное управление и лёгкость — лучший вариант написать свой AJAX обработчик, как показано в примерах.

Не забывайте оптимизировать запросы и кешировать результаты для быстрой работы даже на больших сайтах. Адаптируйте подсказки под свои типы записей и используйте миниатюры и ссылки для удобства.