#WordPress

【自作も可能】WordPressでサイト内検索を実装しよう

一見難易度の高そうなサイト検索機能ですが、WordPressでは専用のテンプレートタグをペタっと貼り付けるだけでカンタンに設置することができます。
テンプレートタグのしくみがわかれば、オリジナルの検索フォームを自作することも可能です。
検索キーワード、検索ヒット件数の表示方法も合わせてご紹介します。

この記事で分かること

テンプレートタグによるWordPressの検索フォーム実装方法
自作によるWordPressの検索フォーム実装方法
検索結果ページの作り方

この記事の著者

フリーランス
Webデザイナー兼UI/UXデザイナー

検索フォームの実装（テンプレートタグを利用）

基本の検索フォーム

WordPressでは、専用のテンプレートタグget_search_form()を利用して、簡単に検索フォームを付けることができます。

// フォームを設置したいテンプレートファイル(header.phpなど)に以下を追加
<?php get_search_form(); ?>

実装イメージはこのような状態です。

WordPressのテンプレートタグget_search_form()で出力した検索フォーム — デザインはCSSを使って好きなようにカスタマイズできます

HTML5対応の検索フォーム

さらにfunctions.phpに以下を追加すると、HTML5仕様のフォームになります。

// テーマフォルダ内のfunctions.phpに以下を追加
add_theme_support('html5', array('search-form'));

両者は何が違うのでしょう？
出力されるソースコードを見比べてみましょう。
※ソースコードの内容は、WordPressのバージョンや利用しているテーマファイルによって異なる場合があります。

<!-- get_search_form()だけの場合 -->
<form role="search" method="get" id="searchform" class="searchform" action="任意のURL">
  <div>
    <label class="screen-reader-text" for="s">検索:</label>
    <input type="text" value="" name="s" id="s">
    <input type="submit" id="searchsubmit" value="検索">
  </div>
</form>

<!-- get_search_form() + add_theme_support()の場合 -->
<form role="search" method="get" class="search-form" action="任意のURL">
  <label>
    <span class="screen-reader-text">検索:</span>
    <input type="search" class="search-field" placeholder="検索…" value="" name="s">
  </label>
  <input type="submit" class="search-submit" value="検索">
</form>

注目したいのは、検索キーワードを入力するinput要素のtype属性。
get_search_form()のみの場合は「type=”text”」になっていますが、add_theme_support()を加えるとHTML5で追加された検索用のtype属性「type=”search”」が採用されます。検索機能自体はどちらを利用しても同じです。

ところで、こうしたテンプレートタグによる実装では、デザインこそCSSでカスタマイズできますが、例えばボタンの表記（value値）などはアレンジできません。
各種文言を変更したい等、もう一歩こだわりたい場合には検索フォームの自作がおすすめです。

検索フォームの実装（自作）

検索フォームのオリジナルコードをコピーする

自作とは言っても、ゼロから自分でコードを書く必要はありません。
先程ご紹介した通り、検索フォームのコード内容はわかっているわけですから、それをベースにして自分好みにアレンジしてしまえばいいんです。
以下、WordPressの公式リファレンスで紹介されているPHPコードです。
get_search_form()のみの場合は、以下のように出力されます。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url(home_url('/')); ?>">
  <div>
    <label class="screen-reader-text" for="s"><?php _x('Search for:', 'label'); ?></label>
    <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x('Search', 'submit button'); ?>" />
  </div>
</form>

get_search_form() + add_theme_support()の場合はこんなコードです。

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
  </label>
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

上記のコードどちらかを自分のテンプレートファイルに貼り付けて、カスタマイズしたい箇所だけ変更してしまいましょう。

カスタマイズ例

例えばHTML5仕様のフォームに関して、このような変更を加えたい場合は、

・入力欄の頭についている「検索：」を削除
・プレイスホルダーの表記を「キーワードを入力」に変更
・title要素の表記を「検索したいキーワードを入力してください」に変更
・「検索」ボタンのラベルを「Search」に変更

以下のようにアレンジしてしまえばOKです。

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <input type="search" class="search-field" placeholder="キーワードを入力" value="<?php echo get_search_query() ?>" name="s" title="検索したいキーワードを入力してください" />
  <input type="submit" class="search-submit" value="Search" />
</form>

これで思い通りの検索フォームが作れますね。

検索キーワードが未入力時の対応

ところでWordPressの検索フォームは、入力欄が空欄の場合も検索ができてしまい、検索結果として全記事がヒットしてしまいます。
これを防ぐ処置として、入力欄のinput要素にrequire属性を足して、要素を入力必須項目にする方法があります。

// require属性を足して入力必須項目に
<input require type="search" class="search-field" placeholder="キーワードを入力" value="<?php echo get_search_query() ?>" name="s" title="検索したいキーワードを入力してください" />

さあ、検索フォームが実装できたとなると、次に整えたくなるのは検索結果ページです。

検索結果ページの作成

検索結果表示用のテンプレートファイル

検索結果を表示させるためのテンプレートファイル名はsearch.phpです。
利用しているテーマにsearch.phpが存在しない場合は、index.phpが採用されます。

検索キーワードの表示

検索したキーワードを表示させるテンプレートタグを2種類紹介します。
1つめはget_search_query()。
実は、これまでご紹介したコードのvalue値にも使われていました。

// 検索キーワードを取得するためのテンプレートタグなので、表示させるにはechoが必要
<?php echo get_search_query(); ?>

もう1つがthe_search_query()です。
こちらはechoなしで検索キーワードを表示してくれます。
記事タイトル表示用のthe_title()と同じ用法ですね。

// これだけで検索キーワードが表示されます
<?php the_search_query(); ?>

検索にヒットした件数の表示

検索条件にヒットした記事の件数は、以下の表記で取得することができます。

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

サンプル
以下は「XXXXXの検索結果：○件」と表示させたい場合のコードです。

<p><?php the_search_query(); ?>の検索結果：<?php echo $wp_query->found_posts; ?>件</p>

まとめ

検索フォーム＆検索結果表示に関するWordPressのテクニックをまとめました。

WordPressのサイト内検索実装まとめ

検索フォーム用のテンプレートタグ：get_search_form()
functions.phpにadd_theme_support()も追加するとHTML5仕様に
テンプレートタグ経由で出力されるコードを直接テンプレートファイルに転記＆カスタマイズすることで、オリジナルの検索フォームも作成可能
検索結果表示用のテンプレートファイル：search.php
検索キーワードの表示：get_search_query()もしくはthe_search_query()
検索ヒット件数の表示：$wp_query->found_posts

本来なら、システム系の専門技術がないと実現が難しい検索機能ですが、WordPressに関しては、テンプレートタグのコピペでカンタンに実装することができます。
検索機能を持ったサイトは使い勝手もよく、結果PVの増加も期待できますので、是非つけておきたいですね。