WordPressでウェブサイト制作をしていると、検索機能のカスタマイズが必要になることがあります。
標準の検索フォームだけなら簡単ですが、カスタム投稿タイプを対象にしたり、タクソノミーで絞り込んだりすると、急に手元の過去コードを探しはじめることになる。
自分も何度か同じところで手が止まりました。
この記事では、wp_dropdown_categories() を使って、カスタム投稿タイプの記事検索にタクソノミーのプルダウン絞り込みを付ける方法をまとめます。
もともとは2018年に書いた備忘録ですが、現在の公式リファレンスでは selected 引数が使えるため、検索後の選択状態もPHP側で扱えます。
当時はJavaScriptで補っていましたが、今ならまず selected を使う方が自然です。
- カスタム投稿タイプの記事を検索する
wp_dropdown_categories()でタクソノミーのプルダウンを出す- 検索後も選択したタームをプルダウンに残す
カスタム投稿タイプの検索フォームを作る
まずは通常のフリーワード検索です。
WordPressでは、検索キーワードを s というnameで送ると検索として扱われます。
<form action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get"> <input type="text" name="s" value="<?php echo esc_attr( get_search_query() ); ?>"> <input type="submit" value="検索"> </form>
これを特定のカスタム投稿タイプだけに絞る場合は、post_type をhiddenで渡します。
ここでは例として news というカスタム投稿タイプを対象にしています。
<form action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get"> <input type="text" name="s" value="<?php echo esc_attr( get_search_query() ); ?>"> <input type="hidden" name="post_type" value="news"> <input type="submit" value="検索"> </form>
ここまではシンプルです。
迷いやすいのは、この検索フォームにタクソノミーの絞り込みを足すところです。
wp_dropdown_categoriesでタクソノミーをプルダウン表示する
wp_dropdown_categories() は、カテゴリーやタクソノミーの項目を select と option の形で出力してくれる関数です。
デフォルトでは通常のカテゴリーが対象ですが、taxonomy を指定すればカスタムタクソノミーにも使えます。
公式リファレンスはこちらです。
wp_dropdown_categories() | Developer.WordPress.org
<?php
$taxonomy = 'news_category';
$selected = get_query_var( $taxonomy );
if ( ! $selected && isset( $_GET[ $taxonomy ] ) ) {
$selected = sanitize_text_field( wp_unslash( $_GET[ $taxonomy ] ) );
}
?>
<form action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<?php
wp_dropdown_categories(
array(
'show_option_none' => 'カテゴリー選択',
'option_none_value' => '',
'show_count' => 0,
'hide_empty' => 0,
'orderby' => 'id',
'taxonomy' => $taxonomy,
'name' => $taxonomy,
'value_field' => 'slug',
'selected' => $selected,
)
);
?>
<input type="text" name="s" value="<?php echo esc_attr( get_search_query() ); ?>">
<input type="hidden" name="post_type" value="news">
<input type="submit" value="検索">
</form>
この例では、news_category というタクソノミーで絞り込みます。
実際には、自分のサイトで登録しているカスタム投稿タイプ名とタクソノミー名に置き換えてください。
指定している引数の意味
今回の実装で見ておきたいのは、主に以下の引数です。
taxonomy… 出力したいタクソノミーを指定するname…select要素のname属性を指定するvalue_field…optionのvalueに使う値を指定するselected… 選択済みにしたい値を指定するshow_option_none… 未選択時に表示する文言を指定するoption_none_value… 未選択時のvalueを指定する
value_field に slug を指定すると、URLは ?news_category=term-slug のような形になります。
タクソノミー名とタームスラッグで検索結果を絞り込みたい場合は、この形が扱いやすいです。
検索後も選択状態を残すならselectedを使う
この記事を書いた当時、自分は wp_dropdown_categories() で出力したプルダウンに selected を付ける方法が分からず、JavaScriptで後から選択状態を付けていました。
ただ、現在の公式リファレンスを見ると、selected 引数が用意されています。
そのため、今ならJavaScriptで無理に後処理するより、PHP側で選択値を渡す方が分かりやすいです。
$selected = get_query_var( $taxonomy );
if ( ! $selected && isset( $_GET[ $taxonomy ] ) ) {
$selected = sanitize_text_field( wp_unslash( $_GET[ $taxonomy ] ) );
}
wp_dropdown_categories(
array(
'taxonomy' => $taxonomy,
'name' => $taxonomy,
'value_field' => 'slug',
'selected' => $selected,
)
);
selected に渡す値は、value_field と合わせて考えます。value_field を slug にしているなら、selected もタームスラッグを渡す。term_id を使うなら、IDを渡す。
この対応をそろえておくと、検索後に選択状態が残ります。
search.phpで検索結果を表示する
検索結果側は、通常のループで表示できます。
件数や検索語を出す場合は、出力時にエスケープしておくと安心です。
<?php global $wp_query; ?>
<p>
検索ワード「<?php echo esc_html( get_search_query() ); ?>」の検索結果
<span>（<?php echo esc_html( (string) $wp_query->found_posts ); ?>件）</span>
</p>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php else : ?>
<p>一致する記事は見つかりませんでした。</p>
<?php endif; ?>
このあたりはサイトのテンプレート構成によって変わります。
検索専用の表示にしたいなら search.php を用意し、カスタム投稿タイプごとに見た目を変えるなら条件分岐やテンプレート側の設計も考える必要があります。
まとめ：今ならJavaScriptではなくselectedで扱う
wp_dropdown_categories() を使うと、タクソノミーのプルダウン絞り込みは比較的少ないコードで実装できます。
ポイントは、taxonomy、name、value_field、selected をそろえること。
特に検索後の選択状態は、現在なら selected 引数を使うのが分かりやすいです。
2018年当時は、選択状態をJavaScriptで補っていました。
それも当時の実装記録としては残しておきたいのですが、今から同じ機能を作るなら、まず公式リファレンスの引数を確認してPHP側で完結させる方がよいと思います。
カテゴリーまわりの表示をさらに整えるなら、ブログのカテゴリーページをカスタマイズしてアクセスアップ！（WordPress） も近い話です。
Cocoonを使っている場合は、Cocoonカスタマイズ｜記事内のカテゴリにアイキャッチを表示する【WordPress】 も参考になります。
ポチップ
ポチップ