【WordPress】自作の絞り込み検索窓をショートコードで呼び出す

自サイトに絞り込み検索窓を実装したので、手順の備忘録です。使用テーマはCocoonです。

プラグイン無し、カテゴリー・タグ対応です。

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

この3ステップです。

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

1. メモ帳で「mysearch」というタイトルのテキストファイルを作る（ファイル名は任意）
2. 後述するコードをコピペし、必要な個所を書き換え
3. 拡張子を.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については本記事では割愛します。