WordPressの検索フォームのカスタマイズ！カスタムタクソノミーを検索条件に追加する方法

Contents

WordPressの検索フォームをカスタマイズしよう

WordPressの検索フォームはキーワードを入力するテキストボックスと、検索を実行する検索ボタンで構成されています。

この検索フォームにカスタムタクソノミーを指定する方法をご紹介します。

検索条件にカスタムタクソノミーを追加しよう

以下の順序で検索フォームをカスタマイズしていきます。

searchform.php をテーマフォルダに追加
searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置
検索ボックスを呼び出し

1.searchform.php をテーマフォルダに追加しよう

まずやることは、searchform.phpというファイルをテーマフォルダ内に追加することから始めます。

中身は取り敢えず空で大丈夫です。

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

searchform.php をエディタで開いて以下のように書き換えます。

タクソノミースラッグ（以下例だとpref）をご自身のサイトに付け加えてあげてください。

<?php
/* 
 * 検索ボックスのカスタマイズ
 *   カスタムタクソノミーを検索条件に追加する
 */
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">検索キーワード</span>
        <input type="search" class="search-field" placeholder="キーワードを入力" value="<?php echo get_search_query() ?>" name="s" />
    </label>
    <label>
        <span class="screen-reader-text">都道府県で絞り込み</span>
        <?php
            $selected = get_query_var("pref",0);
            $args = array(
                        'show_option_all' => '都道府県で絞り込み',
                        'taxonomy'    => 'pref',
                        'name'        => 'pref',
                        'value_field' => 'slug',
                        'hide_empty'  => 1,
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>
    <input type="submit" class="search-submit" value="検索" />
</form>

<?php

* 検索ボックスのカスタマイズ

* カスタムタクソノミーを検索条件に追加する

<label>

<span class="screen-reader-text">検索キーワード</span>

</label>

<label>

<span class="screen-reader-text">都道府県で絞り込み</span>

<?php

$selected = get_query_var("pref",0);

$args = array(

'show_option_all' => '都道府県で絞り込み',

'taxonomy' => 'pref',

'name' => 'pref',

'value_field' => 'slug',

'hide_empty' => 1,

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

</form>

2-1. カスタムタクソノミーを複数設置したい場合

以下部分をコピーして、formタグ内に追加することで、複数のカスタムタクソノミーからのAND条件検索も行えます。

●●●・・・タクソノミーラベル（例：都道府県）
■■■・・・タクソノミーの名前[半角英数]（例：pref）

  <label>
        <span class="screen-reader-text">●●●で絞り込み</span>
        <?php
            $selected = get_query_var("■■■",0);   // 選択状態となるタクソノミースラッグを取得
            $args = array(
                        'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）
                        'taxonomy'    => '■■■',   // タクソノミーの名前
                        'name'        => '■■■',   // タクソノミーの名前
                        'value_field' => 'slug',   // タクソノミーのスラッグをセレクトボックスのオプションに設定する
                        'hide_empty'  => 1,        // 空のタクソノミーは非表示(0にすると表示)
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>

<label>

<span class="screen-reader-text">●●●で絞り込み</span>

<?php

$selected = get_query_var("■■■",0); // 選択状態となるタクソノミースラッグを取得

$args = array(

'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）

'taxonomy' => '■■■', // タクソノミーの名前

'name' => '■■■', // タクソノミーの名前

'value_field' => 'slug', // タクソノミーのスラッグをセレクトボックスのオプションに設定する

'hide_empty' => 1, // 空のタクソノミーは非表示(0にすると表示)

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

3. カスタマイズした検索ボックスを呼び出し

検索ボックスを表示させたい箇所のテンプレート（sidebar.php等）に以下のコードを記載します。

<?php get_search_form(); ?>

1	<?php get_search_form(); ?>

これでカスタマイズした検索ボックスが表示されるはずです。

CSSの調整等はよしなにしてくださいませ。

まとめ

結構簡単に検索条件にタクソノミーを追加できた！

その他にも、特定の日付範囲内の記事を検索する。とかもやろうと思えば出来ます。その場合、上記以外にも修正が必要です。それはまた気が向いたら追記しようかな。

「WordPressの検索フォームのカスタマイズ！カスタムタクソノミーを検索条件に追加する方法」への2件のフィードバック

はじめまして。記事とても参考になっています。ありがとうございます。
質問があってコメントさせていただきました。以下のカスタマイズは可能でしょうか？

・カスタムタクソノミの絞り込み検索をチェックボックスで複数選択可能にする。まではできるのですが、いかんせん項目数が多いので、サイドバーを２列に、出来ればウィジェットを通して、右サイドバーにはタクソノミの1.2.3のみの検索フォームを、左サイドバーにはタクソノミの4.5.6のみの検索フォームを表示、検索結果は1.2.3.4.5.6.全てを反映させる

というものです。調べた感じだと、「検索」のプログラムは普通一本しか適応できないですよね、searchform.phpを、 searchform2.php のようにファイルを増やし、どこかのプログラムから呼び出すようなことはできないんでしょうか。

よろしければお伺いしたいです。

返信

ともぞさん、ご質問ありがとうございます。
複数種類の検索フォームをウィジェットに表示する方法は色々とあり、ひとつの実現案として、ショートコード使う方法があります。
簡単なプログラムを後述していますので参考にしてみてください。

ただ、検索ボタンを押した際に、全検索フォームの項目（タクソノミー1.2.3.4.5.6.）を検索対象にするのはちょっと大変かもしれません。
もしやるとするならば、

１：表示していない項目の設定フィールド（タクソノミーの1.2.3のフォームであれば、表示していない項目のタクソノミー4.5.6.）を各フォームに予めhiddenフィールドとして設けておく。

２：どれかのフォームの値が変更されたら、別のフォームのhiddenフィールドに選択値を反映させる処理をjavascript等で書いてあげる。

この処理が出来れば、どちらの検索ボタンを押されても検索対象として、タクソノミー1.2.3.4.5.6.が含まれる結果が表示されると思います。
この部分の具体的なプログラムはご自身でご検討頂ければ幸いです。

■検索フォーム表示用ショートコードを作成して、テキストテキストウィジェットからショートコードを呼び出す処理
(それっぽくプログラムを書いていますが動作未検証ですので予めご了承ください。)

テーマのfunctions.phpに以下の２つのプログラムを記述します。
CODEXのURLを記載しておりますので、そちらも合わせてご参照くださいませ。

１：テキストウィジェットでショートコードを実行するためのおまじない
参考URL: http://wpdocs.osdn.jp/関数リファレンス/do_shortcode

add_filter( 'widget_text', 'do_shortcode' );

1	add_filter( 'widget_text', 'do_shortcode' );

２：検索フォーム表示処理
参考URL:https://wpdocs.osdn.jp/ショートコード_API

function show_search_form_func( $atts ) {
    $a = shortcode_atts( array(
        'form_no' => '1'
    ), $atts );    
    $html = "";
    switch ($a["form_no"]) {
    case "1":
        $html = "検索フォーム1のHTMLを構築する処理をここに書く";
        break;
    case "2":
        $html = "検索フォーム2のHTMLを構築する処理をここに書く";
        break;
    default:
        break;
    }
    return $html;
}
add_shortcode( 'show_search_form', 'show_search_form_func' );

function show_search_form_func( $atts ) {

$a = shortcode_atts( array(

'form_no' => '1'

), $atts );

$html = "";

switch ($a["form_no"]) {

case "1":

$html = "検索フォーム1のHTMLを構築する処理をここに書く";

break;

case "2":

$html = "検索フォーム2のHTMLを構築する処理をここに書く";

break;

default:

break;

}

return $html;

}

add_shortcode( 'show_search_form', 'show_search_form_func' );

上記のように処理を書いたら、サイドバーにテキストウィジェットを配置して、以下のようにショートコードを記述します。

左サイドバーに表示する検索フォームショートコード

[show_search_form form_no="1"]

1	[show_search_form form_no="1"]

右サイドバーに表示する検索フォームショートコード

[show_search_form form_no="2"]

1	[show_search_form form_no="2"]

このようにすることで、異なる検索フォームを別の位置に表示ができます。

返信

WordPressの検索フォームをカスタマイズしよう

検索条件にカスタムタクソノミーを追加しよう

1.searchform.php をテーマフォルダに追加しよう

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

2-1. カスタムタクソノミーを複数設置したい場合

3. カスタマイズした検索ボックスを呼び出し

まとめ

「WordPressの検索フォームのカスタマイズ！カスタムタクソノミーを検索条件に追加する方法」への2件のフィードバック

コメントを残すコメントをキャンセル