Хук get_search_form в WordPress позволяет кастомизировать HTML-код формы поиска. Он особенно полезен, если требуется добавить нестандартные стили, дополнительные элементы или изменить верстку формы. Этот фильтр настраивает код, возвращаемый функцией get_search_form().
apply_filters( ‘get_search_form’, string $form, array $args )Хук get_search_form обрабатывает HTML-код формы поиска и позволяет изменить его до вывода на странице. Вы можете модифицировать как структуру формы, так и добавить дополнительные элементы или текст перед и после формы.
Параметры
Хук get_search_form принимает два параметра:
$form(строка): HTML-код формы поиска.$args(массив): Аргументы для построения формы поиска. Эти аргументы передаются в функциюget_search_form().
Пример 1: Добавление HTML-кода до и после формы поиска
Этот пример добавляет блоки с текстом перед и после формы поиска.
function add_content_around_search_form($form) {
$before_form = '<div class="custom-before">Начало поиска:</div>';
$after_form = '<div class="custom-after">Спасибо за использование поиска!</div>';
return $before_form . $form . $after_form;
}
add_filter('get_search_form', 'add_content_around_search_form');
Здесь перед формой поиска добавляется текст «Начало поиска:», а после формы — «Спасибо за использование поиска!».
Пример 2: Изменение плейсхолдера и кнопки отправки
В этом примере изменяются текст плейсхолдера и кнопки отправки формы поиска.
function custom_search_form_placeholder($form) {
$form = '<form role="search" method="get" class="search-form" action="' . esc_url(home_url('/')) . '">
<label>
<span class="screen-reader-text">Поиск по сайту:</span>
<input type="search" class="search-field" placeholder="Ищите здесь..." value="' . get_search_query() . '" name="s" />
</label>
<button type="submit" class="search-submit">Найти</button>
</form>';
return $form;
}
add_filter('get_search_form', 'custom_search_form_placeholder');
Здесь плейсхолдер установлен как «Ищите здесь…», а текст на кнопке изменен на «Найти».
Пример 3: Добавление скрытого поля для отслеживания источника поиска
Этот пример добавляет скрытое поле, которое может использоваться для отслеживания источника поиска.
function search_form_with_hidden_field($form) {
$form = '<form role="search" method="get" class="search-form" action="' . esc_url(home_url('/')) . '">
<label>
<span class="screen-reader-text">Поиск:</span>
<input type="search" class="search-field" placeholder="Что вы ищете?" value="' . get_search_query() . '" name="s" />
</label>
<input type="hidden" name="ref" value="homepage" />
<button type="submit" class="search-submit">Поиск</button>
</form>';
return $form;
}
add_filter('get_search_form', 'search_form_with_hidden_field');
В этом примере добавлено скрытое поле <input type="hidden" name="ref" value="homepage" />, которое фиксирует источник поиска.
Пример 4: Удаление атрибута placeholder в поле поиска
Этот пример убирает атрибут placeholder из формы, если требуется минималистичный вид.
function remove_placeholder_from_search($form) {
$form = '<form role="search" method="get" class="search-form" action="' . esc_url(home_url('/')) . '">
<label>
<span class="screen-reader-text">Поиск:</span>
<input type="search" class="search-field" value="' . get_search_query() . '" name="s" />
</label>
<button type="submit" class="search-submit">Искать</button>
</form>';
return $form;
}
add_filter('get_search_form', 'remove_placeholder_from_search');
В данном примере отсутствует атрибут placeholder, и форма остается простой.
Пример 5: Кастомизация формы поиска с условием для мобильных устройств
В этом примере добавляется условие для изменения формы поиска на мобильных устройствах, например, добавляется класс для стилизации.
function responsive_search_form($form) {
$form = '<form role="search" method="get" class="search-form ' . (wp_is_mobile() ? 'mobile-search' : '') . '" action="' . esc_url(home_url('/')) . '">
<label>
<span class="screen-reader-text">Поиск по сайту:</span>
<input type="search" class="search-field" placeholder="Введите запрос..." value="' . get_search_query() . '" name="s" />
</label>
<button type="submit" class="search-submit">Искать</button>
</form>';
return $form;
}
add_filter('get_search_form', 'responsive_search_form');
В этом коде добавляется класс mobile-search, если запрос происходит с мобильного устройства, что позволяет добавить стили для мобильных версий формы.
Заключение
Хук get_search_form в WordPress позволяет гибко управлять HTML-кодом формы поиска. С его помощью можно легко добавить текст, изменить плейсхолдер и стили, а также добавить скрытые поля для отслеживания данных.