サイトマップ(全ページ一覧)

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

ワードプレスのサイト内検索って、絞り込み検索ができなくてちょっと不便ですよね。

絞り込み検索ができるプラグインもいくつかありますが、無料のものだと更新が止まっていたり、扱いづらい・・・といったケースがあります。

プラグインを増やしたくないし、自作の絞り込み検索窓作りにチャレンジしてみました。

テーマによっては上手くいかない場合もあると思いますが、ご参考にどうぞ^^

― スポンサーリンク ―

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

今回やることは、searchform.phpというファイルを書き換える作業です。

ある程度カスタマイズに慣れている人向けになります。

テーマの更新があるとせっかくのカスタマイズが上書きされてしまうため、「子テーマ」を使うことが望ましいです。

なので、

  1. 子テーマを作れる(既に作っている・テーマに備わっている)
  2. 子テーマ用searchform.phpファイルを作れる

このふたつの知識が必要になります。

子テーマってなに?

という方は、今回はプラグインなどをご利用されることをおすすめします。

ごめんなさい><

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=1,2,3'); ?>
 <?php $tags = get_tags(); if ( $tags ) : ?>
 <?php endif; ?>
 <input id="submit" type="submit" value="検索" />
</form>
</div>

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

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

  • placeholder=”キーワード”
    キーワードを別の言葉に変えてOK。検索窓の枠内に表示される文字です。
  • show_option_all=カテゴリー選択
    カテゴリ―選択も好きな言葉に変更できます。

カテゴリ―選択の文字の後に「&include=1,2,3」と書いています。

カテゴリーID1,2,3だけを含める、という意味です。

カテゴリ―IDの調べ方は以下のページをご参照ください。

  • 私は親カテゴリーと子カテゴリーを作っています。
    子カテゴリーまでプルダウンに含めると多すぎるため、「include」の後に書いたID番号のカテゴリーのみ表示できるようになっています。
  • すべてのカテゴリーを表示するなら、「&include=・・・’」の部分を削除します。
  • 「include」を「exclude」に書き換えると、指定したID番号のカテゴリーをプルダウンから除外できます。

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

※GIFアニメーションです。

今は絞り込み検索窓使ってないです・・・ごめんなさい(;;)

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

<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=1,2&exclude=3'); ?>&nbsp;
&nbsp;
 <div>タグ</div>
 <div>
<?php $tags = get_tags('include=1,2,3,4,5'); 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>

このコードを作るのに参考にしたサイトがあったのですが、記事が削除されていました。

 

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

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

「exclude_tree」/「include_tree」で、階層のあるカテゴリーで親子カテゴリーすべてを含む/除外できます。

 

私は「exclude_tree=1,2&exclude=3」と書いています。この場合、

  • ID番号1の親カテゴリーと1に属する子カテゴリー
  • ID番号2の親カテゴリーと2に属する子カテゴリ―
  • ID番号3カテゴリー

を除く、という事になります。

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

「include」と「exclude」のどちらを使うかは、カテゴリー/タグの量よって使い分ければいいと思います。

 

「いずれかのタグを含む/チェックしたすべてのタグを含む」を選択するプルダウンは、参考サイトにあったものです。

不要な場合は「<select name=”and-or” id=”select-and-or”>~</select>」の部分を削除すればOKです。

 

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

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

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

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

実は1つ目は「searchform1.php」、2つ目は「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‘, function()・・・」

このsearch_formがショートコードになります。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、同様に[]で囲みます。

こうです↓

[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、同様に[]で囲みます。

こう↓

[searchform2]

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

記事中にはショートコードが使えますが、通常ウィジェットでは使えません。

が、functions.phpに以下のコードを追記すると、テキストウィジェットでショートコードが使えるようになります。

add_filter('widget_text', 'do_shortcode');

※テーマによっては、何もしなくてもウィジェットでショートコードが使えます。

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

ここまで書いておいてなんですが。

色々あって、結局サイト内検索には、Googleカスタム検索を使うことにしました。

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

 

Googleカスタム検索だと、たとえば「犬」と検索して、「いぬ」でも「イヌ」でも拾ってくれるんです。

これがワードプレスの検索機能ではうまくいかないので・・・。

 

Googleカスタム検索にもデメリットはあります。

記事を公開してからGoogleの検索結果にインデックス(反映)されるまでは、サイト内検索で引っかからないということ。

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

Googleカスタム検索

最後に

ワードプレスでプラグインを使わずに、絞り込み検索窓を作る方法をご紹介しました。

サイトによっては、Googleカスタム検索を使った方がいい場合もあると思います。

自分のサイトに合うやり方で、検索窓を設置してみてください^^

 

最後までお読みいただき、ありがとうございました。

タイトルとURLをコピーしました