【wordpress】コピペで出来る、カスタムタクソノミのドロップダウン式絞り込み検索

wordpressの検索機能は適宜に応じて出力を変えることで絶妙なユーザービリティを発揮することが出来ます。

今回は、「キーワード検索なしのドロップダウン選択式」で、カスタムタクソノミーを絞り込んでみます。

htmlのformについての基礎

ひとまずHTMLのform要素で、wordpressの検索を実装する上で理解しておきたい基礎的な仕組みを簡易的にメモしていきます。

form method=””

フォームに入力された情報の送信方法。
getとpostがありますが、値を省略すると「get」になります。

それぞれの使い分けは以下の様な感じ。

get

データを「取り出す。」
検索に対して、ヒットしたコンテンツを「取り出し」たりするときに使います。
URLに付加して処理システムに渡されるので、長いデータを送るのには適しません。
Googleとかで検索した後にURLをみると、記号やら何やら色々と付け足されて、とても長くなっていることがわかります。
せいぜい数kbが上限でしょう

たとえば、textarea に入力されたデータを送る場合はpostが望ましいです。

post

フォームに入力された情報をデータベースに登録したり、書き換えたりする際にはこちらを使います。

form action=””

フォームに入力された情報を送信するURLを入力します。
HTML5では指定しなくてもよくなりました。
指定しない場合は、開いているページで処理します。

name=””

フォームでは複数の項目を同時に送信します。
それらを判別するのがこの「name」です。プログラムに送信されます。

value=””

フォームの初期値、テキストを指定できます。
何も入力していないのにすでに「http://」とか「お名前」が入っているとたいてい「value」のしわざでした。
最近では「placeholder」を指定するか、スクリプトで同様の装いをさせることが多いです。

select～　option～　/select

ドロップダウン式のリスト項目を出力します。
optionの「value値」が、selectの「name値」と紐付けられてクエリとして送信されます。

optionに「selected」と書くことで、初期選択項目を指定できます。

あとあまり知られていない気がしますが、selectに「size=””」を書き、値を1以上にするとリスト表示になります。
selectに「multiple」と書くと複数項目の選択が可能になります。

wordpressのフォームのしくみ

URL末尾に「?s=」を付け、その先に検索クエリを続けて、前項の「get」で渡して検索しています。
この「s」に格納しないことには何も出来ないのです。

ちなみにform acriton=””にはサイトのURLを指定します。

&lt;form action="&lt;?php echo site_url('/'); ?&gt;"&gt;

1	<form action="<?php echo site_url('/'); ?>">

キーワードで検索する場合は、

&lt;input type="text" name="s" value="&lt;?php echo $_GET['s']; ?&gt;" /&gt;

1	<input type="text" name="s" value="<?php echo $_GET['s']; ?>" />

と書くことで、出たテキストボックスに入れたキーワードがそのまま「s」によって渡され、検索されることになります。

ここまで説明したことはすべてテンプレートタグ1行で実装できます。

&lt;?php get_search_form(); ?&gt;

1	<?php get_search_form(); ?>

関数リファレンス/get search form – WordPress Codex 日本語版

出力HTML

&lt;div id="search"&gt;
  &lt;form method="get" id="searchform" action="http://localhost/w/"&gt;
    &lt;label class="hidden" for="s"&gt;
          &lt;/label&gt;
    &lt;input value="" name="s" id="s" type="text"&gt;
    &lt;button value="Search"&gt;&lt;span class="icon-search"&gt;&lt;/span&gt;&lt;/button&gt;
  &lt;/form&gt;
&lt;/div&gt;

</label>

</form>

</div>

カスタムタクソノミーやカテゴリーだけで絞り込み検索する方法（ドロップダウン）

テキストボックス無しで、ドロップダウン選択のみの検索を実装してみます。

&lt;div id="searchbox" class="searchbox"&gt;
     &lt;form role="search" method="get" id="searchform" action="&lt;?php echo home_url( '/' ); ?&gt;"&gt;
          &lt;label for="input-id"&gt;種別&lt;/label&gt;
          &lt;input type="hidden" name="s"&gt;
          &lt;input type="hidden" name="post_type" value="以下のタクソノミを含むカスタム投稿名" /&gt;
          &lt;select id="input-id" name="カスタムタクソノミ名（ターム名）"&gt;
               &lt;option value="" selected="true"&gt;指定なし&lt;/option&gt;
               &lt;?php
                    $terms = get_terms('カスタムタクソノミ名' , 'get=all');

                    foreach($terms as $term){
                         echo '&lt;option value="' . $term-&gt;slug . '"&gt;' .
                         esc_html($term -&gt; name) .
                         '&lt;/option&gt;';
                    }
               ?&gt;
          &lt;/select&gt;

          &lt;input type="submit" id="searchsubmit" value="検索" /&gt;
     &lt;/form&gt;
&lt;/div&gt;

<?php

$terms = get_terms('カスタムタクソノミ名' , 'get=all');

foreach($terms as $term){

echo '<option value="' . $term->slug . '">' .

esc_html($term -> name) .

'</option>';

}

</select>

</form>

</div>

複数のタクソノミから絞り込みたい場合は、selectを増やしていけばいいだけです。

今回のキモですが、キーワード検索を行わないため、テンプレートタグでも直接input type=”text”の「s」に格納して渡していた検索クエリが渡せません。

そこで、

&lt;input type="hidden" name="s"&gt;

1	<input type="hidden" name="s">

として、自由な入力項目でなく「ユーザーに表示されない項目として絶対に渡す」形をとります。

これで、selectから項目を選んだ状態で検索ボタンをクリックすることで、無事検索クエリがURLにパラメータとして渡されます！

そして今回、wordpressのテンプレートタグはget_termsのみですね。かんたん！

なにをやっているか

get_terms()

mixed get_term( mixed $term , string $taxonomy [ , string $output = OBJECT [ , string $filter = 'raw' ] ] )

1	mixed get_term( mixed $term , string $taxonomy [ , string $output = OBJECT [ , string $filter = 'raw' ] ] )

$termにタームID（カスタムタクソノミID）もしくはカテゴリー情報、タグ情報のオブジェクトを指定
$taxonomyは、$termで指定したタームを含んでいるカスタム投稿タイプ名を指定
$outputは出力型を指定
$filterは取得するデータのフィルター

を記述します。

今回はカスタムタクソノミ名を指定するのみです。
返り値のオブジェクトから、「$term->slug」をoptionのvalue値に指定し
「$term->name」を表示名に使用しています。

foreachでループさせているため、あとから管理画面でタクソノミの分類が追加されても自動で選択項目に追加されることになります。

ドロップダウンを実装するwordpressテンプレートタグ

&lt;?php wp_dropdown_categories( $args ); ?&gt;

&lt;?php $args = array(
	'show_option_all'    =&gt; すべての項目を選択できるようにするか,
	'show_option_none'   =&gt; 選択しない という選択肢を表示するか,
	'orderby'            =&gt; 並びの基準。（'ID'）, 
	'order'              =&gt; 並び順。デフォルトは（'ASC'）,
	'show_count'         =&gt; 記事数を表示するか。（0）,
	'hide_empty'         =&gt; 記事のない項目を表示するか（1）, 
	'child_of'           =&gt; 指定したカテゴリIDの子カテゴリを全て取得する（0】,
	'exclude'            =&gt; 非表示のカテゴリをIDで指定,
	'echo'               =&gt; HTMLで表示するか取得するか（1）,
	'selected'           =&gt; カテゴリIDでを指定して、「selected」をつける（0）,
	'hierarchical'       =&gt; 子カテゴリを階層化して表示するか（0）, 
	'name'               =&gt; selectの「name＝””」（'cat'）,
	'id'                 =&gt; id指定（''）,
	'class'              =&gt; class指定（'postform'】,
	'depth'              =&gt; どの階層まで出力するか（0）,
	'tab_index'          =&gt; tabindexの値（0）,
	'taxonomy'           =&gt; 指定したタクソノミを出力する（'category'）,
	'hide_if_empty'      =&gt; 該当カテゴリに項目がないときフォーム自体を出さない（false）,
); ?&gt;

<?php wp_dropdown_categories( $args ); ?>

<?php $args = array(

'show_option_all' => すべての項目を選択できるようにするか,

'show_option_none' => 選択しないという選択肢を表示するか,

'orderby' => 並びの基準。（'ID'）,

'order' => 並び順。デフォルトは（'ASC'）,

'show_count' => 記事数を表示するか。（0）,

'hide_empty' => 記事のない項目を表示するか（1）,

'child_of' => 指定したカテゴリIDの子カテゴリを全て取得する（0】,

'exclude' => 非表示のカテゴリをIDで指定,

'echo' => HTMLで表示するか取得するか（1）,

'selected' => カテゴリIDでを指定して、「selected」をつける（0）,

'hierarchical' => 子カテゴリを階層化して表示するか（0）,

'name' => selectの「name＝””」（'cat'）,

'id' => id指定（''）,

'class' => class指定（'postform'】,

'depth' => どの階層まで出力するか（0）,

'tab_index' => tabindexの値（0）,

'taxonomy' => 指定したタクソノミを出力する（'category'）,

'hide_if_empty' => 該当カテゴリに項目がないときフォーム自体を出さない（false）,

); ?>

とても便利なのですが、今回はこれでは上手く行きませんでした。

以上、カテゴリ、タクソノミーでドロップダウン式検索を実装する方法でした。

メリットとしては、予め検索の選択肢を明示することでユーザーを迷わせにくい点があります。

サイト全体の検索というよりは、下層ページで細分化しているコラム記事とかで実装するとよさそうですね。

コピペで行けますので、ぜひ！

機会があったらチェックボックスなどを使ってガッツリとした検索も実装してみたいです。

でわ！

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。（ポートフォリオ）Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。