WordPress

WordPress｜検索フォームの仕組みとセレクトボックスでの絞り込み検索

WordPressの検索フォームを使って絞り込み検索とかしたいな～とか思ったら、そもそも検索フォームの仕組みを理解していなかったとに気がついたのでまとめてみました。

ここではWordPressのことはある程度、理解しているけど検索フォームの仕組みが分からないという方のために基本的な仕組みと絞り込み検索などのカスタマイズについてお話します。

コンテンツ

検索フォームに関連するテンプレートは２つ

まず、検索フォームに関連するテンプレートは、「search.php」と「searchform.php」があります。

検索結果を表示するページテンプレート：search.php

見出しの通り、search.phpは検索結果を表示させるためのページテンプレートです。検索に該当する記事を表示させるループが入っています。ここではこのテンプレートは扱いません。

検索フォームを実装する：searchform.php

searchform.phpは、検索フォームを作るためのパーツテンプレートです。お使いのテーマに、searchform.phpがないケースはまあまああると思います。

仕組みとしては、searchform.phpというテンプレートがテーマ内に存在しない場合は、ビルトインの（WordPressにもともと備わっている）検索フォームが表示され、searchform.phpが存在する場合は、これが検索フォームとして機能する仕組みになっています。

新規でsearchform.phpを作る場合、どんなコードを書いたら良いか分からないと思いますので、まずはWordPressにもともと備わっている検索フォームのソースコードを参考に組み立てていきましょう。下記がそのコードになります。

HTML4バージョン
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <div>
    <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
    <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
  </div>
</form>
表示イメージ

See the Pen wordpress_search-form01 by kenichi (@ken81) on CodePen.

HTML5バージョン
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
  </label>
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>
表示イメージ

See the Pen wordpress_search-form02 by kenichi (@ken81) on CodePen.

上記のコードは、WordPress Codexを参考にさせていただきました。HTML4とHTML5でどちらを使用したら良いか分からない方は、とりあえずどちらでも不具合はないので適当に選んでいただいて大丈夫です。でも、ここから先の事例ではHTML5バージョンを扱っていきます。

上記のコードを新規作成したsearchform.phpにコピペしてテーマフォルダ内にアップロードします。そして、検索フォームを設置したい場所に下記のコードを記入すると検索フォームが表示されるようになります。

<?php get_search_form(); ?>

とりあえず、ここまでが検索フォームの基本的な仕組みです。

検索対象となる投稿タイプを指定する方法

デフォルトのフォームで検索すると「投稿ページ」「固定ページ」「カスタム投稿タイプ」などすべての投稿が対象になっていまうため、検索結果にはブログや固定ページなどがすべてごっちゃにヒットしてしまいます。

これでは困るという場合は、検索フォームに下記の１行を追加することで特定の投稿のみを指定できます。

<input type="hidden" name="post_type" value="投稿タイプ">

上記の「投稿タイプ」のところで投稿タイプを指定します。普通の投稿ページなら「post」、カスタム投稿タイプの場合はそのスラッグを指定します。（※pageと指定すると固定ページのみの検索になると思ったのですが、そうはならないようです）

具体的には、下記のようにします。
HTML

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
  </label>
  <input type="hidden" name="post_type" value="投稿タイプ">
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

これで検索でヒットさせたい投稿のみを指定することができました。

絞り込み検索を可能にする：wp_dropdown_categories()

wp_dropdown_categories()は、カッコ「()」の中の引数にいろんなパラメータを指定することで、カテゴリやカスタムタクソノミーの絞り込み検索やいろんな条件設定を可能にしてくれる便利な関数です。まずは、基本形から行きましょう。

カテゴリの絞り込み検索フォーム（初期値）

これは基本の検索フォームに<?php wp_dropdown_categories(); ?>を１行追加しただけのものです。

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
    <?php wp_dropdown_categories(); ?>
  </label>
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>
表示イメージ

See the Pen wordpress_search-form03 by kenichi (@ken81) on CodePen.

この一行を追加すると表のページでは、下記のようなセレクトボックスが検索フォームに追加で出力されてカテゴリが選択できるようになります。

<select  name='cat' id='cat' class='postform' >
  <option class="level-0" value="1" selected="selected">未分類</option>
  <option class="level-0" value="2">カテゴリ１</option>
  <option class="level-0" value="3">カテゴリ２</option>
  <option class="level-0" value="4">カテゴリ３</option>
</select>

カテゴリの絞り込み検索フォーム（カテゴリを選択しない場合を追加）

<?php wp_dropdown_categories(); ?>は、そのままだとカテゴリを絞り込みたくないときに選択できる項目が存在しないため、ユーザービリティが悪くなってしまいます。すべてのカテゴリを対象にした検索する項目を追加するには、<?php wp_dropdown_categories(); ?>のところを下記のようにします。

<?php wp_dropdown_categories( 'show_option_all=全てのカテゴリ' ); ?>
表示イメージ

See the Pen wordpress_search-form04 by kenichi (@ken81) on CodePen.

カスタム投稿タイプのタクソノミーを絞り込み検索する方法

絞り込み検索を実装したい方の多くは、投稿タイプのカテゴリよりもカスタム投稿タイプでタクソノミーを絞り込み検索したい方だと思います。

先ほど、wp_dropdown_categories()のカッコ「()」の中にいろんなパラーメータを指定できるという話をしましたが、下記のように指定するとタクソノミーの絞り込みの設定ができます。

<?php
$taxonomy = 'タクソノミー'; //タクソノミーをスラッグで指定
$selected = get_query_var($taxonomy,0);
$args = array(
	'show_option_all' => '指定しない', //何も指定しない場合の表示
	'taxonomy'    => $taxonomy,
	'name'        => $taxonomy,
	'value_field' => 'slug',
	'hide_empty'  => 1, //投稿のないタームを非表示（表示は「0」）
	'selected'    => $selected
);
wp_dropdown_categories($args);
?>

WordPress Codexには他にもいろんな引数が載っているので興味のある方は参考にしてみてください。

先ほどの検索フォームと組み合わせるとこんな形になります。

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
  </label>

  <label>
    <span class="screen-reader-text">◯◯で絞り込み</span>
	  <?php
		$taxonomy = 'タクソノミー'; //タクソノミーをスラッグで指定
		$selected = get_query_var($taxonomy,0);
		$args = array(
			'show_option_all' => '指定しない', //何も指定しない場合の表示
			'taxonomy'    => $taxonomy,
			'name'        => $taxonomy,
			'value_field' => 'slug',
			'hide_empty'  => 1, //投稿のないタームを非表示（表示は「0」）
			'selected'    => $selected
		);
		wp_dropdown_categories($args);
	  ?>
  </label>

  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

複数のタクソノミーから絞り込み検索する方法

複数のタクソノミーを使ってAND検索したい場合は、単純に下記のようにwp_dropdown_categories()を追加していくだけです。

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
  </label>

  <label>
    <span class="screen-reader-text">△△で絞り込み</span>
	  <?php
		$taxonomy = 'タクソノミー１'; //タクソノミーをスラッグで指定
		$selected = get_query_var($taxonomy,0);
		$args = array(
			'show_option_all' => '指定しない', //何も指定しない場合の表示
			'taxonomy'    => $taxonomy,
			'name'        => $taxonomy,
			'value_field' => 'slug',
			'hide_empty'  => 1, //投稿のないタームを非表示（表示は「0」）
			'selected'    => $selected
		);
		wp_dropdown_categories($args);
	  ?>
  </label>

  <label>
    <span class="screen-reader-text">◯◯で絞り込み</span>
	  <?php
		$taxonomy = 'タクソノミー２'; //タクソノミーをスラッグで指定
		$selected = get_query_var($taxonomy,0);
		$args = array(
			'show_option_all' => '指定しない', //何も指定しない場合の表示
			'taxonomy'    => $taxonomy,
			'name'        => $taxonomy,
			'value_field' => 'slug',
			'hide_empty'  => 1, //投稿のないタームを非表示（表示は「0」）
			'selected'    => $selected
		);
		wp_dropdown_categories($args);
	  ?>
  </label>

  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

以上が、検索フォームの仕組みと絞り込み検索の方法でした。

最近の記事

  1. 2023.03.8

    クリックでYouTube動画をポップアップ再生させ…

    WordPress内でリンクをクリックしたらYouTube動画がポップアップさ…

  2. 2020.11.22

    Photoshop｜写真の境界線をボカす方法

    Photoshop｜写真の境界線をボカす方法以前、こちらの記事…

  3. 2020.11.22

    Illustrator｜筆で描いた文字をパスに変え…

    Illustrator｜筆で描いた文字をパスに変える方法ここでは筆で書…

  4. 2020.11.8

    Illustrator｜ポカポカ温かい文字の作り方…

    ここでは、Illustratorを使ってこんな感じの温かい文字を作る方…

  5. 2020.09.14

    Illustrator｜同じ色を一括で変換したい

    Illustratorで同じ色をいろんなオブジェクトで使用している場合、色の変更…

  1. CSS

    レスポンシブウェブデザインの基本｜メディアクリエリの設定

  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…

  3. CSS

    CSS｜中央寄せが効かないときは・・・

  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方

  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP