Вопрос или проблема
Как я могу сделать форму поиска в теме WordPress и связать ее со страницей search.php, которая будет отображать результаты на этой странице? У меня есть форма поиска, которая выглядит так:
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( "https://wordpress.stackexchange.com/" ) ); ?>">
<div class="input-group search-block">
<span class="screen-reader-text">Поиск:</span>
<input type="search" class="search-field form-control" placeholder="<?php esc_attr_e( 'Поиск …', 'shape' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Поиск:" />
<div class="input-group-btn">
<input type="submit" class="search-submit btn btn-default" value="<?php esc_attr_e( 'Поиск', 'shape' ); ?>" />
</div>
</div>
</form>
и search.php, который выглядит так
<?php
/**
* Шаблон для отображения страниц результатов поиска.
*
* @package Shape
* @since Shape 1.0
*/
get_header(); ?>
<section id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<h1 class="page-title"><?php printf( __( 'Результаты поиска для: %s', 'shape' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
</header><!-- .page-header -->
<?php
global $query_string;
$search_query = wp_parse_str( $query_string );
$search = new WP_Query( $search_query );
global $wp_query;
$total_results = $wp_query->found_posts;
?>
<?php endif; ?>
</div><!-- #content .site-content -->
</section><!-- #primary .content-area -->
<?php get_footer(); ?>
Проблема в том, что на данный момент ничего не отображается, кроме введенных символов.
Форма HTML5 по умолчанию. Добавьте поддержку темы
function wpdocs_after_setup_theme() {
add_theme_support( 'html5', array( 'search-form' ) );
}
add_action( 'after_setup_theme', 'wpdocs_after_setup_theme' );
WordPress отобразит свою встроенную HTML5 форму поиска:
<form role="search" method="get" class="search-form" action="<?php echo
home_url( "https://wordpress.stackexchange.com/" ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Поиск:', 'label' ) ?></span>
<input type="search" class="search-field"
placeholder="<?php echo esc_attr_x( 'Поиск …', 'placeholder' ) ?>"
value="<?php echo get_search_query() ?>" name="s"
title="<?php echo esc_attr_x( 'Поиск:', 'label' ) ?>" />
</label>
<input type="submit" class="search-submit"
value="<?php echo esc_attr_x( 'Поиск', 'submit button' ) ?>" />
</form>
Вставьте следующий код в search.php
<div class="wrap">
<header class="page-header">
<?php if ( have_posts() ) : ?>
<h1 class="page-title"><?php printf( __( 'Результаты поиска для: %s', 'twentyseventeen' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
<?php else : ?>
<h1 class="page-title"><?php _e( 'Ничего не найдено', 'twentyseventeen' ); ?></h1>
<?php endif; ?>
</header><!-- .page-header -->
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) :
/* Начать цикл */
while ( have_posts() ) : the_post();
/**
* Запускаем цикл для поиска для вывода результатов.
* Если вы хотите изменить это в дочерней теме, то включите файл
* с названием content-search.php, и он будет использован вместо.
*/
get_template_part( 'components/post/content', 'excerpt' );
endwhile; // Конец цикла.
the_posts_pagination( array(
'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'previous' ) ) . '<span class="screen-reader-text">' . __( 'Предыдущая страница', 'twentyseventeen' ) . '</span>',
'next_text' => '<span class="screen-reader-text">' . __( 'Следующая страница', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'next' ) ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Страница', 'twentyseventeen' ) . ' </span>',
) );
else : ?>
<p><?php _e( 'Извините, но ничего не соответствует вашим поисковым запросам. Пожалуйста, попробуйте снова с другими ключевыми словами.', 'twentyseventeen' ); ?></p>
<?php
get_search_form();
endif;
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
.
Ответ или решение
Чтобы создать форму поиска и страницу результатов поиска в вашей теме WordPress, вы можете следовать следующему пошаговому руководству. Мы обсудим, как правильно настроить форму поиска и привязать её к странице search.php
, чтобы результаты поиска корректно отображались.
Шаг 1: Создание формы поиска
Форма поиска — это элемент, который позволяет пользователям вводить свои запросы. Ваша форма должна выглядеть следующим образом:
<form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
<div class="input-group search-block">
<span class="screen-reader-text"><?php echo _x('Search for:', 'label'); ?></span>
<input type="search" class="search-field form-control" placeholder="<?php echo esc_attr_x('Search …', 'placeholder'); ?>" value="<?php echo esc_attr(get_search_query()); ?>" name="s" title="<?php echo esc_attr_x('Search for:', 'label'); ?>" />
<div class="input-group-btn">
<input type="submit" class="search-submit btn btn-default" value="<?php echo esc_attr_x('Search', 'submit button'); ?>" />
</div>
</div>
</form>
Шаг 2: Привязка формы к search.php
Теперь мы привяжем форму поиска к странице search.php
, которая отвечает за отображение результатов поиска. Убедитесь, что в вашей теме есть файл search.php
. В его начале вы должны подключить заголовок, а затем добавить следующий код:
<?php
get_header(); ?>
<section id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php if (have_posts()) : ?>
<header class="page-header">
<h1 class="page-title"><?php printf(__('Результаты поиска для: %s', 'shape'), '<span>' . get_search_query() . '</span>'); ?></h1>
</header><!-- .page-header -->
<div class="search-results">
<?php
// Начинаем цикл для вывода результатов поиска
while (have_posts()) : the_post();
get_template_part('components/post/content', 'excerpt');
endwhile; // Завершение цикла
// Пагинация
the_posts_pagination();
?>
</div>
<?php else : ?>
<h1 class="page-title"><?php _e('Ничего не найдено', 'shape'); ?></h1>
<p><?php _e('Извините, но ничего не совпадает с вашими поисковыми запросами. Попробуйте изменить запрос.', 'shape'); ?></p>
<?php get_search_form(); ?>
<?php endif; ?>
</div><!-- #content .site-content -->
</section><!-- #primary .content-area -->
<?php get_footer(); ?>
Шаг 3: Проверка и тестирование
После реализации вышеуказанного кода, убедитесь, что вы протестировали форму поиска на вашем сайте. Введите различные поисковые запросы и проверьте, что результаты отображаются должным образом. Если ничего не отображается, убедитесь, что у вас есть опубликованные записи или страницы, которые соответствуют вашим поисковым запросам.
Шаг 4: Дополнительные настройки и оптимизация
-
SEO Оптимизация: Убедитесь, что заголовки вашей страницы и мета-теги настроены для SEO. Это поможет улучшить видимость вашей страницы результатов поиска в поисковых системах.
-
Настройка внешнего вида: Настройте CSS для вашей формы и результатов поиска, чтобы они соответствовали общему дизайну вашего сайта.
-
Безопасность: Используйте функции WordPress, такие как
esc_html()
иesc_url()
, для обработки данных, чтобы избежать XSS-уязвимостей.
Следуя данному руководству, вы сможете настроить эффективную форму поиска и страницу результатов, что значительно улучшит пользовательский опыт на вашем сайте.