Коротко: поиск по сайту делают из формы с полем input и кнопкой. В HTML-версии фильтрацию выполняет JavaScript, в WordPress достаточно вывести форму поиска функцией get_search_form() и настроить страницу результатов.
Из чего состоит поиск
| Часть | Задача |
|---|---|
| Поле ввода | принять запрос |
| Кнопка | запустить поиск |
| Скрипт или сервер | обработать запрос |
| Вывод результатов | показать найденное |
Разметка и стили
<form class="search" role="search">
<input type="search" placeholder="Поиск">
<button type="submit">Найти</button>
</form>
.search { display: flex; gap: 8px; }
.search input {
flex: 1; padding: 10px 14px;
border: 1px solid #ccc; border-radius: 8px;
}Тип search даёт удобства: в браузере появляется кнопка очистки, а на мобильных — подходящая клавиатура.
Вкладки: реализация
const q = field.value.toLowerCase();
items.forEach(i =>
i.hidden = !i.textContent.toLowerCase().includes(q));Простой фильтр по списку: подходит для небольших списков на странице. Он не ищет по всему сайту, а только по видимым элементам.
php
<?php get_search_form(); ?>В WordPress форма выводится одной функцией. Результаты показываются на шаблоне search.php, поиск работает по записям и страницам.
field.addEventListener('input', debounce(search, 300));Живой поиск подсказывает результаты по мере ввода. Обязательно с задержкой — иначе запросы уходят на каждый символ и нагружают сервер.
Практика: сделать поиск
- Определите, где будет поле поиска.
- Добавьте форму с полем и кнопкой.
- Оформите её в стиле сайта.
- Для WordPress выведите форму функцией.
- Настройте страницу результатов.
- Проверьте поиск по разным запросам и на мобильном.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Форма ничего не делает | нет обработчика | добавить адрес или скрипт |
| Результаты пустые | неверный запрос/шаблон | проверить обработку |
| Поиск находит не всё | фильтр только по DOM | серверный поиск |
| Много запросов | нет задержки | добавить debounce |
| Поле мелкое на телефоне | маленький шрифт | минимум 16px |
Проверьте себя
Вопросы и ответы
Только по данным, которые уже есть на странице, — через JavaScript. Настоящий поиск по всему сайту требует серверной обработки или готового плагина.
Задержка перед отправкой запроса: она не даёт запускать поиск на каждое нажатие клавиши. Так снижается нагрузка и результат приходит стабильнее.
Проверьте, есть ли материалы с такими словами, корректно ли передаётся запрос и настроен ли вывод результатов. В WordPress помогает проверка шаблона search.php.
Да. В WordPress есть встроенный поиск и плагины с расширенными функциями: живые подсказки, поиск по товарам, поиск по полям. Для сложного каталога это удобнее самодельного решения.
Итоги
- Поиск строится из формы, обработчика и вывода результатов.
- Поле типа
searchудобнее обычного текстового. - В WordPress есть готовая функция
get_search_form(). - Живой поиск всегда делают с задержкой.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.