WordPress標準の検索フォームを使って、カスタムタクソノミーを使った簡易的な絞り込み検索をつけるメモ

WordPressでいくつかの項目をもとに記事を絞り込み検索をしたいという案件の相談があり、実装方法をいろいろと調べた時の自分用メモです。

絞り込み検索ができるプラグインとしては、『WP Custom Fields Search』というプラグインが非常に有名で、某有名ブログをはじめとして多くのブログで紹介されています。

しかしこのプラグイン、更新が2009-8-19というはるか昔に止まっておりまして、現行の3.5.1、デバッグモードtrueの環境下で動かしたところ既に非推奨の関数が使われているなど多くのお叱りのメッセージが表示されました。
デバッグモードではない通常の環境下では一応まだ動くようなのですが、自分のブログならまだしも、仕事として携わるものにそんな末恐ろしいプラグインは入れられないわ!!
ということで、このプラグインを使わない方法を試してみました。
※2013.06.06補足 なんと4年ぶりにこのプラグインが更新されましたが、説明を読むと、サポートができないのでこのプラグインのリリースは今回最後になるだろうという旨のことが書いてありました。
やはり無償プラグインは当たり前に存在するものではないということを肝に銘じておかないといけませんね。続けてほしいプラグインにはぜひ寄付や支援をしましょう。詳しくはこちらも記事もぜひ。

具体的な内容(下記仕様は架空のものです)

  • ケーキ屋さんのサイトを作ります
  • デフォルトの『投稿』を商品紹介として使います
  • カテゴリーで、「焼き菓子」「生菓子」を分類
  • カテゴリーとは別に、メインで使ってる果物でも分類したい
  • この2つの項目で、絞り込み検索をしたい(「焼き菓子」カテゴリーで、メインの果物が「いちご」のものを検索したい)

ブログ内検索フォームのカスタマイズはfunctions.phpに書く方法もありますが、
今回はPHP…う~ん??な感じの、ただのマークアップエンジニアの人にもわかりやすいよう、テーマファイルに直接formを書いていく方法でやってみます。

1. ブログ内フォーム基礎の基礎

通常、ウィジェットを使わずに検索フォームを置きたい場合は
<?php get_search_form(); ?>というテンプレートタグを使います。

default-searchform

これでとりあえず表示できますが、なんかもうちょっと見た目何とかしたい。
そういうときは、テーマファイルに直接formを書きます。

<form action="<?php echo home_url(); ?>" method="get">
  <input type="text" name="s" />
  <input type="submit" value="検索" />
</form>

最低限これだけで検索フォームは動きます。
ポイントは、

  • getメソッドを使う
  • actionにはブログのURLを入れる(URL直書きでも動く)
  • 検索窓のnameを”s”にする

くらいでしょうか。
あとは自分でidやclassをあてたりして、CSSでスタイリングすればいい感じのフォームが作れます。

これは以前に私が実験を兼ねて作った、某堂さんのサイトの検索窓です。

designed-form

今日の本題は、この基本のフォームをカスタマイズして、複数の項目で絞り込み検索させようという作戦です。

2. 通常フォームにカテゴリー、タグでの絞り込み項目を追加する

ここではまず、商品情報を入力するときに

カテゴリー:「焼き菓子」「生菓子」
タグ:果物名(いちご/マンゴー/キウイ etc…)

という感じで管理することにします。
この場合ですと、@kn_ishiwataさんのブログ『webOpixel』の、「WordPressでカテゴリー&タグを絞り込み検索をする」という記事の内容がそのまま使えますのでそちらをご参照ください。

WordPressでカテゴリー&タグを絞り込み検索をする | webOpixel

こちらを参考にもう少し簡素化して、とりあえずこんな感じで書くと…

<form action="<?php echo home_url(); ?>" method="get">
    <ul>
        <li> <?php wp_dropdown_categories(array(
            'show_option_all' => 'すべてのカテゴリーを含む'
        )); ?></li>
        <li> <select name="tag">
            <option value=""> タグを選択</option>
            <?php
            $tags = get_tags();
            foreach ($tags as $tag): ?>
                <option value="<php echo esc_attr($tag->slug); ?>"> <?php echo esc_html($tag->name); ?></option>
            <?php endforeach; ?>
        </select> </li>
       <li> キーワード:<input type="text" value="" name="s" /> </li>
   </ul>
   <input type="submit" value="この内容で検索!" />
</form>

cat-tag-form

こんな感じのフォームに。

ここまでだとそのまんまで芸がないので、もうすこし工夫してみます。

3. 通常フォームにカテゴリー、カスタムタクソノミーでの絞り込み項目を追加する

「カテゴリーとは別に、メインで使ってる果物でも分類したい」という要望を、上掲コードでは投稿タグで管理したのですが、これだとちょっと実際にクライアントに納めるには少し心もとない感じです。
投稿タグって自分で文字を打ってもらわないといけないので、できれば選択肢をあらかじめ用意しておいて、ユーザーにはチェック入れてもらうだけでOKにしたいものです。

それと上記コードでは、get_tags();でタグ情報をとっているのですが
最近だとget_tagsよりはget_termsでしょ!とか、そんな雰囲気もあります。

そこで、「メインで使ってる果物」をカスタムタクソノミーで管理することにしてみます。

カスタムタクソノミーの作り方はいろいろ既出ですが念のためおさらい的に貼っておきます。

functions.phpに追記

//カスタムタクソノミーを作成
function create_mypace_taxonomies() {
     register_taxonomy(
          'fruits', //作成するタクソノミーのスラッグ
          'post', //どの投稿タイプに紐付けるか
          array(
               'hierarchical' =&gt; true, //ツリー型で管理
               'label' =&gt; 'メインで使ってる果物'
          )
     );
}
add_action( 'init', 'create_mypace_taxonomies', 0 );

※create_mypace_taxonomiesという関数名は勝手につけたものなので適宜変更してください。
※念のため、作成した後にパーマリンク設定を空更新してください。404になりますので。

今回はカスタム投稿タイプは作ってないので、通常の投稿(post)に紐づけてあります。
果物を1つしか選択させたくない、などタクソノミーのカスタマイズは@jim912さんの『タクソノミーの使い勝手を劇的に向上させるWordPressプラグイン PS Taxonomy Expander』あたりを活用していい感じにしてください。

上記の絞り込み検索フォームを、get_termsを使って書き直すとこんな感じでしょうか。

<form action="<?php echo home_url(); ?>" method="get">
    <ul>
        <li> <?php wp_dropdown_categories(array(
            'show_option_all' => 'すべてのカテゴリー'
        )); ?></li>
        <li> <select name="fruits">
            <option value=""> メインで使ってる果物を選択</option>
            <?php
            $terms = get_terms('fruits');
            foreach ($terms as $term): ?>
                <option value="<?php echo esc_attr($term->slug); ?>"> <?php echo esc_html($term->name); ?></option>
            <?php endforeach; ?>
        </select> </li>
       <li> キーワード:<input type="text" value="" name="s" /> </li>
   </ul>
   <input type="submit" value="この内容で検索!" />
</form>

cat-tax-form

※selectボックスのnameをカスタムタクソノミーのスラッグ名にしておきます。

なんならラジオボタンにしてもいいですね。

<form action="<?php echo home_url(); ?>" method="get">
    <dl>
        <dt> カテゴリー</dt>
             <dd> <?php wp_dropdown_categories(array(
                 'show_option_all' => 'すべてのカテゴリー'
             )); ?></dd>
        <dt> メインで使ってる果物</dt>
             <dd> <?php
                 $terms = get_terms('fruits');
                 foreach ($terms as $term): ?>
                 <label> <input type="radio" name="fruits" value="<?php echo esc_attr($term->slug); ?>"> <?php echo esc_html($term->name); ?></label>
                 <?php endforeach; ?>
             </select> </dd>
       <dt> キーワード</dt>
                 <dd> <input type="text" value="" name="s" /> </dd>
   </dl>
   <input type="submit" value="この内容で検索!" />
</form>

cat-tax-form02

とりあえずこんな感じで最低限の絞り込みは実装できました。

ケーキ屋さんくらいの規模のサイトであればこの程度でよいのでしょうが、もっと本格的なポータルサイト的なものを作るとなると、
タグやタクソノミーをcheckboxで複数選択させたかったり、カスタムフィールドで管理したかったり、検索結果の表示にもこだわりたかったりするのでしょうが、
力尽きたので今回はとりあえずここまで。

おまけ

なにげに気になっているのが、有償ですが『WordPress用絞り込み検索プラグイン「FE Advanced Search」』というプラグイン。
デモ画面を拝見しましたが、UIも直感的でわかりやすく、よくできてるなぁと感じました。
現状、ちゃんとメンテされていてサポートもしてくれるようなので、自分の勉強がてら購入して研究してみてもいいかな…と思っていたりします。

コメント / トラックバック 6 件

:イブ| 2013/04/25 07:27

はじめまして

「WordPress標準の検索フォームを使って、カスタムタクソノミーを使った簡易的な絞り込み検索をつけるメモ」大変参考になりました。
いい記事を公開してもらいありがとうございます。

ちなみにこの方法で単純にinput type=”checkbox”にかえて検索してみたんですが、チェックした項目すべてを含んだ検索にならずに困っています。

何かいい方法があればと思いコメントさせていただきました。

:mypacecreator| 2013/04/26 18:02

コメントありがとうございます。
私が調べた限りでは、複数の値を扱う場合、単純にcheckboxにするだけではダメです。
私もあれから試してないので、以前参考にさせていただいた記事のURLだけ貼っておきますね。

■WordPressのサイト内検索の検索条件をカスタマイズする | webOpixel
http://www.webopixel.net/wordpress/584.html

■複数キーワードと複数カテゴリーで絞り込み 1 | web制作メモおよび独り言, 最近の仕事など | WordPressでホームページ制作 太陽ブログ
http://web-taiyo.com/works/120528.html

:イブ| 2013/04/26 21:23

早速の返信ありがとうございます。

色々試してはいるんですが(^^;難しいですね。

とりあえず教えていただいたサイトを見て再度勉強してみます。

ありがとうございました。

:イブ| 2013/05/09 07:33

この前はお答えいただき誠にありがとうございました。
チェックボックスの絞込みはどうにか出来るようになりました。

ドロップダウンを含めた絞り込み検索は実に素晴らしく簡単に出来たんですが、ドロップボックスでカテゴリーを選択した場合、選択したカテゴリーが選択された状態にしておきたいんですが、仕方が分からず悩んでいます(^^;

とりあえずWordPressの「Function Reference/selected」
http://codex.wordpress.org/Function_Reference/selected
をみて色々試してはいるんですが、ここで紹介している方法+echo ‘selected=”selected”を使えるようにしたいんですが・・・

何かいい方法はないでしょうか?

質問するばかりすみません(^^;

:mypacecreator| 2013/06/03 14:47

イブ様

お返事が遅くなりましてすみません。
現在、本業のほうが多忙でして、記事に掲載した以上の内容のカスタマイズを検証している時間がとれないため、お急ぎであればWordPress Forumの方で質問してみてはいかがでしょうか。

wpの検索システムを使う | ネットアンサー備忘録2016/01/09 23:56

[…] Web Design Leaves 複数キーワードと複数カテゴリーで絞り込み 1 マイペースクリエイターの覚え書き WordPressの検索機能をもっと使いやすくする Web PXCEL […]

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。3年近く経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索