はじめての『WordPress』入門

3-8. 検索ページのテンプレート

WordPress には「サイト内検索」の機能が備わっています。トップページやヘッダーに検索フォームを設置し、文言を入れて検索をかけると、タイトル・本文から該当の記事を検索結果として表示することができます。

  • WordPress

公開日:2020/04/10最終更新日:2020/04/10

1.サイト内検索で出来ること

Web サイト上で、今見ているサイトの中にあるページを検索することを「ページ内検索」と言います。ページ数が多いサイトなどでは、ユーザーが目的のページに辿り着きやすくするために、ページ内検索を設置するのが有効的です。

WordPress にはサイト内検索の機能が備わっています。検索フォームを任意の場所に設置し、キーワードを入れて検索すると、検索結果ページを表示することができます。

検索対象はタイトルと本文です。カテゴリーやタグを検索範囲に含めたい場合はカスタマイズをする必要があります。

サイト内検索を設置するには、検索フォームを表示する searchform.php と、検索結果ページを表示する search.php というテンプレートが必要です。

2.searchform.php - 検索フォームのテンプレートを用意する

searchform.php は検索フォームのテンプレートです。キーワードの入力欄と、送信ボタンを埋め込みます。

searchform.php というファイルを作成し、以下のコードを記述しましょう。

<form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <label for="s">サイト内の記事を検索</label>
  <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
  <input type="submit" id="searchsubmit" value="送信" />
</form>

3.get_search_form() - ヘッダーに検索フォームを設置する

header.php の中の任意の場所に、検索フォームを呼び出す関数を書き込み、入力フォームを表示します。

get_search_form()という関数を使って、searchform.php を呼び出します。

サンプルのテンプレートに埋め込むと以下のようになります。

<header>
  <div class="container flexbox">
    <div class="logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">はじめてのWordPress</a></div>
    <?php get_search_form(); ?>
  </div>
</header>

※CSS を少し書き加えています

続いて検索結果を表示するテンプレートを作成します

4.search.php - 検索結果ページのテンプレートを用意する

メインのテンプレートをコピーして search.php という検索結果ページを表示するテンプレートを作成します。

検索結果には、検索キーワードと件数を表示できるようにします。

<?php get_header(); ?>
  <main>
    <div class="container">
      <article>
        <h2><?php the_search_query(); ?>の検索結果 : <?php echo $wp_query->found_posts; ?>件</h2>
        <dl class="table">
          <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <dt><?php the_time('Y.m.d'); ?></dt><dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd>
          <?php endwhile; else : ?>
            <dd>まだ記事がありません</dd>
          <?php endif; ?>
        </dl>
      </article>
    </div>
  </main>
<?php get_footer(); ?>

埋め込んだ関数については以下で解説します。

5.検索結果ページでよく使われる WordPress 関数

the_search_query() - 検索キーワードを表示する

the_search_query()は検索したキーワードを表示する関数です。

<?php the_search_query(); ?>

というふうに記述すれば、キーワードが表示されます。

表示せずに取得だけしたい場合はget_search_query()を使います。

$wp_query->found_posts - 検索件数を表示する

検索結果の件数を表示したい場合は\$wp_query->found_posts を使います。

<?php echo $wp_query->found_posts; ?>

というふうに記述すれば、件数が表示されます。

理解度チェック

このレッスンの著者