Поиск по меткам (тегам) в WordPress помогает пользователям быстро находить контент по интересующим темам. Однако стандартная форма поиска не поддерживает удобное автозаполнение, что снижает удобство и скорость поиска. В этой статье рассмотрим, как создать собственную автозаполняемую форму поиска по меткам с помощью кастомного кода и популярных плагинов, а также интегрировать её в ваш сайт.
Почему важно реализовать автозаполнение в поиске по меткам WordPress
По умолчанию WordPress не предлагает удобного механизма для поиска по меткам с подсказками. Пользователь вводит текст, но не видит, какие метки существуют, и может ошибиться в написании, что приведёт к пустым результатам. Автозаполнение позволяет:
- Уменьшить количество ошибок при вводе
- Повысить скорость поиска за счёт подсказок
- Улучшить UX и удержать посетителя на сайте
- Сделать поиск более точным и релевантным
Реализовать такой функционал можно как с помощью плагинов, так и через собственные решения на PHP и JavaScript.
Реализация автозаполняемой формы поиска по меткам: пример с AJAX и jQuery
Для начала создадим кастомное текстовое поле с автозаполнением, которое будет подгружать список меток из базы по мере ввода. Для этого используем AJAX, а также REST API WordPress для получения меток.
1. Создание REST API эндпоинта для получения меток
Добавим в functions.php вашей темы или в отдельный плагин следующий код:
add_action('rest_api_init', function () {
register_rest_route('wpfinder/v1', '/tags', array(
'methods' => 'GET',
'callback' => 'wpfinder_get_tags_autocomplete',
'permission_callback' => '__return_true',
));
});
function wpfinder_get_tags_autocomplete(<?php $request) {
$search = $request->get_param('term');
if (empty($search)) {
return [];
}
$tags = get_terms([
'taxonomy' => 'post_tag',
'hide_empty' => false,
'search' => sanitize_text_field($search),
'number' => 10
]);
$results = [];
foreach ($tags as $tag) {
$results[] = ['id' => $tag->term_id, 'text' => $tag->name];
}
return $results;
}Этот код регистрирует REST маршрут /wp-json/wpfinder/v1/tags?term=ваш_запрос, который возвращает до 10 меток, совпадающих с поисковым словом.
2. Добавление HTML формы поиска
В нужном месте темы добавьте HTML код формы с инпутом:
<form method="get" action="<?php echo esc_url(home_url('/')); ?>" id="wpfinder-tag-search">
<input type="text" name="tag" id="wpfinder-tag-input" placeholder="Введите метку..." autocomplete="off" />
<button type="submit">Поиск</button>
</form>3. Подключение jQuery UI Autocomplete для автозаполнения
WordPress уже включает jQuery, добавим jQuery UI Autocomplete и подключим скрипт:
function wpfinder_enqueue_scripts() {
wp_enqueue_script('jquery-ui-autocomplete');
wp_enqueue_style('jquery-ui-css', 'https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css');
wp_enqueue_script('wpfinder-tag-autocomplete', get_stylesheet_directory_uri() . '/js/tag-autocomplete.js', ['jquery', 'jquery-ui-autocomplete'], null, true);
}
add_action('wp_enqueue_scripts', 'wpfinder_enqueue_scripts');Создайте файл tag-autocomplete.js в папке вашей темы /js/ с таким содержимым:
jQuery(document).ready(function($) {
$('#wpfinder-tag-input').autocomplete({
source: function(request, response) {
$.ajax({
url: '/wp-json/wpfinder/v1/tags',
data: { term: request.term },
success: function(data) {
response($.map(data, function(item) {
return {
label: item.text,
value: item.text
};
}));
}
});
},
minLength: 2,
delay: 300
});
});Этот скрипт связывает поле ввода с нашим REST API, подгружая подсказки при вводе минимум 2 символов.
Обработка результатов поиска по меткам в WordPress
Когда пользователь отправляет форму с параметром tag, WordPress должен отобразить записи с этой меткой. Для этого можно использовать стандартный архив таксономии post_tag, например, перейти по URL /tag/метка/.
Если нужно сделать переадресацию формы на нужную страницу, добавьте JavaScript обработчик, который перенаправляет на URL архива меток:
jQuery(document).ready(function($) {
$('#wpfinder-tag-search').on('submit', function(e) {
e.preventDefault();
var tag = $('#wpfinder-tag-input').val().trim();
if(tag) {
var url = '/tag/' + encodeURIComponent(tag) + '/';
window.location.href = url;
}
});
});Это позволит пользователю сразу перейти к стандартной странице с постами, помеченными выбранной меткой.
Использование плагина для автозаполнения по меткам
Если вы предпочитаете готовые решения, рекомендуем плагин Autocomplete Plugins — однако они часто универсальные и не всегда идеально подходят для поиска именно по меткам.
Для более гибкой настройки можно рассмотреть плагин Expert Review от WPSHOP, который позволяет создавать формы с расширенной логикой, в том числе автозаполнение и фильтрацию по таксономиям.
Практические советы и улучшения
Кэширование результатов запроса
Так как REST API запросы к меткам могут быть частыми, разумно добавить кэширование с помощью Transients API:
function wpfinder_get_tags_autocomplete($request) {
$search = sanitize_text_field($request->get_param('term'));
if (empty($search)) {
return [];
}
$cache_key = 'wpfinder_tags_' . md5($search);
$cached = get_transient($cache_key);
if ($cached !== false) {
return $cached;
}
$tags = get_terms([
'taxonomy' => 'post_tag',
'hide_empty' => false,
'search' => $search,
'number' => 10
]);
$results = [];
foreach ($tags as $tag) {
$results[] = ['id' => $tag->term_id, 'text' => $tag->name];
}
set_transient($cache_key, $results, HOUR_IN_SECONDS);
return $results;
}Поддержка нескольких меток и расширенная фильтрация
Для расширения функционала можно позволить пользователю вводить несколько меток через запятую и искать посты, которые имеют все указанные метки. Для этого потребуется более сложная логика обработки в PHP и изменение URL запроса.
Интеграция с WP Community или JournalX
Если ваш сайт использует темы JournalX или WPCommunity, автозаполнение по меткам можно встроить в стандартные компоненты поиска этих тем, обеспечивая единый стиль и удобство для пользователей.
Вывод
Автозаполняемая форма поиска по меткам — это эффективный инструмент повышения удобства пользователя и качества навигации по сайту на WordPress. С помощью REST API и jQuery UI Autocomplete вы можете реализовать её быстро и гибко, а использование кэширования и готовых плагинов позволит расширить возможности без потери производительности. Используйте представленные примеры кода и рекомендации для улучшения своего сайта.