当サイトは広告収入で運営しています

【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>
2行目「placeholder=”キーワード

検索窓の枠内に表示される文字。「キーワード」を別の言葉に書き換え可

3行目「show_option_all=カテゴリー選択」

「カテゴリ―選択」も好きな言葉に書き換え可

一部のカテゴリーのみを対象にする(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>
4行目 「&include=1,2,3」(ID番号を要書き換え)

カテゴリーID 1,2,3だけを含めるの意。絞り込み検索窓に表示したいカテゴリーIDを調べて書き換えが必要な個所。「include」を「exclude」に書き換えると指定したID番号のカテゴリーをプルダウンから除外できます。

カテゴリ―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> 
6行目 「&exclude_tree=1,2&exclude=3」(ID番号を要書き換え)

「exclude」で表示させないカテゴリーを指定します。
「exclude_tree」/「include_tree」で階層のあるカテゴリーで親子カテゴリーすべてを含む/除外できます。

サンプルのように「exclude_tree=1,2&exclude=3」と書いた場合、

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

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

10行目 「include=1,2,3,4,5」(ID番号を要書き換え)

「include」で表示させたいタグを指定します。カンマで区切ってタグのID番号を入れます。

「include」/「exclude」のどちらを使うかはカテゴリー/タグの量よって使い分けてください。

17~20行目 「<select name=”and-or” id=”select-and-or”>~</select>」

「いずれかのタグを含む/チェックしたすべてのタグを含む」を選択するプルダウン部分です。不要な場合は17~20行目を丸ごと削除します。

ショートコードで呼び出せるように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については本記事では割愛します。

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