Подключаем стандартный поиск по сайту на WordPress

Для того, что бы подключить поиск по сайту на WordPress, нам нужно сначала создать форму для поисковой строки.

Фома для поиска

                <form class="simplesearch-search-form" action="/" method="get" class="msearch" id="search_form">
		<input id="searchfield" type="text" class="search-input" name="s" placeholder="поиск" value="<?php if(!empty($_GET['s'])){echo $_GET['s'];}?>">
		</form>

После этого переходим в шаблон вашей темы search.php и пишем разметку для вывода результатов поиска.

Пример

<?php
/**
 * The template for displaying search results pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 *
 * @package Lawyers
 */

get_header();
?>





	<div class="container-page-001 overlay-black" style="background-image: url(/wp-content/themes/lawyers/assets/images/background.jpg);">
		<div class="container-page-001-content">
			<p class="container-page-001__title">ПОИСК ПО САЙТУ</p>
		</div>
	</div>





	<div class="container-page-002">
		<div class="container-page-002-content">			
			<h1>Поиск по: "<?php echo $_GET['s'];?>"</h1>
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<div class="searchblock-item">
			<a href="<?php the_permalink();?>"><?php the_title(); ?></a>
			<div>
				<?php 
				$content = get_the_content();
				echo wp_trim_words( $content , '50' ); 
				?>
			</div>
			</div>
			<?php endwhile; else: ?>
			<p>Поиск не дал результатов.</p>
			<?php endif;?>			
		</div>
	</div>





<?php
get_footer();

Далее пишем стили для формы поиска и страницы результатов, ниже приведен пример простых стилей.

CSS

.searchblock-item {
	margin: 0 0 10px 0;}
.searchblock-item a {
	color: #000000;
    font-size: 20px;
    font-weight: 700;}

На всякий случай выложу стандартный шаблон search.php.

search.php

<?php
/**
 * The template for displaying search results pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 *
 * @package RussianWool
 */

get_header();
?>

	<main id="primary" class="site-main">

		<?php if ( have_posts() ) : ?>

			<header class="page-header">
				<h1 class="page-title">
					<?php
					/* translators: %s: search query. */
					printf( esc_html__( 'Search Results for: %s', 'russianwool' ), '<span>' . get_search_query() . '</span>' );
					?>
				</h1>
			</header><!-- .page-header -->

			<?php
			/* Start the Loop */
			while ( have_posts() ) :
				the_post();

				/**
				 * Run the loop for the search to output the results.
				 * If you want to overload this in a child theme then include a file
				 * called content-search.php and that will be used instead.
				 */
				get_template_part( 'template-parts/content', 'search' );

			endwhile;

			the_posts_navigation();

		else :

			get_template_part( 'template-parts/content', 'none' );

		endif;
		?>

	</main><!-- #main -->

<?php
get_sidebar();
get_footer();

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены