【WordPress自作テーマ開発⑦】検索結果ページを作ろう編

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

get_header();//ヘッダー出力
?>

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

		<?php if ( have_posts() ) : ?><!--if文検索の結果記事があれば-->

			<header class="page-header">
				<h1 class="page-title">
					<?php
					/* translators: %s: search query. */
					printf( esc_html__( 'Search Results for: %s', 'blogcreatechallenge' ), '<span>' . get_search_query() . '</span>' );//Search Results forの文字列の後にサイト内検索を行った文字列を表示
					?>
				</h1>
			</header><!-- .page-header -->

			<?php
			/* Start the Loop */
			while ( have_posts() ) ://while文で検索結果で引っかかった投稿がある限り以下の内容を繰り返す
				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' );//get_template_part関数でtemplate-partsディレクトリ内のcontent-search.phpを呼び出しその内容を表示

			endwhile;//while文終了

			the_posts_navigation();//ページャーを表示

		else ://検索の結果記事がなければ

			get_template_part( 'template-parts/content', 'none' );//get_template_part関数でtemplate-partsディレクトリ内のcontent-none.phpを呼び出しその内容を表示

		endif;//fi文終了
		?>

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

<?php
get_sidebar();//サイドバー出力
get_footer();//フッター出力

<?php get_header();?>

<div class="ly_cont ly_cont__col">
    <main class="ly_cont_main">
        <div class="post-breadcrumb">
            <?php output_breadcrumb(); ?>
        </div>
        <?php	if ( have_posts() ) : ?>
        <h1 class="page-title">
            <?php printf( esc_html__( '検索キーワード: %s', 'blogcreatechallenge' ), '<span>' . get_search_query() . '</span>' );?>
        </h1>
        <div class="ly_cont_card bl_cardUnit bl_cardUnit__col4">
            <?php while ( have_posts() ) : the_post();
						get_template_part( 'template-parts/content-archive');
					endwhile;
				else:
					get_template_part( 'template-parts/content', 'none' );
				endif;
			?>
        </div>
    </main>
</div>
<?php get_footer(); ?>

<?php get_header();?><!--ヘッダー出力-->

<div class="ly_cont ly_cont__col">
    <main class="ly_cont_main">
        <div class="post-breadcrumb">
            <?php output_breadcrumb(); ?><!--パンくずリスト表示-->
        </div>
        <?php	if ( have_posts() ) : ?><!--if文検索の結果、記事があれば以下を実行-->
        <h1 class="page-title">
            <?php printf( esc_html__( '検索キーワード: %s', 'blogcreatechallenge' ), '<span>' . get_search_query() . '</span>' );?><!--検索キーワードをH1で出力する-->
        </h1>
        <div class="ly_cont_card bl_cardUnit bl_cardUnit__col4">
            <?php while ( have_posts() ) : the_post();//while文で記事があるだけ以下の内容を繰り返す
						get_template_part( 'template-parts/content-archive');//get_template_part関数でtemplate-partsディレクトリ内のcontent-archive.phpを呼び出しその内容を出力
					endwhile;//while文終了
				else://検索の結果該当する記事がなければ、以下を実行
					get_template_part( 'template-parts/content', 'none' );//get_template_part関数でtemplate-partsディレクトリ内のcontent-none.phpを呼び出しその内容を出力
				endif;//if文終了
			?>
        </div>
    </main>
</div>
<?php get_footer(); ?><!--フッター出力-->

<?php
/**
 * Template part for displaying a message that posts cannot be found
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package BlogCreateChallenge
 */

?>

<section class="no-results not-found">
	<header class="page-header">
		<h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'blogcreatechallenge' ); ?></h1><!--H1タグでNothing Found（何も見つかりません）を出力-->
	</header><!-- .page-header -->

	<div class="page-content">
		<?php
		if ( is_home() && current_user_can( 'publish_posts' ) ) ://ブログのインデックスページ（ホーム画面）かつユーザーがpublish_postsの権限を持って入れば以下を実行

			printf(
				'<p>' . wp_kses(
					/* translators: 1: link to WP admin new post page. */
					__( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'blogcreatechallenge' ),//再度検索をしてくださいというメッセージを出力
					array(
						'a' => array(
							'href' => array(),
						),
					)
				) . '</p>',
				esc_url( admin_url( 'post-new.php' ) )
			);

		elseif ( is_search() ) ://検索ページが表示されていれば、
			?>

			<p><?php esc_html_e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'blogcreatechallenge' ); ?></p>
			<?php////再度検索をしてくださいというメッセージを出力
			get_search_form();//検索フォームを出力

		else ://条件に当てはまらなければ、、
			?>

			<p><?php esc_html_e( 'It seems we can’t find what you’re looking for. Perhaps searching can help.', 'blogcreatechallenge' ); ?></p>
			<?php//探しているものが見つからないので検索してくださいというメッセージを出力
			get_search_form();//検索フォーム出力

		endif;
		?>
	</div><!-- .page-content -->
</section><!-- .no-results -->

<section class="no-results not-found">
	<header class="page-header">
		<h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'blogcreatechallenge' ); ?></h1>
	</header><!-- .page-header -->

	<div class="page-content">
			<p><?php esc_html_e( '申し訳ありませんお探しのページは見つかりませんでした。トップに戻るか以下の検索フォームからキーワードで検索してください。', 'blogcreatechallenge' ); ?></p>
        <?php get_search_form(); ?>
	</div><!-- .page-content -->
</section><!-- .no-results -->

<section class="no-results not-found">
	<header class="page-header">
		<h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'blogcreatechallenge' ); ?></h1><!--H1タグでNothing Found（何も見つかりません）を出力-->
	</header>

	<div class="page-content">
			<p><?php esc_html_e( '申し訳ありませんお探しのページは見つかりませんでした。トップに戻るか以下の検索フォームからキーワードで検索してください。', 'blogcreatechallenge' ); ?></p><!--ユーザーへのメッセージを出力-->
        <?php get_search_form(); ?><!--検索フォームを出力-->
	</div>
</section>

<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
  <input type="text" placeholder="キーワード検索" name="s" class="searchfield" value="" />
  <input id="sbtn" type="submit" value="検索" class="searchsubmit" />
</form>