WordPressサイト内検索機能のカスタマイズ

Wordpressのサイト内検索機能の基本的な利用方法と簡単なカスタマイズ方法です。

WordPressのサイト内検索機能はデフォルトでシンプルな検索フォームが表示できるようになっています。ウィジェットを使う場合は「検索」パーツをウィジェットに追加するだけで表示できます。その他の場所で表示させるときは、以下の関数を使うと任意の場所に表示することができます。

表示されるフォームがHTML5フォームをデフォルトで使用する場合は、function.phpに以下の関数を追加するとHTML5の検索フォームを使用します。

デザインを修正するには、「.search-form」や「.search-field」を使うといじれます。

簡単なカスタマイズ

検索フォームをカスタマイズするには、まず、テーマにsearchform.phpファイルを追加します。これは検索フォームを生成するときに呼ばれます。つまりget_search_form()を実行時に呼ばれます。このファイルに検索フォームを記述します。以下はデフォルトのHTML5フォームです。カスタマイズするために、以下のフォームが書かれたsearchform.phpファイルを作成します。

WordPressサイト内検索の基本的な仕組みとしては、URLのオプションとして「s=」以降に検索ワードを追加すれば検索します。例えば、検索時には「http://hogehoge.com/?s=xxx」のようなURLとなりサイト内検索を実施します。上記検索フォームはこのURLを生成しています。そこにカテゴリーやタグなどを指定するようなオプションを追加する場合は「http://hogehoge.com/?s=xxx&cat=yyy&tag=zzz」のような感じになります。

スポンサーリンク

そして、検索フォームにオプションを付ける場合は、そのオプションに合ったクエリーができるようにsearch.phpを修正する必要があります。search.phpは検索結果を表示するときに呼ばれます。つまり、search.phpで検索結果をクエリーするので、GETでこれらのパラメータをここで取得して、クエリー時のアーギュメントとして使用します。それではこの検索フォームにカテゴリーの選択オプションを付けてみましょう。カテゴリーはチェックボックスで複数選択できるようにします。上記</form>の直前に以下を追加します。

これは各カテゴリーをチェックボックスで表示します。次にタグもオプションで選択できるようにしましょう。タグはプルダウンメニューで単一選択できるようにします。カテゴリーのチェックボックと</form>の間に以下を追加します。

これで検索時のURLパラメータに「cat=」と「tag=」が追加されます。あとは、search.php内でこれらのパラメータをGETで取得します。以下のコードを追加します。

これで、検索時にオプションで指定した条件で検索されるようになりました。これを応用してリッチな実現してみてください。