自サイトに絞り込み検索窓を実装したので、手順の備忘録です。使用テーマはCocoonです。
プラグイン無し、カテゴリー・タグ対応です。
- 新たに「mysearch.php」というファイルを作ってFTPにアップロード
- 【mysearch】というショートコードを作るためにfunctions.phpに追記
- 好きな場所にショートコードを呼び出し
この3ステップです。
mysearch.phpを作ってFTPにアップロード
- メモ帳で「mysearch」というタイトルのテキストファイルを作る(ファイル名は任意)
- 後述するコードをコピペし、必要な個所を書き換え
- 拡張子を.phpに書き換えて、FTPにアップロード
【アップロード先】
(自サイトのフォルダ)/wp-content/themes/cocoon-child-master(子テーマ)のフォルダ内
すべてのカテゴリーを対象にする(mysearch1.php)
<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=カテゴリー選択'); ?> <?php $tags = get_tags(); if ( $tags ) : ?> <?php endif; ?> <input id="submit" type="submit" value="検索" /> </form>
一部のカテゴリーのみを対象にする(mysearch2.php)
<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>
カテゴリ―IDはCocoonの場合はカテゴリー一覧ページに初めから表示されています。
Cocoon以外のテーマでIDの欄が無い場合の調べ方は以下参照。
このコードはこちらのサイトを参考にさせていただきました。自分用に少しアレンジしています。
すべてのカテゴリーとタグを対象にする(mysearch3.php)
<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'); ?> <div>タグ</div> <div> <?php $tags = get_tags(''); 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>
このコードを作るのに参考にしたサイトがあったのですが、現在は記事が削除されていました。
一部のカテゴリーとタグを対象にする(mysearch4.php)
<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>
「include」/「exclude」のどちらを使うかはカテゴリー/タグの量よって使い分けてください。
ショートコードで呼び出せるようにfunctions.phpに追記
子テーマのfunctions.phpに以下のコードを追記します。
Cocoonの場合、子テーマが最初から用意されているので、ワードプレスの管理画面→外観→テーマファイルエディターを開き、「編集するテーマを選択:Cocoon Child」になっていることを確認の上、「テーマのための関数(functions.php)に貼り付けます。
※バックアップを取った上で自己責任でお願いします。
【mysearch1.php用】
//絞り込み検索ショートコード:すべてのカテゴリー function mysearch1_original() { ob_start(); get_template_part('mysearch1'); return ob_get_clean(); } add_shortcode('mysearch1', 'mysearch1_original');
【mysearch2.php用】
//絞り込み検索ショートコード:一部のカテゴリー function mysearch2_original() { ob_start(); get_template_part('mysearch2'); return ob_get_clean(); } add_shortcode('mysearch2', 'mysearch2_original');
【mysearch3.php用】
//絞り込み検索ショートコード:すべてのカテゴリーとタグ function mysearch3_original() { ob_start(); get_template_part('mysearch3'); return ob_get_clean(); } add_shortcode('mysearch3', 'mysearch3_original');
【mysearch4.php用】
//絞り込み検索ショートコード:一部のカテゴリーとタグ function mysearch4_original() { ob_start(); get_template_part('mysearch4'); return ob_get_clean(); } add_shortcode('mysearch4', 'mysearch4_original');
これで「mysearch1」/「mysearch2」/「mysearch3」/「mysearch4」というショートコードが使えるようになります。
※「」を半角カッコ[]に書き換えてください。
好きなところにショートコードで検索窓を呼び出す
ショートコードが使えるところなら、どこでも検索窓が置けるようになります。
最近のワードプレスのテーマは、大抵デフォルトでウィジェットでもショートコードが使えます。
もし使えない場合は、functions.phpに以下のコードを追記すると使えるようになります。
add_filter('widget_text', 'do_shortcode');
記事中に設置してみるとこのようになります。
【mysearch1】
【mysearch2】
【mysearch3】
【mysearch4】
検索窓の見た目の調整はCSSになります。CSSについては本記事では割愛します。