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

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

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

По умолчанию поиск WordPress прост и не предоставляет подсказок. Это может замедлить поиск информации и снизить удобство для пользователей. Автоподсказки помогают:

• Уменьшить количество вводимых символов;
• Сократить время поиска;
• Предлагать релевантные варианты запросов;
• Повысить вовлечённость и конверсию.

Реализовать такую функциональность можно несколькими способами: через кастомный код или сторонние плагины. Рассмотрим оба варианта.

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

Шаг 1. Создаём AJAX обработчик на стороне сервера

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

add_action('wp_ajax_wpbox_search_autocomplete', 'wpbox_search_autocomplete_callback');
add_action('wp_ajax_nopriv_wpbox_search_autocomplete', 'wpbox_search_autocomplete_callback');

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

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

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

    if ($query->have_posts()) {
        foreach ($query->posts as $post_id) {
            $results[] = [
                'id' => $post_id,
                'value' => get_the_title($post_id),
                'permalink' => get_permalink($post_id),
            ];
        }
    }

    wp_send_json($results);
}

Шаг 2. Добавляем JavaScript для вызова AJAX и отображения подсказок

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

function wpbox_enqueue_autocomplete_script() {
    wp_enqueue_script('jquery-ui-autocomplete');
    wp_enqueue_script('wpbox-autocomplete', get_template_directory_uri() . '/js/wpbox-autocomplete.js', ['jquery', 'jquery-ui-autocomplete'], null, true);
    wp_localize_script('wpbox-autocomplete', 'wpbox_ajax_object', ['ajax_url' => admin_url('admin-ajax.php')]);
}
add_action('wp_enqueue_scripts', 'wpbox_enqueue_autocomplete_script');

Создайте файл wpbox-autocomplete.js в папке js вашей темы с таким содержимым:

jQuery(document).ready(function($) {
    $('#searchform input[name="s"]').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: wpbox_ajax_object.ajax_url,
                dataType: 'json',
                data: {
                    action: 'wpbox_search_autocomplete',
                    term: request.term
                },
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item.value,
                            value: item.value,
                            url: item.permalink
                        };
                    }));
                }
            });
        },
        select: function(event, ui) {
            window.location.href = ui.item.url;
        },
        minLength: 2
    });
});

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

Relevanssi – расширенный поиск с подсказками

Relevanssi – популярный плагин, который заменяет стандартный поиск на более мощный, включая поддержку автодополнения. Чтобы включить автоподсказки, можно использовать дополнительные расширения или реализовать собственный JavaScript поверх Relevanssi.

Преимущества:

• Индексирование контента, включая кастомные поля;
• Настройка весов для релевантности;
• Поддержка поиска по фразам и синонимам.

Ajax Search Lite

Этот плагин изначально создан для реализации живого поиска с автоподсказками. Ajax Search Lite легко настраивается, поддерживает фильтрацию по типам записей и таксономиям.

Преимущества:

• Простая установка и настройка;
• Красивый дизайн подсказок;
• Поддержка мультиязычности.

Оптимизация и особенности внедрения автоподсказок

Кэширование результатов поиска

Частые AJAX-запросы могут нагрузить сервер, особенно при большом трафике. Для оптимизации стоит реализовать кэширование результатов в transient API WordPress или использовать сторонние кэш-системы.

Минимальная длина запроса и задержка

Рекомендуется запускать запрос только после ввода 2–3 символов и с небольшой задержкой (~300 мс), чтобы избежать лишних запросов при быстром наборе текста.

Безопасность и фильтрация данных

Не забывайте использовать функции sanitize_text_field и wp_unslash для очистки входящих данных, а также проверять права доступа при необходимости.

Заключение

Автоподсказки в поиске WordPress – простой, но мощный инструмент для улучшения юзабилити сайта. Вы можете реализовать их самостоятельно с помощью AJAX и REST API, либо воспользоваться готовыми решениями, такими как Ajax Search Lite или Relevanssi.

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