WordPress

WP_Queryを使ったタクソノミーのチェックボックス絞り込み検索フォームの作り方

ここでは、プラグインを使わずにタクソノミーのチェックボックスを使った絞り込み検索の作り方についてお話します。はじめにお断りしておきますが、検索結果ページでのページネーションについてはここでは触れませんのでご了承ください。

ちなみにチェックボックスではなく、セレクトボックスによる絞り込み検索の方法については下記で詳しくお話しています。

WordPress｜検索フォームの仕組みとセレクトボックスでの絞り込み検索
2018.08.29
WordPress｜検索フォームの仕組みとセレクトボックスでの絞り込み検索
WordPressの検索フォームを使って絞り込み検索とかしたいな～とか思ったら、そもそも検索フォームの仕組みを理解していなかったとに気がついたのでまとめてみました。 ここではWordPressのことはある程度、理解しているけど検索フォームの仕組みが分から...

とりあえず、コードだけ知りたい方はこのまま読み進めていただいて大丈夫ですが、内容をちゃんと理解したい方で検索フォームについてあまり詳しくないという方は、はじめに下記の記事を読むと理解がスムーズだと思います。

サイト内検索の仕組みとURLに付けるパラメータ
2018.09.01
サイト内検索の仕組みとURLに付けるパラメータ
ここでは、WordPressのサイト内検索をアレンジしたい方が予備知識として知っておいた方がよいパラメータについてお話します。私が検索フォームについて知らなかったときに教えて欲しかった内容ですので、ぜひ参考にしてみてください。 検索フォームとリクエストパ...

コンテンツ

タクソノミーのチェックボックスが備わったサイト内検索フォーム

とりあえず、結論から見てみましょう。

検索フォーム

下記のコードは、検索フォーム(searchform.php)として使うコードです。

PHP

<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>

<!-- フォームの追加はじめ -->
<?php
$my_taxonomy = 'タクソノミー'; //タクソノミーをスラッグで指定
$terms = get_terms($my_taxonomy);
if($terms):foreach($terms as $term):
?>
<label><input type="checkbox" name="term_slug[]" value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></label>
<?php endforeach; endif; ?>
<input type="hidden" name="my_taxonomy" value="<?php echo $my_taxonomy ?>">
<select name="and_or" id="and_or">
	<option value="AND">AND</option>
	<option value="IN">OR</option>
</select>
<!-- フォームの追加おわり -->

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

上記のコードで編集すべきところは、「//タクソノミーをスラッグで指定」とコメントされている行にタクソノミーを指定するところだけです。そうすると指定したタクソノミーに登録されているターム（タグ）がチェックボックスとして表示されるようになります。複数のチェックボックスを指定した場合のAND検索・OR検索も選択できるようになっています。

このコードを検索フォーム(searchform.php)として設置すると、下記のような検索フォームが出力されます。

表示イメージ

ボタンで表示を切り替えてご覧ください。

See the Pen taxonomy_checkbox01 by kenichi (@ken81) on CodePen.

今回のフォームは、WordPressの初期設定で入っているHTML5バージョンの検索フォームに新しいフォームを追加しただけですので、ここでは下記の追加したコードだけを解説していきます。

追加されたフォーム
<?php
$my_taxonomy = 'タクソノミー'; //タクソノミーをスラッグで指定
$terms = get_terms($my_taxonomy);
if($terms):foreach($terms as $term):
?>
<label><input type="checkbox" name="term_slug[]" value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></label>
<?php endforeach; endif; ?>
<input type="hidden" name="my_taxonomy" value="<?php echo $my_taxonomy ?>">
<select name="and_or" id="and_or">
	<option value="AND">AND</option>
	<option value="IN">OR</option>
</select>

この検索フォームでは、オリジナルのパラメータを使っているため、検索結果ページ(search.php)も編集しないと正しく機能しませんので設定していきます。

検索結果のコード

下記のコードは、検索結果のテンプレート(search.php)の中の投稿を表示させるループを含めたソースコードです。ループがかなり適当な感じですが、お使いのテンプレートに応じていろいろカスタマイズしてみてください。

PHP

<?php
$s = $_GET['s'];
$my_taxonomy = $_GET['my_taxonomy'];
$term_slug = $_GET['term_slug'];
$and_or = $_GET['and_or'];

if($term_slug){
	$tax_query[] = array(
		'taxonomy'=> $my_taxonomy,
		'terms'=> $term_slug,
		'include_children'=> false,
		'field'=> 'slug',
		'operator'=> $and_or
	);
}
$args = array(
	'tax_query' => $tax_query,
	's' => $s,
	'posts_per_page' => -1
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>

<!-- ループはじめ -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a><h3>
<p><?php the_time('Y/m/d') ?></p>
<?php endwhile; ?>
<!-- ループおわり -->

<?php wp_reset_postdata(); ?>

<?php else : ?>
<p>お探しの記事はありませんでした。</p>
<?php endif; ?>

コードの解説：検索フォーム

それでは、実際にコードの詳細を見ていきましょう。説明を見たいコードの行をクリックして説明文をお読みください。

<?php
$my_taxonomy = ‘タクソノミー’; //タクソノミーをスラッグで指定
ここではチェックボックスを表示させたいタクソノミーを指定して、それを変数$my_taxonomyに格納しています。WordPressの投稿で使うタグを指定したいときは、”post_tag”とすればOKです。カスタムタクソノミーの場合はそのスラッグを入れてください。
$terms = get_terms($my_taxonomy);
get_terms()は指定したタクソノミーのターム情報を取得する関数です。取得したターム情報を変数$termsに格納します。
if($terms):foreach($terms as $term):
if(変数)：・・・で「もし変数に値が入っているときは・・・」という意味です。ここでは、変数$termsにターム情報が入っている場合にforeach文が実行されます。

foreach文は、

foreach(配列変数 as 変数):
  // 処理する内容
endforeach

という形で配列の中の要素を１つずつ変数に格納して処理します。ここでは、タクソノミーの中にあるタームを１つずつ取り出してチェックボックスを出力することが目的です。

?>
<label><input type=”checkbox” name=”term_slug[]” value=”<?php echo $term->slug; ?>”><?php echo $term->name; ?></label>
この部分は、foreach文の処理の内容です。チェックボックスを出力しています。

name="term_slug[]"という形でname属性の名前のあとに[]があるのは、チェックボックスが複数選択されたときに配列として値を渡すためです。

<?php echo $term->slug; ?>はタームのスラッグ、<?php echo $term->name; ?>はターム名をそれぞれ出力しています。

<?php endforeach; endif; ?>
endforeachはforeach文の終了を意味します。
<input type=”hidden” name=”my_taxonomy” value=”<?php echo $my_taxonomy ?>”>
type="hidden"で隠しフォームを入れています。”my_taxonomy”というパラメータと<?php echo $my_taxonomy ?>で最初に指定したタクソノミーのスラッグを値として渡します。
<select name=”and_or” id=”and_or”>
セレクトボックスでAND検索・OR検索ができるようにしています。
    <option value=”AND”>AND</option>
    <option value=”IN”>OR</option>
</select>

コードの解説：検索結果

説明を見たいコードの行をクリックすると説明文が開きます。

<?php
$s = $_GET[‘s’];

変数 = $_GET[‘パラメータ名’];

このようにすると検索フォームで送った値を検索結果ページで受け取ることができます。
ここでは、検索ワードを変数$sに格納します。

$my_taxonomy = $_GET[‘my_taxonomy’];
変数$my_taxonomyにタクソノミーのスラッグを格納しています。
$term_slug = $_GET[‘term_slug’];
チェックボックスで選択されたタームのスラッグを配列として変数$term_slugに格納します。
$and_or = $_GET[‘and_or’];
“AND”もしくは”IN”のうち、検索フォームで選択された値が変数$and_orに入ります。
 
if($term_slug){
「もし、変数$term_slugに値が入っていれば・・・」という意味になります。
    $tax_query[] = array(
tax_query関数で使用するパラメータと値を、選択されたスラッグの分だけ配列にして変数$tax_queryに格納しています。
        ‘taxonomy’=> $my_taxonomy,
タクソノミーの指定を行います。ここでは、変数$my_taxonomyに格納された値を指定します。
        ‘terms’=> $term_slug,
タームの指定を行います。ここでは、変数$term_slugに格納された値を指定します。
        ‘include_children’=> false,
include_childrenは子タームがある場合にそれを含めるかどうかを指定します。ここでは「含めない（false）」としています。
        ‘field’=> ‘slug’,
タームをどういう形式で指定するかを決めます。ここではスラッグで指定します。
        ‘operator’=> $and_or
'operator'は、AND検索・OR検索を指定するところです。セレクトボックスで選択された値（変数$and_or）を指定します。
    );
}
$args = array(
WP_Queryという関数で指定する内容をあらかじめ変数$argsに代入しています。WP_Queryは、どんな投稿を出力するかをリクエストするための関数です。
    ‘tax_query’ => $tax_query,
tax_queryでは、表示させたいカスタムタクソノミーの投稿に関する設定を行います。下記がその骨組みになります。

'tax_query' => array(
	array(
	// 投稿の設定
	),
)

上の行ですでに変数$tax_queryに内容を入れておいたので、これを指定します。

    ‘s’ => $s,
検索ワードを指定しています。
    ‘posts_per_page’ => -1
'posts_per_page'は、１ページあたりの表示件数を指定します。ここでは全件表示を指定しています。
);
$the_query = new WP_Query( $args ); ?>

new クラス名()

はクラスのインスタンスを作るときの公式です。この辺りはphpの知識が必要です。
ここでは、投稿に関する指定が入っている変数$argsをWP_Query関数の引数にして、作り出した「投稿」を変数$the_queryに格納しています。

<?php if ( $the_query->have_posts() ) : ?>
変数$the_queryに「投稿」が入っているかをチェックしています。
全体としては下記のような構成になっています。

if ( $the_query->have_posts() ) :
// 該当する投稿がある場合
else :
// 投稿がない場合
endif;
 
<!– ループはじめ –>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a><h3>
<p><?php the_time(‘Y/m/d’) ?></p>
<?php endwhile; ?>
<!– ループおわり –>
 
<?php wp_reset_postdata(); ?>
検索結果に表示される投稿を操作したので、最後にwp_reset_postdataでリセットしておきます。
 
<?php else : ?>
該当する投稿がなかった場合になります。
<p>お探しの記事はありませんでした。</p>
<?php endif; ?>
endifはif文の終了です。

以上が、WP_Queryを使ったタクソノミーのチェックボックス絞り込み検索フォームの作り方でした。

最近の記事

  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

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

  2. CSS

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

  3. WordPress

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

  4. CSS

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

  5. CSS

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