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

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

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

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

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

Реализовать автоподсказку можно с помощью плагинов, но если вы хотите кастомное решение, то ниже подробно разберём пример с использованием AJAX запросов и REST API WordPress.

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

Среди популярных плагинов для автодополнения поиска можно выделить:

• Ajax Search Lite — бесплатный плагин с множеством настроек и красивым интерфейсом автоподсказок.
• SearchWP Live Ajax Search — расширение для популярного SearchWP, добавляет живой поиск с подсказками.
• WPSOLR — мощный поисковый плагин с поддержкой автодополнения и интеграцией с Solr, Elasticsearch.

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

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

Создание собственного автодополнения для поиска WordPress с AJAX и REST API

Шаг 1. Регистрация REST API маршрута

Для начала создадим REST API endpoint, который будет возвращать результаты поиска по запросу пользователя. Добавьте следующий код в functions.php вашей темы или в отдельный плагин:

add_action('rest_api_init', function () {  register_rest_route('wp-pro/v1', '/search/', array(    'methods' => 'GET',    'callback' => 'wp_pro_ajax_search_callback',    'permission_callback' => '__return_true',  ));});

function wp_pro_ajax_search_callback(WP_REST_Request $request) {  $search_term = sanitize_text_field($request->get_param('q'));
  if (empty($search_term)) {    return [];  }

  $args = array(    's' => $search_term,    'post_status' => 'publish',    'posts_per_page' => 5,    'post_type' => array('post', 'page'),  );

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

  if ($query->have_posts()) {    while ($query->have_posts()) {      $query->the_post();
      $results[] = array(        'title' => get_the_title(),        'permalink' => get_permalink(),      );    }    wp_reset_postdata();  }

  return $results;}

Этот маршрут принимает параметр q и возвращает до 5 постов и страниц, заголовок и ссылку на которые совпадают с запросом.

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

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

document.addEventListener('DOMContentLoaded', function () {  const searchInput = document.querySelector('#searchform input[name=s]');  if (!searchInput) return;

  const resultsContainer = document.createElement('div');  resultsContainer.style.position = 'absolute';  resultsContainer.style.background = '#fff';  resultsContainer.style.border = '1px solid #ccc';  resultsContainer.style.width = searchInput.offsetWidth + 'px';  resultsContainer.style.zIndex = 1000;  resultsContainer.style.maxHeight = '200px';  resultsContainer.style.overflowY = 'auto';  resultsContainer.style.display = 'none';

  searchInput.parentNode.appendChild(resultsContainer);

  let timeout = null;

  searchInput.addEventListener('input', function () {    clearTimeout(timeout);
    const query = this.value.trim();
    if (query.length < 2) {      resultsContainer.style.display = 'none';      return;    }

    timeout = setTimeout(() => {      fetch(`/wp-json/wp-pro/v1/search/?q=${encodeURIComponent(query)}`)        .then(response => response.json())        .then(data => {          resultsContainer.innerHTML = '';
          if (data.length === 0) {            resultsContainer.style.display = 'none';            return;          }

          data.forEach(item => {            const div = document.createElement('div');            div.style.padding = '5px 10px';            div.style.cursor = 'pointer';            div.textContent = item.title;
            div.addEventListener('click', () => {              window.location.href = item.permalink;            });
            resultsContainer.appendChild(div);          });

          resultsContainer.style.display = 'block';        })        .catch(() => {          resultsContainer.style.display = 'none';        });    }, 300);  });

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

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

Шаг 3. Стилизация и доработка

Для лучшего UI можно добавить CSS стили для подсказок, например, выделять элемент при наведении:

.search-suggestions div:hover {  background-color: #f0f0f0;}

Также можно расширить функционал, добавив подсказки по пользовательским типам записей, тегам, категориям или метаполям.

Использование плагина WPGPT для улучшения поиска

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

Плагин легко интегрируется с REST API и может работать совместно с вашим собственным AJAX решением, расширяя возможности стандартного поиска WordPress.

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

Автоподсказка — важная функция для улучшения UX на сайте. В зависимости от бюджета и требований можно:

• Использовать готовые решения, например Ajax Search Lite, для быстрого старта.
• Написать собственный AJAX скрипт с REST API, чтобы тонко настроить логику и внешний вид.
• Применять продвинутые плагины, такие как WPGPT, для интеллектуального поиска с ИИ.

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

Этот подход позволит сделать поиск на вашем сайте удобным, быстрым и эффективным.