WordPressで「get_search_form」を使ったサイト内検索の実装

WordPressにはデフォルトでサイト内検索の機能があります。
今回はその検索フォームの設置、検索結果一覧ページの実装方法です。

検索フォームの設置

以下の関数をコールするだけで、検索フォームを設置することができます。

<?php get_search_form() ?>

ヘッダ、フッタやサイドメニューなど好きな所に「get_search_form」を記述するだけです。
すると以下のデフォルトコードが出力され、検索フォームが表示されます。

<form role="search" method="get" id="searchform" class="searchform" action="http://cms.helog.jp/">
<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>

フォームの内容を変更したい場合はテンプレート「searchform.php」を用意します。
関数「get_search_form」は「searchform.php」が存在する場合はその内容を出力し、
存在しない場合は上記のデフォルトのコードを出力します。

「searchform.php」でオリジナルのフォームを用意する場合、まずは上記のソースをコピペして編集するほうが作業しやすいでしょう。

例えば、Bootstrapフレームワークルールを踏襲してナビバーに設置する場合、以下のようになります。

<form role="search" method="get" id="searchform" class="navbar-form navbar-right" action="<?php echo home_url() ?>">
<div class="form-group">
<input type="text" value="" name="s" id="s" />
</div>
<button type="submit" id="searchsubmit" class="btn btn-default">Search</button>
</form>

基本的にaction先の指定、「name=”s”」を設定したテキストボックス、submitボタンを踏襲していれば、WordPressの検索機能を問題なく動作させることができるでしょう。

検索結果一覧ページの作成

検索結果一覧ページのテンプレートは「search.php」です。

検索結果はこのテンプレートがpostにセットされるので、後はindex.phpやarchive.phpと同様に処理します。
他のページと同様に好みのレイアウト、デザインで検索結果を表示することができますね。

CMSを設計する場合、検索機能というのはコストがかかります。
検索範囲、検索オプション、言語対応、DBの最適化、処理負荷の軽減、レスポンスなど、考慮しなければならない課題は山積です。

その上で、WordPressの検索機能は比較的簡単に導入できるので重宝します。
私の懸案でWordPressの検索機能だけ利用したいという事で、サイトにWordPressを採用したこともありました。