Главная/WordPress Fullstack/Блупринты/Кастомные темы/Поиск по сайту в реальном времени (Live Search) с автодополнением и дебаунсом
К карточкам раздела «Кастомные темы»
Кастомные темы(ТЗ 23 из 54)
ТЗ: Поиск по сайту в реальном времени (Live Search) с автодополнением и дебаунсом
Кастомные темы5 шагов • +25 XP

ТЗ: Поиск по сайту в реальном времени (Live Search) с автодополнением и дебаунсом

Разработка полноэкранного поискового оверлея: кастомный WP REST API эндпоинт, выборка записей и CPT через WP_Query, клиентский дебаунс (300ms), отмена устаревших запросов через AbortController и a11y-навигация стрелками.

~7 ч работыУровень: JuniorPHP 8.3/8.4WP REST APIWP_Query (s parameter)Vanilla JS Fetch APIAbortControllerDebounce patternARIA Live Regions
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~7 рабочих часов
Фриланс вилка~$315 – $525 (€280 – €490)
Оценка веб-студии~$665 – $1,120 (€630 – €1050)

ТЗ заказчика (исходный бриф):

«Посетители жалуются на медленный поиск с постоянной перезагрузкой страницы. Нужен современный живой поиск в шапке сайта: пользователь вводит от 3 символов — прямо под строкой поиска мгновенно всплывает список релевантных статей и кейсов с миниатюрами, ценами/датами и подсветкой искомой фразы.»
Ключевые требования:
  • •Поиск по статьям блога, кастомным проектам и статическим страницам
  • •Мгновенная выдача результатов без перезагрузки при вводе от 3 символов
  • •Подсветка совпадений искомого слова в заголовках и кратком описании
  • •Отображение миниатюр постов и бейджей рубрик в результатах
  • •Навигация по списку результатов стрелками вверх/вниз и открытие по Enter
Ограничения проекта:
  • •Запрет на тяжелые плагины поиска (Relevanssi, SearchWP, Ajax Search Pro)
  • •Защита сервера от DDoS-запросов (лимит 8 результатов, дебаунс 300мс)
  • •Работа без jQuery на нативном Fetch API
Критерии приёмки (KPI):
  • Время ответа эндпоинта поиска < 80 мс
  • Отсутствие Race Condition при быстром наборе текста
  • Поддержка мобильных устройств и закрытие оверлея по клику на фон или Escape

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Регистрация REST API эндпоинта /theme/v1/search

~35 минЛегкий

Практическое руководство:

В functions.php зарегистрируйте эндпоинт wp-json/theme/v1/search на хуке rest_api_init. Добавьте валидацию минимальной длины поисковой строки (3 символа).

План и контрольные точки реализации:
1Зарегистрировать роут /theme/v1/search
2Добавить валидацию минимальной длины term >= 3
3Санитизировать входящую строку через sanitize_text_field
Важные технические нюансы и подводные камни:

Всегда используйте параметр permission_callback => "__return_true" для публичного эндпоинта и санитизируйте поисковую строку через sanitize_text_field().

Ожидаемый артефакт этапа:

REST API эндпоинт для поиска с валидацией входных данных.

PHP
<?php
// inc/live-search-endpoint.php
declare(strict_types=1);

add_action('rest_api_init', function (): void {
    register_rest_route('theme/v1', '/search', [
        'methods'             => WP_REST_Server::READABLE,
        'permission_callback' => '__return_true',
        'args'                => [
            'term' => [
                'required'          => true,
                'type'              => 'string',
                'sanitize_callback' => 'sanitize_text_field',
                'validate_callback' => fn($val) => mb_strlen(trim((string) $val)) >= 3,
            ],
        ],
        'callback'            => 'theme_handle_live_search',
    ]);
});
2
Этап 2 из 5

Высокопроизводительный WP_Query с выборкой данных

~35 минСредний
3
Этап 3 из 5

Вёрстка поля поиска и контейнера результатов с ARIA

~30 минЛегкий
4
Этап 4 из 5

Клиентский JavaScript: Debounce и AbortController

~40 минСредний
5
Этап 5 из 5

Клавиатурная навигация и тестирование оверлея

~25 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами