ワードプレスで絞り込み検索窓を作りショートコードで呼び出す方法（プラグイン無し、カテゴリー・タグ対応）

【2020/2/3更新】

この記事では、以前「searchform.php」を子テーマに作って書き換えて、絞り込み検索窓を作る方法を掲載していました。

ですが、新しいやり方で設置し直したので、記事を修正いたしました。

手順としては、

新たに「mysearch.php」というファイルを作ってFTPにアップロード
【mysearch】というショートコードを作るためにfunctions.phpに追記
好きな場所にショートコードを呼び出し

この3ステップです。

あくまで私のやり方であって備忘録的な記事ですが、ご参考までにどうぞ。

mysearch.phpを作ってFTPにアップロード
1. カテゴリーのみを絞り込む
2. カテゴリーとタグを絞り込むコード
ショートコードで呼び出せるようにfunctions.phpに追記
1. ウィジェットでもショートコードを使うには
好きなところにショートコードで検索窓を呼び出す

mysearch.phpを作ってFTPにアップロード

名前は何でもいいのですが、とりあえず私は「mysearch」にしました。

メモ帳で「mysearch」というタイトルのテキストファイルを作り、このあとにご紹介するコードをコピペし、必要な個所を書き換えます。

拡張子を.phpに書き換えて、FTPにアップロードします。

アップロード先は、wp-content→themes→今使っているテーマのフォルダ内です。

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

まずはカテゴリーのみで絞り込みたい場合。

<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>

今、このサイトのサイドバーにある絞り込み検索窓は、このコードで作っています。

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

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

カテゴリーID1,2,3だけを含めるという意味です。絞り込み検索窓に表示したいカテゴリーIDを調べて、書き換えて使ってください。

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

ワードプレスの投稿ID・固定ページID・カテゴリーID・タグIDの調べ方

ワードプレスでページのIDを調べる方法です。投稿ID、固定ページID、カテゴリーID、タグIDについて書いていますが、基本的に見方はどれも一緒です。

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

このコードはこちらのサイトを参考にさせていただきました。自分用に少しアレンジしています。

超簡単！WordPressに絞り込み検索を設置する方法

キーワード、カテゴリー、タグの中から任意の組み合わせを選択して、該当する投稿だけ...

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

カテゴリーだけでも十分な気がしますが、タグも絞り込みたい場合、例えばこんな感じ。

<div>キーワード</div>
<form method="get" action="<?php bloginfo( 'url' ); ?>">
<input name="s" id="s" type="text" placeholder="例）形　色" />
<div>カテゴリ</div>
<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&exclude_tree=1,2&exclude=3'); ?>   
<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>'.' '; endforeach; print $checkboxes; ?>
</div>
<div>
<select name="and-or" id="select-and-or">
<option value="OR">いずれかのタグを含む</option> <option value="AND">チェックした全てのタグを含む</option>
</select>
<?php endif; ?>
<input id="submit" type="submit" value="検索" />
</div>
</form>

こういう感じのものができるはず・・・です。↓（gifです）

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

でも他のサイトでタグの絞り込み検索の仕方についても書いてある記事を見つけたので、貼っておきます。

【WordPress】プラグインを使わず検索機能に絞り込み機能を実装しよう。

WordPressの検索機能にカテゴリーやタグを指定した絞り込み機能を実装する方法をご紹介します。コピペで簡単に実装できますので、興味のある方は参考にしてください。

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

<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です。

ショートコードで呼び出せるようにfunctions.phpに追記

先ほど作った検索窓を、ショートコードで呼び出せるようにします。

子テーマのfunctions.phpに以下のコードを追記します。

★バックアップをお忘れなくm(_ _)mカスタマイズは自己責任にてお願いいたします。

function mysearch_original() {
  ob_start(); 
  get_template_part('mysearch');
  return ob_get_clean();
 }
 add_shortcode('mysearch', 'mysearch_original');

すると、「mysearch」というショートコードが使えるようになります。

※「」を半角カッコ[]に書き換えてください。

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

最近のワードプレスのテーマでは、大抵デフォルトでウィジェットでもショートコードが使えます。

もし使えない場合は、functions.phpに以下のコードを追記すると使えるようになります。

add_filter('widget_text', 'do_shortcode');

好きなところにショートコードで検索窓を呼び出す

例えば記事中でも。ショートコードが使えるところなら、どこでも検索窓が置けるようになりました。↓

検索窓の見た目は、CSSで調整してね。

【ワードプレス】追加CSSを使ってカスタマイズしてみよう！

ワードプレスの「追加CSS」機能について、動画付きでなるべく分かりやすく解説してみました。カスタマイズをしてみたい方へ。

以上となります。ご参考になりましたら幸いです。