WPプラグインなし。カテゴリ―とタグで絞り込みできるサイト内検索窓の作り方

当サイトは創作絵本サイトですが、絵本と全く関係ないブログ記事も書いています。

WordPressのデフォルトのサイト内検索窓を設置していたのですが、絵本を探したい人がこの検索窓を使うとブログ記事がヒットしたりして、非常に使い辛いだろうと常々思っておりました・・・。

絞り込み検索ができるプラグインもありますが、少々複雑な条件で絞り込みをしたかったので、自作に挑戦してみました。

目次

1 検索窓を作るために必要な知識
2 searchform.phpに書く内容
3 検索窓を複数パターン作る方法
4 ショートコードで検索窓を好きな場所に呼び出す
5 結局、Googleカスタム検索を使うことに・・・。
6 最後に


検索窓を作るために必要な知識

私もまだまだ初心者なので偉そうなことは言えませんが(笑)、この記事はある程度カスタマイズに慣れている人向けです。今回やることは、一言で言うとsearchform.phpというファイルを書き換える作業です。

頑張ってファイルを書き換えても、テーマの更新があるとカスタマイズが上書きされてしまうため、子テーマを作っていることが望ましいです。

なので、1.子テーマを作れる(既に作っている)2.子テーマ用searchform.phpファイルを作れるだけの知識が必要になります。

子テーマについては私も記事に書いています。ロリポップ&テーマSelaバージョンですが、ご参考にどうぞ。

searchform.phpに書く内容

検索窓のスタイルを決めるのが、「searchform.php」というファイルです。テーマによっては無い場合があります。親テーマに無くても、子テーマフォルダ内に新規で作って大丈夫です。

 

カテゴリ―のみを絞り込むコード

<div id="search">
<form method="get" action="<?php bloginfo( 'url' ); ?>">
 <input name="s" id="s" type="text" placeholder="キーワード" />
 <?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=カテゴリー選択&include=119,118,147'); ?>
 <?php $tags = get_tags(); if ( $tags ) : ?>
 <?php endif; ?>
 <input id="submit" type="submit" value="検索" />
</form>
</div>

このコードを作るのに参考にさせていただいたサイトはこちら。

 

自分用にアレンジしています。いくつかポイントをご説明します。

icon-check placeholder=”キーワード”」→キーワードを別の言葉に変えてもOK。検索窓の枠内に表示される文字です。

icon-check show_option_all=カテゴリー選択」→カテゴリ―選択もお好きな言葉に変更できます。「show_option_all」の意味はややこしいので説明は割愛。

icon-check カテゴリ―選択の文字の後に「&include=119,118,147′」と書いています。カテゴリーID119、118、147だけを含める、という意味です。カテゴリ―IDの調べ方は割愛。

 icon-lightbulb-o 親カテゴリーと子カテゴリーを作っており、子カテゴリーまでプルダウンに含めると多すぎるため、「include」の後に書いているID番号のカテゴリーのみ表示できるようになっています。

すべてのカテゴリーを表示させていい場合は、「&include=・・・’」の部分を削除します。

「include」を「exclude」に書き換えると、指定したID番号のカテゴリーをプルダウンから除外できます。

 

このコードでできた検索窓がこちら。

▼カテゴリ―を絞り込める検索窓▼

 

カテゴリ―とタグを絞り込むコード

<div id="search">
 <div>キーワード</div>
<form method="get" action="<?php bloginfo( 'url' ); ?>">
 <input name="s" id="s" type="text" placeholder="例)形 色" />
&nbsp;
 <div>カテゴリ</div>
 <?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&exclude_tree=119,152&exclude=118'); ?>&nbsp;
&nbsp;
 <div>タグ</div>
 <div>
<?php $tags = get_tags('include=19,18,16,20,42,81,146,135,49,22,137,24,32,30,40,37,34,31'); if ( $tags ) : ?>
<?php
 $checkboxes = '';
 foreach($tags as $tag) :
 $checkboxes .='<input type="checkbox" name="tag[]" value="'.$tag -> slug.'" id="tag-'.$tag->tag_id.'" /><label for="tag-'.$tag->tag_id.'">'.$tag->name.'</label>'.'&nbsp;';
 endforeach;
 print $checkboxes;
 ?>
 </div>
 <div>
 <select name="and-or" id="select-and-or">
 <option value="OR">いずれかのタグを含む</option>
 <option value="AND">チェックした全てのタグを含む</option>
 </select>
 &nbsp;
 <?php endif; ?>
 <input id="submit" type="submit" value="検索" /></div>
</form>
</div>

このコードを作るのに参考にさせていただいたサイトはこちら。

 

ちょっと絞り込みの条件を色々追加しています。

icon-check <div>カテゴリ</div>の1行下、「exclude」で表示させないカテゴリ―を指定しています。

 icon-lightbulb-o 「exclude_tree」または「include_tree」で階層のあるカテゴリーで親カテゴリ―と親カテゴリーの属するすべての子カテゴリ―を対象にできます。

私は「exclude_tree=119,152&exclude=118」と書いていますが、119の親カテゴリーと119に属する子カテゴリー、152の親カテゴリーと152に属する子カテゴリ―、118カテゴリーを除く、という事になります。

icon-check <div>タグ</div>の2行下、「get_tags(‘include=数字,数字,数字’);」となっています。「include」で表示させたいタグを指定しています。数字の部分にタグのID番号を入れます。

 icon-lightbulb-o 「include」を使うか「exclude」を使うかは、全体のカテゴリ―数、タグ数に対し、表示させたい/させたくないものが何個あるかによって使い分ければいいと思います。

icon-check 「いずれかのタグを含む/チェックしたすべてのタグを含む」を選択するプルダウンは、参考サイトにあったものです。不要な場合は、「<select name=”and-or” id=”select-and-or”>~</select>」の部分を削除すればOK。

 

このコードでできた検索窓がこちら。

▼カテゴリ―とタグを絞り込める検索窓▼

 

検索窓を複数パターン作る方法

絞り込み検索できる検索窓を2パターンご紹介しました。

ところで、searchform.phpは一つしかないのに、なぜ違うパターンを作れたのか疑問に思う方もいらっしゃるかもしれません。

実は、最初にご紹介したのは「searchform1.php」、次にご紹介したのは「searchform2.php」という名前で子テーマにファイルを作ってみました。

ウィジェットで使える検索窓はデフォルトのままで、絞り込み検索機能はありません。

▼デフォルトの検索窓▼

 

これはこのまま残したかったので、3パターンの検索窓が使える状態になりました。

使用するテーマによっては上手く行かないこともあるかもしれませんが、検索窓を何パターンか作ってみたい方はお試しください。

ショートコードで検索窓を好きな場所に呼び出す

先ほどから記事中にペタペタと検索窓を貼り付けていますが、これはfunctions.phpにショートコードを追加して呼び出しています。

デフォルトの検索窓用ショートコード

add_shortcode('search_form', function() {add_shortcode('search_form', function() { return get_search_form(false);});

これをそのままfunctions.phpの一番下に追記しました。「add_shortcode(‘search_form‘」このsearch_formがショートコードになります。この文字列を半角カッコ[]で囲むと、好きな場所に検索窓を設置できます!

 

searchform1.phpの検索窓用ショートコード

function searchform1_original() {
 ob_start(); 
 get_template_part('searchform1');
 return ob_get_clean();
}
add_shortcode('searchform1', 'searchform1_original');

デフォルトの検索窓用の記述とは少々違いますが、このようにfunctions.phpに追記しました。ショートコードに使う文字列はsearchform1です。同様に[]で囲みます。

 

searchform2.phpの検索窓用ショートコード

function searchform2_original() {
 ob_start(); 
 get_template_part('searchform2');
 return ob_get_clean();
}
add_shortcode('searchform2', 'searchform2_original');

searchform1.phpの方と基本的に一緒です。1を2に変えただけです。ショートコードに使う文字列はsearchform2、同様に[]で囲みます。

 

ウィジェットでもショートコードを使うには

記事中にはショートコードが使えますが、ウィジェットでは実は使えません。でも、functions.phpに以下のコードを追記するだけで、テキストウィジェットでショートコードが使えるようになります。

add_filter('widget_text', 'do_shortcode');

 icon-exclamation-triangle functions.phpは非常に重要なファイルです。記述誤りなどがあると、最悪の場合、サイトが表示されなくなることもあります。編集前には必ずバックアップを取り、慎重に操作してください。また、編集は自己責任でお願いいたします!

結局、Googleカスタム検索を使うことに・・・。

ここまで頑張って作って、紹介記事まで書いて、「えっ?!」となったかもしれません(笑)色々あって、結局サイト内検索にはGoogleカスタム検索を使うことにしました・・・(-“-)その理由はというと。

ワードプレスの検索機能では、文字通りにしか検索ができない事が不満だったんです。

 

Googleカスタム検索は、Googleの優れた検索技術をサイト内検索で使えるんです。「犬」と検索して、「いぬ」でも「イヌ」でも拾ってくれるんです。

でも、ワードプレスの検索では、「犬」と検索して漢字で「犬」と記事内で書いていなければ、検索に引っかからないんですよね。

また、Googleカスタム検索ではサムネイルが表示されるのもありがたい。私の使っているテーマでは、検索結果に画像が表示されないんです。

絵本サイトで検索結果にサムネイルが無いのって、結構マイナスだと思います。

それと、さすがはGoogleという感じなんですが、キーワードから読者が探している記事はこれかな?と思われる記事をちゃんと上の方に表示してくれる。ありがたいです。

 

Googleカスタム検索にもデメリットはあります。それは、記事を公開してからGoogleの検索結果にインデックス(反映)されるまでは、サイト内検索で引っかからないという事。

ただ、私のサイトの場合、検索窓を利用される方はそこまで多くないので、デメリット分を加味してもGoogleカスタム検索を使う方がプラスだと判断しました。

Googleカスタム検索 icon-external-link 

最後に

WordPressでプラグインを使わずに、絞り込み検索できるサイト内検索窓を作る方法をご紹介しました。

私は自分のサイトとの相性から、結局Googleカスタム検索を使うことにしましたが、サイトのタイプによってはこう言ったサイト内検索が合う場合もあると思います。

カスタマイズに慣れている方であれば、コードを貴サイトに合わせてカテゴリ―やタグの表示/非表示を書き換えてコピペするだけなので、ぜひお試しください。

icon-clock-o 2017-11-04 icon-rotate-left  icon-user ちびこママ