KumaTechLab
2020-10-18/2023-05-23

検索用フォームを複数設置する方法

検索用フォームを複数設置する方法

WordPressで検索用のフォームを作成する方法

WordPressで検索用のフォームを複数設置する方法

について紹介していきます。

WordPressのデフォルトの検索では大抵検索窓に単語を打ち込むタイプです。

ウィジェットにもあるのでサイトに使用使用している人も多いと思います。

でも、通常の検索窓では対応できないものもあると思います。

カテゴリーのチェックボックスが欲しい場合

タグから選んでもらいたい場合

カスタムフィールドの値から選んでもらいたい、絞り込みたい場合

などいろいろな場合があると思います。

カスタム投稿タイプを利用している人では特に多いかもしれません。

そこで検索用フォームの作成方法と設置方法について紹介します。

検索フォームの作成

検索フォームのデフォルトは「searchform.php」というテンプレートファイルです。

このファイルを編集してフォームを作成することも可能です。

通常の検索窓の検索フォームも利用するかもしれませんので、今回は新しいファイルを作成します。

今回は「searhform-example.php」というファイルとします。

WordPressのフォーム作成は通常PHPで作成する場合と変わりなく作成できます。

気を付ける点としては「name=”s”」という要素を必要としますので、使わない場合でも「type=”hidden”」にして付け加える必要があります。

<form method="get" id="searchform-example" class="searchform" action="<?php echo home_url( '/' ); ?>">
    <input type="hidden" id="s" name="s">
    <input type="hidden" name="search_type" value="category">
    <div>
    	<h3>カテゴリー検索</h3>
    	<label><input type="checkbox" name="check[]" value="cat1">カテゴリー１</label>
    	<label><input type="checkbox" name="check[]" value="cat2">カテゴリー2</label>
    	<label><input type="checkbox" name="check[]" value="cat3">カテゴリー3</label>
    </div>
</form>

こんな形になります。

チェックボックスを使用する場合は「check[]」のようにすると取得する際に配列で取得できるので簡単ですよ。

検索フォームの使用

検索フォームを使用するのは簡単です。

フォームを挿入したい個所で「get_template_part」で挿入することができます。

get_template_part( 'search-example' );

固定ページや投稿、アーカイブページを表示するテンプレートに記載して使用しましょう。

検索フォーム用のページを作成したい場合は、固定ページのスラッグ対応のテンプレートを作成し、上記コードを差し込むのがおすすめです。

例）

固定ページパーマリンク「test」

新規テンプレート作成「page-test.php」

<?php get_header(); ?>
    <main>
        get_template_part( 'search-example' );
    </main>
    <?php get_sidebar(); ?>
<?php get_footer(); ?>

簡単に書くとこのような形です。

ウィジェットとして作成するのも良いと思います。

ウィジェットの作り方は「ウィジェットの作成方法」の記事を参考にしてください。

複数の検索フォームを設置する場合

複数の検索フォームを設置する場合も上記のように行うことで設置可能です。

悩むところは検索結果の表示ではないでしょうか。

上記のようにして作成した検索結果は「search.php」を使用して表示されます。

そのため、基本的な表示形式が変わらない場合、「search.php」で条件分岐を使用して対処していくと良いです。

上の「searchform-example.php」の例だと

$type = isset( $_GET['search_type'] ) ? $_GET['search_type'] : '';
//$type = filter_input( INPUT_GET, 'search_type' );
switch ( $type ) {

「searchform-example.php」に「seach_type」をhiddenで設置しておき、その値に応じて処理を切り替えています。

これでは対応できないときもあると思います。

検索フォームに対応した検索結果表示ページが欲しい場合です。

その場合は使用するテンプレートの変更を行って対処します。

「searchform-example.php」に対応した検索結果用テンプレートを「search-example.php」とします。

「search.php」でなく「seacrch-example.php」に飛ぶようにすればよいわけです。

WordPressにはテンプレート変更用のフィルターフックがあります。

add_filter(  'template_include', 'テンプレート名');

このフックで変更します。

functions.phpなどに以下を記載します。

add_action( 'template_include', 'my_search_template' );
function my_search_template( $template ) {
    $type = filter_input( INPUT_GET, 'search_type' );
    $new_template = '';
    if( $type ) {
        switch ( $type ) {
            case 'category':
                $new_template = STTYLESHEETPATH. '/seach-example.php';
                break;
            case 'taxonomy':
                $new_template = '';
                break;
            default:
               $new_template = '';
        }
   }
   
   if( $new_template ) {
       if( file_exists( $new_template ) ) {
          return $new_template;
       }
   }


   return $template;
}

GETで「search_type」が送られてきた場合指定のテンプレートに変更することができます。

これで、フォーム : 表示 = 1 : 1 の場合でも対応することが可能です。

まとめ

検索フォームの作成や、設置、検索結果の調整などについて理解できたと思います。

検索フォームでは「name=”s”」には気を付けておきましょう。

検索結果は実装したい形に応じてテンプレートから切り替えを行っていくのか、それともクエリの変更だけを行うのかなど検討してみてください。

2020 KumaTechLab.