Как сделать автоподсказку в WordPress для поиска

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

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

Когда пользователь начинает вводить запрос, автоподсказка помогает:

• Сократить время на ввод запроса;
• Предложить популярные или релевантные варианты;
• Уменьшить вероятность ошибок при вводе;
• Повысить конверсию и удобство использования сайта.

Для сайтов на WordPress с большим количеством контента это особенно актуально.

Реализация автоподсказки без плагинов с помощью AJAX и REST API

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

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

function wordpresses_autocomplete_scripts() {
    wp_enqueue_script('jquery-ui-autocomplete');
    wp_enqueue_script('wordpresses-autocomplete', get_template_directory_uri() . '/js/autocomplete.js', ['jquery', 'jquery-ui-autocomplete'], null, true);
    wp_localize_script('wordpresses-autocomplete', 'wordpresses_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wordpresses_autocomplete_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wordpresses_autocomplete_scripts');

В этом коде мы подключаем jQuery UI Autocomplete и наш скрипт, а также передаём параметры для AJAX.

JavaScript для автоподсказки (autocomplete.js)

jQuery(document).ready(function($) {
    $('#searchform input[name="s"]').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: wordpresses_ajax_object.ajax_url,
                method: 'POST',
                dataType: 'json',
                data: {
                    action: 'wordpresses_autocomplete_search',
                    nonce: wordpresses_ajax_object.nonce,
                    term: request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        minLength: 2
    });
});

Здесь мы используем jQuery UI Autocomplete для поля поиска с именем s, отправляя запрос на сервер с введённым текстом.

Обработка AJAX-запроса на сервере

Добавим PHP-функцию, которая будет обрабатывать AJAX-запрос и возвращать список совпадений по заголовкам записей.

function wordpresses_handle_autocomplete() {
    check_ajax_referer('wordpresses_autocomplete_nonce', 'nonce');

    $term = isset($_POST['term']) ? sanitize_text_field(wp_unslash($_POST['term'])) : '';
    if (strlen($term) < 2) {
        wp_send_json([]);
        wp_die();
    }

    $args = [
        's' => $term,
        'post_type' => 'post',
        'posts_per_page' => 10,
        'post_status' => 'publish'
    ];
    $query = new WP_Query($args);
    $results = [];

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $results[] = get_the_title();
        }
        wp_reset_postdata();
    }

    wp_send_json($results);
    wp_die();
}
add_action('wp_ajax_wordpresses_autocomplete_search', 'wordpresses_handle_autocomplete');
add_action('wp_ajax_nopriv_wordpresses_autocomplete_search', 'wordpresses_handle_autocomplete');

Функция ищет записи по введённому термину и возвращает массив заголовков, которые показываются в автоподсказке.

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

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

1. SearchWP Live Ajax Search

Плагин SearchWP расширяет возможности стандартного поиска и поддерживает автоподсказки с отображением сниппетов и миниатюр. Имеет гибкие настройки и интеграцию с большинством тем.

2. Ajax Search Lite

Бесплатный и простой в использовании плагин, который добавляет AJAX-поиск с автоподсказками и фильтрацией по категориям. Хорошо подходит для небольших и средних сайтов.

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

Если вы используете продукты WPSHOP, обратите внимание на плагин WPSearch Autocomplete. Он интегрируется с WooCommerce и другими плагинами, поддерживает подсветку совпадений и удобный интерфейс.

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

Оптимизация скорости запросов

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

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

Если на сайте используются собственные типы записей (Custom Post Types), добавьте их в параметры запроса, чтобы автоподсказка включала их:

$args = [
    's' => $term,
    'post_type' => ['post', 'product', 'news'],
    'posts_per_page' => 10,
    'post_status' => 'publish'
];

Это расширит поиск и сделает подсказки более релевантными.

Использование фильтров и хуков для гибкости

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

function wordpresses_filter_autocomplete_results($results) {
    // Добавляем префикс к каждому результату
    foreach ($results as &$result) {
        $result = '🔍 ' . $result;
    }
    return $results;
}
add_filter('wordpresses_autocomplete_filter_results', 'wordpresses_filter_autocomplete_results');

В обработчике AJAX потом примените этот фильтр к массиву результатов перед wp_send_json().

Выводы

Добавление автоподсказки в поиск WordPress — отличный способ улучшить навигацию и увеличить вовлечённость пользователей. Самостоятельная реализация через AJAX и REST API позволяет гибко настраивать функционал, а готовые плагины ускоряют внедрение. Важно учитывать специфику вашего сайта, объём данных и цели поиска при выборе подхода.

Подробнее о плагинах и инструментах для улучшения поиска можно узнать на WPSHOP.