複数条件付き検索が可能になる Search & Filter というプラグインが便利だと昨日紹介したんですが、この記事ではさらにデザインや表示を変える方法を紹介していきたいと思います。
[say name=”” img=”https://bryog.com/wp-content/uploads/vodman1.jpg” ]プラグインを有効にするだけで使えたんだけど、そのままだとなんだかね…[/say]
[say]そのままだと「検索項目」が横並びになっているし、ドロップダウン以外の方法でも表示したいよね。[/say]
素晴らしいプラグインだからこそ使いたいけど、設定などから簡単にデザインを変えられないあたりが Search & Filter のちょっとしたデメリットかもしれないですね。
でも、CSS を追加したりショートコードに項目を増やしたりすることでデザインを変えられます。
Search & Filter の検索を縦並びにする方法
プラグインを有効にしただけでは横並びになっているので、サイトのデザイン的には縦並びにしたい場合もありますよね。
そんな時は、下記のコードを CSS にコピペして追加しちゃいましょう。
すると、基本のショートコードをイジっていなければ、上から「検索」「カテゴリー」「タグ」の順番で表示されるはずです。
ラジオボタンやチェックボックに変更する
デフォルトではドロップダウン形式になるのですが、ラジオボタンやチェックボックスにすることができます。
これは CSS を使わず、基本のショーコードに追加していくだけです。
まずは、基本のショートコードから。
[box class=”box3″]
[searchandfilter fields=”search,category,post_tag”]
[/box]
基本のショートコードと見比べながら、どのように追加してけば良いのか分かると思います。
ラジオボタンにする
ラジオボタンといえば、こんな感じのものになりますよね。
はい いいえ
ドロップダウンだと、開いてみないと全ての項目を確認することができないんですよね。そのため、全体像を先に見せたい場合や選択肢が少ない場合には、ラジオボタンにすると良いでしょう。
ラジオボタンにするには、下記を追加します。
[box class=”box3″]
types=”,radio,radio”
[/box]
「,」から始まる理由は、普通の「検索窓」はラジオボタンにしないので空欄にしているためです。
基本のショートコードが「検索窓 → カテゴリー → タグ」の順番になっているので、ラジオボタンをしたい場所にだけ、「radio」と追加してあげてください。
基本のショートコードに、カテゴリーとタグをラジオボタンにした場合にはこのようになります。
[box class=”box3″]
[searchandfilter fields=”search,category,post_tag” types=”,radio,radio”]
[/box]
チェックボックスにする
チェックボックスといえば、こんな感じのものになりますね。
良い 普通 悪い
ラジオボックスとの違いは、チェックボックスだと複数選択ができるということ。１つだけに絞るのではなく、いくつかの選択肢から複合的に検索できるようになるわけです。
そのため、ユーザーが色々な組み合わせで検索したくなるようなサイト内容であれば、チェックボックスにした方がユーザビリティが向上すると思います。
チェックボックを追加するには、下記を追加します。
[box class=”box3″]
types=”,checkbox,checkbox”
[/box]
基本的な概要はラジオボタンと同じで、一番最初の「,」の前は空欄となっています。
基本のショートコードに、カテゴリーとタグをラジをチェックボタンにした場合にはこのようになります。
[box class=”box3″]
[searchandfilter fields=”search,category,post_tag” types=”,checkbox,checkbox”]
[/box]
階層をつけたい時
基本のショートコードでは、階層に関わらず全てが同列で項目が表示されます。そうすると、せっかく大きなくくりで設定してあるカテゴリーやサブカテゴリーの見分けがつかなくなってしまうんですよね。
そんな階層が分かるように表示したい場合は、下記の追加します。
[box class=”box3″]
hierarchical=”,1″
[/box]
もし基本のショートコードに対して、タグは階層をつけなくないという場合には、「,」をつけずに何も入力しなくても大丈夫です。
基本のショートコードに、カテゴリーにだけ階層をつけた場合にはこのようになります。
[box class=”box3″]
[searchandfilter fields=”search,category,post_tag” types=”,checkbox,checkbox” hierarchical=”,1″]
[/box]
さいごに
Search & Filter はショートコードをいじったり、CSS を使ったりしないといけないので、人によって好き嫌いが分かれるかもしれないプラグインですね。
でもここまで便利なプラグインもなかなかないので、個人的にはとても重宝させてもらってます。
通販サイトまではいかないとしても、ユーザーが様々な検索条件で探せるようにしたい場合は、ぜひ Search & Filter を活用してみてくださいね。
