Функция get_search_form() в WordPress используется для отображения формы поиска. Она автоматически подключает файл searchform.php из темы или выводит стандартную форму поиска, если такой файл отсутствует.
Оглавление:
Пример как вывести форму поиска get_search_form() в шаблоне страницы
Базовый код, который вы можете добавить к себе в шаблон страницы или записи, который подключит файл searchform.php и выведет форму поиска.
<?php get_search_form(); ?>Код будет выводить форму поиска в том случае если в корне вашей темы присутствует файл searchform.php, если такого файла нет мы можем создать собственную полноценную форму, читайте ниже.
Готовая форма поиска для WordPress
Если вы создаете тему самостоятельно, с нуля и у вас нет стандартного файла searchform.php то вы можете использовать следующий код чтобы переопределить форму поиска в рабочий готовый вариант.
<form role="search" method="get" action="<?php echo home_url( '/' ); ?>">
<label for="s" class="screen-reader-text">Поиск:</label>
<input type="text" name="s" id="s" placeholder="Введите запрос...">
<input type="submit" value="Поиск">
</form>Этот код создаст стандартную форму поиска. Вы можете разместить этот код в любом месте или шаблоне как например page.php, single.php или любом другом.
Также вы можете стилизовать с помощью CSS стилей данную форму поиска и получится что-то типо такого:
<style>
.search-form {
padding: 10px;
background-color: #f2f2f2;
text-align: center;
}
.search-form input[type="text"] {
width: 200px;
padding: 5px;
}
.search-form input[type="submit"] {
padding: 5px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.search-form input[type="submit"]:hover {
background-color: #45a049;
}
</style><form role="search" method="get" action="<?php echo home_url( '/' ); ?>" class="search-form">
<input type="text" name="s" id="s" placeholder="Введите запрос...">
<input type="submit" value="Поиск">
</form>Вы можете отделить приведенные в примере CSS стили формы поиска и вставить их в css файл вашей темы чтобы код шаблона был более структурированным.
Изменение формы поиска get_search_form() через хук:
Можно переопределить стандартную форму поиска, используя фильтр get_search_form:
function custom_search_form( $form ) {
$form = '<form role="search" method="get" action="'.home_url( '/' ).'">' .
'<input type="search" name="s" />' .
'<input type="submit" value="Поиск" />' .
'</form>';
return $form;
}
add_filter( 'get_search_form', 'custom_search_form' );Отображение разных форм поиска на разных страницах
Довольная часто сталкиваюсь с потребностью сделать разные формы поиска для разных типов страниц, поскольку логика каждой из форм будет разной и выводить необходимо разные типы постов, вы можете использовать данный пример как основу.
if ( is_page( 'blog' ) ) {
add_filter( 'get_search_form', 'blog_search_form' );
} else if ( is_page( 'products' ) ) {
add_filter( 'get_search_form', 'product_search_form' );
}В коде мы разделили вывод формы поиска отдельно для блога и отдельно для товаров.
AJAX форма поиска для WordPress
А теперь давайте сделаем свою собственную форму поиска с использованием AJAX, благодаря чему результаты поиска будут отображаться без перезагрузки страницы.
Код формы поиска Ajax
Добавьте его в свой шаблон страницы, где форма должна выводиться (на будущее оставьте место под формой поиска — там будут сразу выводиться результаты поиска)
<form id="ajax-search-form" role="search" method="get" action="<?php echo home_url( '/' ); ?>">
<input type="search" name="s" id="ajax-search-input">
<input type="submit" value="Поиск">
</form>
<div id="search-results"></div>JavaScript для обработки AJAX-запроса
Скрипт можете добавить прямо в шаблон рядом с формой поиска в таком случае добавьте теги <script> тут код, который ниже </script>
jQuery(document).ready(function($) {
$('#ajax-search-form').submit(function(event) {
event.preventDefault();
var searchValue = $('#ajax-search-input').val();
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'ajax_search', keyword: searchValue },
success: function(result) {
$('#search-results').html(result);
}
});
});
});Или подключите данный скрипт в отдельный файл с расширением .js
PHP-обработчик для AJAX-запроса
Теперь напишем код для обработки нашего запроса, чтобы результаты поиска появлялись на странице без перезагрузки. Код нужно добавить в файл function.php вашей темы.
add_action( 'wp_ajax_nopriv_ajax_search', 'ajax_search' );
add_action( 'wp_ajax_ajax_search', 'ajax_search' );
function ajax_search() {
$keyword = $_POST['keyword'];
$query = new WP_Query( array( 's' => $keyword ) );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
echo '<div><a href="' . get_permalink() . '">' . get_the_title() . '</a></div>';
}
} else {
echo 'Ничего не найдено.';
}
wp_die();
}Этот пример демонстрирует базовую реализацию AJAX поиска, где пользовательский ввод обрабатывается асинхронно, и результаты отображаются без перезагрузки страницы. Вы можете его модернизировать или взять за основу чтобы протестировать wordpress поиска на ajax.
Финалочка
get_search_form() довольно гибкое и универсальное решение для создания индивидуальных форм поиска на сайте WordPress. С помощью простых изменений можно адаптировать форму поиска под любые потребности и дизайн.
Для отправки комментария вам необходимо авторизоваться.