TwentyTwelveでカテゴリとタグで絞り込める検索フォームを作る

WordPress のテーマ TwentyTwelve のカスタマイズ記事です。

今回、選んだカテゴリとタグから絞り込み検索ができる機能を作ったのでメモしておきたいと思います。

デフォルトのテキスト検索はそこそこ使えて便利ですが、ブログ内にどんなキーワードがあるかはユーザにはわからないので実際不親切なんじゃないかと思います。

そこで、カテゴリ、タグで絞り込んで表示すれば多少マシになるんじゃないかと思ったのが発端です。

スポンサーリンク

検索フォームのカスタマイズ

Web 上にはテンプレートに直接コードを書く方法が多いみたいですが、それでは汎用性に欠けるので今回は functions.php に検索フォームの処理を追加し、ついでにショートコード化してみます。

まずは、標準のテキストフォームの例から。

function code_custom_search_1() {

	$form  = "<h4>キーワード検索</h4>\n";
	$form .= "<div id='search-box'>\n";
	$form .= "<form method='GET' action='" . home_url( '/' ) . "'>\n";
	$form .= "<input name='s' id='s' type='text' />\n";
	$form .= "<input id='submit' type='submit' value='検索' />\n";
	$form .= "</form>\n";
	$form .= "</div>\n";

	return $form;

}
add_shortcode( 'mysearch1', 'code_custom_search_1' );

このコードは [mysearch1] で呼び出せます。以下は表示例です。

キーワード検索

続いて、カテゴリまたはタグを選択して検索するフォームを作ってみます。

function code_custom_search_2() {

	$form  = "<h4>カテゴリ・タグから検索</h4>\n";
	$form .= "<div id='search-box'>\n";
	$form .= "<form method='GET' action='" . home_url( '/' ) . "'>\n";

	// category
	$form .= wp_dropdown_categories(
				array(
					'show_count'      => TRUE,
					'echo'            => FALSE,
					'show_option_all' => 'すべてのカテゴリ'
			)) . "\n";

	// tag
	$form .= "<select name='tag'>\n";
	$form .= "<option value=''>すべてのタグ</option>\n";
	$tag = get_tags();
	foreach ( $tag as $value ) {
	        $form .= "<option value='" . esc_attr( $value->slug ) . "'>" . esc_html( $value->name ) . "</option>\n";
	}
	$form .= "</select>\n";

	$form .= "<p><input id='submit' type='submit' value='検索' /></p>\n";
	$form .= "</form>\n";
	$form .= "</div>\n";

	return $form;

}
add_shortcode( 'mysearch2', 'code_custom_search_2' );

このコードは [mysearch2] で呼び出せます。以下は表示例です。

カテゴリ・タグから検索

簡単ですがこれで絞り込んで検索ができるようになりました。ショートコード化したので好きな時に呼び出せます。

TwentyTwelve に searchform.php を作成する

続いて、TwentyTwelve に検索フォームのテンプレート searchform.php を作成します。

デフォルトで表示される検索フォームは get_search_form 関数 で表示されていますが、searchform.php がテーマに存在しない場合はデフォルトの検索フォーム (テキストのやつ) を表示するという動作をします。

なので、今回作成した検索フォームをテーマ共通で使いたい場合は、search.php, 404.php 内のコードを調整するか searchform.php を用意する必要があります。

searchform.php を用意するのが手っ取り早いと思うので今回はこの方法でやってみます。

まずは、テンプレート用に以下のコードを functions.php へ追加します。

function custom_search() {
	$form  = code_custom_search_1();
	$form .= code_custom_search_2();
	return $form;
}

先ほど作成した検索フォーム用の関数をただまとめただけのコードです。

次に、子テーマ内に searchform.php を新規作成して以下の一行を書き込みます。(TwentyTwelve には最初から存在しません)

<?php echo custom_search(); ?>

これで、検索結果が見つからない時は従来の「テキスト検索フォーム」と「カテゴリ、タグの絞り込み検索フォーム」が同時に表示されるようになります。

後から動作を変えたくなっても、functions.php だけを調整すれば良いので楽かと思います。

本当は、カテゴリに連動して存在するタグだけをリスト表示させたい所ですが Ajax を利用する方法しか思い浮かばないので、これから少し頑張ってみる予定です。

できたらまた関連記事として書きたいと思います。