【2020/2/3更新】
この記事では、以前「searchform.php」を子テーマに作って書き換えて、絞り込み検索窓を作る方法を掲載していました。
ですが、新しいやり方で設置し直したので、記事を修正いたしました。
手順としては、
- 新たに「mysearch.php」というファイルを作ってFTPにアップロード
- 【mysearch】というショートコードを作るためにfunctions.phpに追記
- 好きな場所にショートコードを呼び出し
この3ステップです。
あくまで私のやり方であって備忘録的な記事ですが、ご参考までにどうぞ。
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の調べ方は以下のページをご参照ください。
- 私は親カテゴリーと子カテゴリーを作っています。
子カテゴリーまでプルダウンに含めると多すぎるため、「include」の後に書いたID番号のカテゴリーのみ表示できるようになっています。 - すべてのカテゴリーを表示するなら、「&include=・・・’」の部分を削除します。
- 「include」を「exclude」に書き換えると、指定したID番号のカテゴリーをプルダウンから除外できます。
このコードはこちらのサイトを参考にさせていただきました。自分用に少しアレンジしています。
カテゴリーとタグを絞り込むコード
カテゴリーだけでも十分な気がしますが、タグも絞り込みたい場合、例えばこんな感じ。
<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です）
このコードを作るのに参考にしたサイトがあったのですが、現在は残念ながら記事が削除されていました。
でも他のサイトでタグの絞り込み検索の仕方についても書いてある記事を見つけたので、貼っておきます。
私の場合、絞り込みの条件を色々追加しています。
<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で調整してね。
以上となります。ご参考になりましたら幸いです。