37：検索結果一覧表示テンプレートを追加

ウィジェットやヘッダーに追加した検索ウィンドウにキーワードを入力して検索してもテンプレート「index.php」の「最後の砦」が表示され、検索結果一覧が表示されない状況です。

検索結果一覧表示用テンプレート「search.php」を作成します。

専用テンプレート

必要に応じて専用のテンプレートを追加できます。他にも追加できるファイルがありますが主なファイルは以下です。

検索結果一覧表示用テンプレート

テーマ内に専用テンプレートを追加

カテゴリ一覧表示テンプレートを複製し、検索結果一覧表示用テンプレート「search.php」を追加します。 

フォルダ構成

• lesson01
  • imgフォルダ
  • category.php
  • custom-page1.php
  • custom-page2.php
  • front-page.php
  • functions.php
  • index.php
  • page.php
  • screenshot.png
  • search.php（category.phpを複製して追加）
  • style.css

検索キーワード表示関数

カテゴリ一覧表示テンプレート「category.php」はタイトルにカテゴリ名を表示していました。

検索結果一覧テンプレート「search.php」では「検索キーワード」を表示するthe_search_query関数を呼び出します。

この関数はループ外で呼び出すことができます。

<?php the_search_query(); ?>

search.php

変更前

<?php
get_header();
?>

<div class="blog">
  <div class="inner">
    <h2 class="title">
<?php
$cat = get_the_category();
$catSlug = $cat[0]->slug;
echo ucfirst( $catSlug );
?>
    </h2>
    <div class="subtitle">
<?php single_cat_title(); ?>:
<?php echo $wp_query->found_posts; ?>件
    </div>
    <div class="flex">

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

      <div class="flex-item">
        <a href="<?php the_permalink(); ?>">
          <div class="image">

<?php
if (has_post_thumbnail()) {
  the_post_thumbnail('img_300_200');
} else {
  echo '<img src="'.get_template_directory_uri().'/img/no-image.png" alt="'.get_the_title().'">'.PHP_EOL;
}
?>

          </div>
          <div class="item-title"><?php the_title(); ?></div>
          <div class="item-text"><?php the_excerpt(); ?></div>
          <div class="item-date"><?php the_time('Y年m月d日'); ?></div>
        </a>
      </div><!-- .flex-item -->

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

    </div><!-- .flex -->

<?php // ページネーション ?>
<?php
if ( pagination() ) {
  echo pagination();
}
?>

  </div><!-- .inner -->
</div><!-- .blog -->

<?php
get_footer();

変更後

<?php
get_header();
?>

<div class="blog">
  <div class="inner">
    <h2 class="title">
<?php the_search_query(); ?>：検索結果
    </h2>
    <div class="subtitle">
<?php echo $wp_query->found_posts; ?>件
    </div>
    <div class="flex">

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

      <div class="flex-item">
        <a href="<?php the_permalink(); ?>">
          <div class="image">

<?php
if (has_post_thumbnail()) {
  the_post_thumbnail('img_300_200');
} else {
  echo '<img src="'.get_template_directory_uri().'/img/no-image.png" alt="'.get_the_title().'">'.PHP_EOL;
}
?>

          </div>
          <div class="item-title"><?php the_title(); ?></div>
          <div class="item-text"><?php the_excerpt(); ?></div>
          <div class="item-date"><?php the_time('Y年m月d日'); ?></div>
        </a>
      </div><!-- .flex-item -->

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

    </div><!-- .flex -->

<?php // ページネーション ?>
<?php
if ( pagination() ) {
  echo pagination();
}
?>

  </div><!-- .inner -->
</div><!-- .blog -->

<?php
get_footer();

表示結果

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

the_search_query()

WordPress変数

$wp_query

※欠席者対応：lesson28 – lesson29