Learning site for website creation

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

  • 投稿日:2019年07月15日

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

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

専用テンプレート

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

front-page.php フロントページ表示用テンプレート
home.php 主に固定ページの上にあるブログ投稿一覧表示用テンプレート
single.php 投稿詳細ページ表示用テンプレート
page.php 固定ページ表示用テンプレート
archive.php アーカイブ一覧全般表示用テンプレート
category.php カテゴリー一覧表示用テンプレート
tag.php タグ一覧表示用テンプレート
search.php 検索結果一覧表示用テンプレート
date.php 日付別一覧表示用テンプレート
404.php 404エラー表示用テンプレート
header.php 共通ヘッダーパーツテンプレート
footer.php 共通フッターパーツテンプレート
sidebar.php 共通サイドバーテンプレート
searchform.php 検索フォーム用テンプレート
comments.php コメント用テンプレート

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

優先度(高い ← → 低い)

search.php

index.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