WordPressの記事タグで絞り込み検索をする機能を実装。例えばドラクエの技で「メラ」&「ブレス」、「ヒャド」&「呪文」の条件にあった技だけを検索したいときなどに使える方法。

実際に実装した表示例。「デイン」&「斬撃」で検索した結果を表示。実装は以下の環境にて。

• WordPress 6.5.x
• PHP 8.2.x

まず、任意の場所に検索エリアを実装。タグを選ぶチェックボックスとテキストエリアを実装します。

<form role="search" method="get" id="search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
 <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="キーワードを入力" />
<?php
 $tags = get_tags();
 if ( $tags ) {
  foreach ( $tags as $tag ) {
?>
<label for="tag-<?php echo esc_attr( $tag->slug ); ?>"><input type="checkbox" name="tag[]" value="<?php echo esc_attr( $tag->slug ); ?>" id="tag-<?php echo esc_attr( $tag->slug ); ?>"><?php echo esc_html( $tag->name ); ?></label>
<?php
  }
 }
?>
<input type="submit" id="buttonsubmit" name="buttonsubmit" value="検索する" />
</form>

検索結果画面の実装。search.phpの任意の位置に以下を実装します。必要な要素などはWebサイトの内容に合わせて各自で設定ください。

<?php
 $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
 $search_query = isset( $_GET['s'] ) ? sanitize_text_field( $_GET['s'] ) : '';
 $search_tags = isset( $_GET['tag'] ) && is_array( $_GET['tag'] ) ? array_map( 'sanitize_text_field', $_GET['tag'] ) : [];
 $args = array(
  's' => $search_query,
  'tag_slug__and' => $search_tags,
  'paged' => $paged,
 );
 $query = new WP_Query( $args );
 if ( $query->have_posts() ) {
?>
<ul>
<?php
  while ( $query->have_posts() ) {
   $query->the_post();
?>
 <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
  }
?>
</ul>
<?php
  the_posts_pagination( array(
   'total' => $query->max_num_pages,
  ));
  wp_reset_postdata();
 }else{
?>
<p>残念ながら、技は見つかりませんでした。</p>
<?php
 }
?>

あくまで例ですが、店舗情報でサービス内容（駐車場、キャシュレス決済）で絞り込みや、アパレル商品のスペック（サイズやカラー）検索でも活用できます。

おしまい♥

タグ：WordPress