【自作も可能】WordPressでサイト内検索を実装しよう
一見難易度の高そうなサイト検索機能ですが、WordPressでは専用のテンプレートタグをペタっと貼り付けるだけでカンタンに設置することができます。
テンプレートタグのしくみがわかれば、オリジナルの検索フォームを自作することも可能です。
検索キーワード、検索ヒット件数の表示方法も合わせてご紹介します。
この記事で分かること
- テンプレートタグによるWordPressの検索フォーム実装方法
- 自作によるWordPressの検索フォーム実装方法
- 検索結果ページの作り方
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
検索フォームの実装(テンプレートタグを利用)
基本の検索フォーム
WordPressでは、専用のテンプレートタグget_search_form()を利用して、簡単に検索フォームを付けることができます。
実装イメージはこのような状態です。
HTML5対応の検索フォーム
さらにfunctions.phpに以下を追加すると、HTML5仕様のフォームになります。
両者は何が違うのでしょう?
出力されるソースコードを見比べてみましょう。
※ソースコードの内容は、WordPressのバージョンや利用しているテーマファイルによって異なる場合があります。
注目したいのは、検索キーワードを入力するinput要素のtype属性。
get_search_form()のみの場合は「type=”text”」になっていますが、add_theme_support()を加えるとHTML5で追加された検索用のtype属性「type=”search”」が採用されます。検索機能自体はどちらを利用しても同じです。
ところで、こうしたテンプレートタグによる実装では、デザインこそCSSでカスタマイズできますが、例えばボタンの表記(value値)などはアレンジできません。
各種文言を変更したい等、もう一歩こだわりたい場合には検索フォームの自作がおすすめです。
検索フォームの実装(自作)
検索フォームのオリジナルコードをコピーする
自作とは言っても、ゼロから自分でコードを書く必要はありません。
先程ご紹介した通り、検索フォームのコード内容はわかっているわけですから、それをベースにして自分好みにアレンジしてしまえばいいんです。
以下、WordPressの公式リファレンスで紹介されているPHPコードです。
get_search_form()のみの場合は、以下のように出力されます。
get_search_form() + add_theme_support()の場合はこんなコードです。
上記のコードどちらかを自分のテンプレートファイルに貼り付けて、カスタマイズしたい箇所だけ変更してしまいましょう。
カスタマイズ例
例えばHTML5仕様のフォームに関して、このような変更を加えたい場合は、
・入力欄の頭についている「検索:」を削除
・プレイスホルダーの表記を「キーワードを入力」に変更
・title要素の表記を「検索したいキーワードを入力してください」に変更
・「検索」ボタンのラベルを「Search」に変更
以下のようにアレンジしてしまえばOKです。
これで思い通りの検索フォームが作れますね。
検索キーワードが未入力時の対応
ところでWordPressの検索フォームは、入力欄が空欄の場合も検索ができてしまい、検索結果として全記事がヒットしてしまいます。
これを防ぐ処置として、入力欄のinput要素にrequire属性を足して、要素を入力必須項目にする方法があります。
さあ、検索フォームが実装できたとなると、次に整えたくなるのは検索結果ページです。
検索結果ページの作成
検索結果表示用のテンプレートファイル
検索結果を表示させるためのテンプレートファイル名はsearch.phpです。
利用しているテーマにsearch.phpが存在しない場合は、index.phpが採用されます。
検索キーワードの表示
検索したキーワードを表示させるテンプレートタグを2種類紹介します。
1つめはget_search_query()。
実は、これまでご紹介したコードのvalue値にも使われていました。
もう1つがthe_search_query()です。
こちらはechoなしで検索キーワードを表示してくれます。
記事タイトル表示用のthe_title()と同じ用法ですね。
検索にヒットした件数の表示
検索条件にヒットした記事の件数は、以下の表記で取得することができます。
サンプル
以下は「XXXXXの検索結果:○件」と表示させたい場合のコードです。
まとめ
検索フォーム&検索結果表示に関するWordPressのテクニックをまとめました。
- 検索フォーム用のテンプレートタグ:get_search_form()
- functions.phpにadd_theme_support()も追加するとHTML5仕様に
- テンプレートタグ経由で出力されるコードを直接テンプレートファイルに転記&カスタマイズすることで、オリジナルの検索フォームも作成可能
- 検索結果表示用のテンプレートファイル:search.php
- 検索キーワードの表示:get_search_query()もしくはthe_search_query()
- 検索ヒット件数の表示:$wp_query->found_posts
本来なら、システム系の専門技術がないと実現が難しい検索機能ですが、WordPressに関しては、テンプレートタグのコピペでカンタンに実装することができます。
検索機能を持ったサイトは使い勝手もよく、結果PVの増加も期待できますので、是非つけておきたいですね。