今回は検索フォームについてその2。6月に検索フォームの設置方法を学んで設置してからというもの、検索フォームの無かった従来に比べてとても便利になったものの、ちょっとした不満が…。「カテゴリーを絞り込みたい!」という欲求が当然のように出てくるまで、然程時間はかかりませんでした。たぶん1ヶ月くらい。
例えばうちのサイトでは「iMac」というキーワードで普通に検索をかけると、フリフリのThunderbolt大作戦のみならず、サーバー引っ越しメモや放談ラジオからも、つまりサイト全体から「iMac」を含む記事を全て引っ張ってくるので、かなりの数となってしまい、目的の記事に到達するのに時間がかかる。やっぱり事前にカテゴリー絞り込みたい!
いつものようにネット徘徊
そして情報を求めてネット徘徊、というかGoogle先生に的確な質問を投げかけてみた結果、多くの回答が表示されたのですが、中でも一番コチラのサイトが自分の要求にドンピシャ!でとても参考になりました。ありがとうございます。
WordPressでカテゴリー&タグを絞り込み検索をする(WEB PIXEL)
さっそく、テーマ内に以前作成した「searchform.php」の中身を、下記のように変更して保存。そしてindex.phpやsingle.phpなどの、検索フォームを表示させたい場所に<?php get_search_form(); ?>を記述します。
searchform.php
<!-- searchform.php --> <form method="get" action="<?php echo home_url('/'); ?>" class="search-form" > <?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=カテゴリー'); ?> <input name="s" id="s" type="text" value="<?php the_search_query(); ?>" /> <?php $tags = get_tags(); if ( $tags ) : ?> <select name='tag' id='tag'> <option value="" selected="selected">タグ</option> <?php foreach ( $tags as $tag ): ?> <option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option> <?php endforeach; ?> </select> <?php endif; ?> </form>
3行目:wp_dropdown_categories これはWP標準搭載のカテゴリーメニュー呼び出し。
5〜12行目:タグのドロップダウンメニュー呼び出し。
検索ワードでブログ全体から探し出す前に、カテゴリーとタグの両方で絞り込んでおくことが可能になります。例えば「iMac」と検索する前に、カテゴリーは「フリフリのThunderbolt大作戦」で、さらに「電気代」とタグ付けされた記事である事という条件にしておけば、それに該当する記事だけ(現時点では1記事のみ)検索結果が表示されるという具合。ああ、素晴らしい。

検索フォームの外観デザイン
機能的にはもうこれで十分満足。ただ、若干見栄えがなあ…と思って、一体どれくらい装飾をカスタマイズ出来るのか調べてみたのですが、なかなかキビシイことが判りました。入力するフォームの部分は何とか出来ても、ドロップダウンメニューの部分は結構ガードが高い。
[ jQuery ] select要素(プルダウン・セレクトボックス)を装飾する easyselectboxの使い方(BRISK)
そこで上記サイトを参考にし、まずはMacOSX 10.8.5でちょっとテストしてみた後、試しにOS XのバージョンをMavericksに切り替えてみたら、微妙にちがった見栄えになってしまったり…。ブラウザやOSのバージョンでデザインがズレてきてしまうようで、もう面倒くさくなり、検索フォームのドロップダウンメニュー周りは、OSやブラウザ依存のデフォルトで放置することにしました。
検索時の不具合
以前の、シンプルな検索フォーム設置当時、検索ワードを入力して検索を掛けた後の結果表示ページに、その検索ワードをページのタイトルとして表示させる(<?php the_search_query(); ?>)ようにしていたのですが、今回のドロップダウンメニュー搭載後、それが出来なくなりました。
原因が特定できずアレコレ悩み抜いて、検索結果を表示するためのページ「search.php」で使用していたヘッダやフッターなどの分割パーツを、その「search.php」の1ファイル内に全部直に記述したら、とりあえずその不具合は解消しました。検索処理自体は何ら問題なく、単に表示の不具合(しかもタイトルだけ)なので別に大きな影響はなかったし、おそらく何処かに潜んでいる僕の凡ミスだと思うのですが、現状はそんな感じです。
ぼんやりとした記憶に拠れば、今回の絞り込み検索は昨年8月頃に設置したのですが、記事にするのが今日まで延び延びになってしまいました。しかしこの絞り込み検索、便利過ぎて、これを設置したブログはホント個人用のメモ書き・日記ツールとして素晴らしいなと思いました。どんなアプリでも、検索機能は重要。
2015-02-14 > VPS&WordPress引っ越しメモ