プラグインなしでカスタムタクソノミーをプルダウンで掛け合わせたWordPressの絞り込み検索

12分

掛け合わせ検索

SHARE

前提として、通常の投稿タイプに、追加でカスタム投稿を追加。そして、カスタム投稿をカスタムタクソノミーで分類。

そして、「検索キーワード」と「カスタムタクソノミー」を必要に応じて掛け合わせて検索ができるスニペットをこの記事で紹介します。

かかかず
かかかず

ちょっと文章で書くと長いですが、つまり「検索機能の拡張」です。

このスニペットは少し記述する内容がややこしかったので、自分への備忘録的な内容寄りですが、同じような機能を実装しようと思っている方はぜひこの記事を参考にしてください。

絞り込み検索のサンプル

以下が、絞り込み検索のサンプルです。

通常の入力フィードのあるテキストボックスに加え、カスタムタクソノミーのタームをプルダウンで選択できます。

タームを選ばない場合は全タームが検索対象になり、タームを選択した場合は入力したキーワードにANDで検索結果が表示されます。

かかかず
かかかず

上記は検索フォームのサンプルです。検索結果はサンプルの為整合性はないのでご注意ください。

検索フォームと検索結果を作る方法

カスタム投稿や、タクソノミーを対象にして「通常の検索」と分けて検索を行う場合は、以下の方法で検索フォームと検索結果を別に作って用意しましょう。

その方法は以下の記事にまとめていますので、併せてご覧ください。

検索結果のアイキャッチ カスタム投稿の検索フォームとページネイション付きの検索結果を作るスニペット

絞り込み検索実装の手順と方法

手順と方法

それでは、絞り込み検索の実装の手順と方法についてご説明します。

検索フォームの「searchform-{XXXX}」に記述

まずはじめに、検索フォームのコードを記述します。

検索フォームは、「searchform-hoge」のように、カスタム投稿用に作った検索フォームのファイルに記述します。

PHP 

<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="searchform">
<div class="searchCustomBlock">
  <input type="hidden" name="post_type" value="カスタム投稿タイプ名(英字)">
  <input type="search" placeholder="サイト内検索" class="hidden-search-field" name="s" value="<?php echo get_search_query(); ?>" />
	<select name="post_tag_size[]">
	<option value="nochoice" checked="checked">カテゴリを選択</option>
      <?php
        $taxonomy_name = 'タクソノミー名(英字)'; // 取得したいタクソノミーの情報
        $args = array( 'hide_empty' => 1, 'orderby' => 'name', 'order' => 'ASC', 'parent' => 0,); // 親カテゴリのみ表示
        $taxonomys = get_terms($taxonomy_name,$args);
        if( !empty( $taxonomys ) && !is_wp_error( $taxonomys ) ):
         foreach($taxonomys as $taxonomy):
      ?>
  <option value="<?php echo $taxonomy->slug; ?>"><?php echo $taxonomy->name; ?></option>	
        <?php endforeach; ?>
</select>
      <?php endif;?>
　<button type="submit" class="searchCustom"><i class="fa fa-search"></i>検索</button>
</div>
</form>

かかかず
かかかず

「カスタム投稿タイプ名(英字)」と「タクソノミー名(英字)」はサイトの状況に応じて変更ください。

検索結果の「search-{XXXX}」に記述

次に、検索結果の表示の為に「search-{XXXX}」のファイルに以下のコードを記述します。

PHP 

<ul class="searchResult">
<?php
$post_type = $_GET['post_type'];
$s = $_GET['s'];
$post_tag_size = $_GET['post_tag_size'][0]; //プルダウンのデータ

//カテゴリが選択された時
if ($post_tag_size !== "nochoice"){
  $taxquery_size = array(
     'taxonomy' => 'タクソノミー名(英字)',
     'terms' => $post_tag_size, //選択されたタームを取得
     'field' => 'slug',
     );
   }
$args = array(
  's' => get_search_query(),
  'post_type' => 'カスタム投稿タイプ名(英字)',
  'paged' => get_query_var('paged'), //ページ送りをON
  'tax_query' => array(
    'relation' => 'AND',
    $taxquery_size,
    ),
  );
query_posts( $args );
?>

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <li><!-- この中に出力する内容を記述 --></li>
			<?php endwhile; ?>
<?php else : //記事が無い場合 ?>
                 <li class="searchNoresult">
                   <p>「<?php echo $search_query; ?> 」に一致する情報は見つかりませんでした。</p>
                 </li>
			<?php endif; ?>
	</ul>
<?php if(function_exists('wp_pagenavi')) wp_pagenavi(array('query' => $wp_query)); //プラグインWP-PageNaviを使っている場合 ?>

このコードも、「カスタム投稿タイプ名(英字)」と「タクソノミー名(英字)」はサイトの状況に応じて変更して記述ください。

かかかず
かかかず

一番最後の一行は、プラグインWP-PageNaviでページネイションを使う場合の記述です。必要なければ削除ください。

検索フォームと検索結果の見た目をCSSで整える

最後にCSSで見た目を整えます。

検索結果の出力内容は、サイトに応じて異なる為、検索フォームのCSSのみここに書いておきますので、これをベースにカスタマイズするなどして利用ください。

CSS 

/* 検索 */
select {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 95.5% center;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.searchform .searchCustomBlock {
    background: #FFF;
    padding: 13px 15px;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 11%);
    margin: 40px auto;
}

input[type="search"] , form select {
    background-color: #fafafa;
}
form .searchCustomBlock select {
    display: block;
    width: 100%;
    padding: 0.55em;
    border: 0;
    border-radius: 3px;
    background-color: #fafafa;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.7);
    font-size: 1em;
    line-height: 1.8;
    transition: ease;
    position: relative;
	 margin-bottom: -7px;
}
button.searchCustom {
    text-align: center;
    width: 100%;
    line-height: 42px;
    border: none;
    background: #6bb6ff;
    color: #FFF;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
    transition: 0.3s;
    font-weight: 500;
    letter-spacing: 0.08rem;
}
button.searchCustom i {
    margin-right: 5px;
}
button.searchCustom:hover {
    box-shadow: 0 6px 20px -5px rgb(0 0 0 / 25%);
    transform: translateY(-2px);
}

かかかず
かかかず

これで実装は完了です！思った通りに動くかテストしてみましょう。

絞り込み検索のコード一式

手順と方法でご紹介したコードのまとめです。

上記のコードと全く同じなので、細かい説明や手順を気にせず「とりあえずコピペしたい」方はこちらも利用ください。

コードを表示する

searchform-{XXXX}.php 

<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="searchform">
<div class="searchCustomBlock">
  <input type="hidden" name="post_type" value="カスタム投稿タイプ名(英字)">
  <input type="search" placeholder="サイト内検索" class="hidden-search-field" name="s" value="<?php echo get_search_query(); ?>" />
	<select name="post_tag_size[]">
	<option value="nochoice" checked="checked">カテゴリを選択</option>
      <?php
        $taxonomy_name = 'タクソノミー名(英字)'; // 取得したいタクソノミーの情報
        $args = array( 'hide_empty' => 1, 'orderby' => 'name', 'order' => 'ASC', 'parent' => 0,); // 親カテゴリのみ表示
        $taxonomys = get_terms($taxonomy_name,$args);
        if( !empty( $taxonomys ) && !is_wp_error( $taxonomys ) ):
         foreach($taxonomys as $taxonomy):
      ?>
  <option value="<?php echo $taxonomy->slug; ?>"><?php echo $taxonomy->name; ?></option>	
        <?php endforeach; ?>
</select>
      <?php endif;?>
　<button type="submit" class="searchCustom"><i class="fa fa-search"></i>検索</button>
</div>
</form>

search-{XXXX}.php 

<ul class="searchResult">
<?php
$post_type = $_GET['post_type'];
$s = $_GET['s'];
$post_tag_size = $_GET['post_tag_size'][0]; //プルダウンのデータ

//カテゴリが選択された時
if ($post_tag_size !== "nochoice"){
  $taxquery_size = array(
     'taxonomy' => 'タクソノミー名(英字)',
     'terms' => $post_tag_size, //選択されたタームを取得
     'field' => 'slug',
     );
   }
$args = array(
  's' => get_search_query(),
  'post_type' => 'カスタム投稿タイプ名(英字)',
  'paged' => get_query_var('paged'), //ページ送りをON
  'tax_query' => array(
    'relation' => 'AND',
    $taxquery_size,
    ),
  );
query_posts( $args );
?>

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <li><!-- この中に出力する内容を記述 --></li>
			<?php endwhile; ?>
<?php else : //記事が無い場合 ?>
                 <li class="searchNoresult">
                   <p>「<?php echo $search_query; ?> 」に一致する情報は見つかりませんでした。</p>
                 </li>
			<?php endif; ?>
	</ul>
<?php if(function_exists('wp_pagenavi')) wp_pagenavi(array('query' => $wp_query)); //プラグインWP-PageNaviを使っている場合 ?>

CSS 

/* 検索 */
select {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 95.5% center;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.searchform .searchCustomBlock {
    background: #FFF;
    padding: 13px 15px;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 11%);
    margin: 40px auto;
}

input[type="search"] , form select {
    background-color: #fafafa;
}
form .searchCustomBlock select {
    display: block;
    width: 100%;
    padding: 0.55em;
    border: 0;
    border-radius: 3px;
    background-color: #fafafa;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.7);
    font-size: 1em;
    line-height: 1.8;
    transition: ease;
    position: relative;
	 margin-bottom: -7px;
}
button.searchCustom {
    text-align: center;
    width: 100%;
    line-height: 42px;
    border: none;
    background: #6bb6ff;
    color: #FFF;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
    transition: 0.3s;
    font-weight: 500;
    letter-spacing: 0.08rem;
}
button.searchCustom i {
    margin-right: 5px;
}
button.searchCustom:hover {
    box-shadow: 0 6px 20px -5px rgb(0 0 0 / 25%);
    transform: translateY(-2px);
}

かかかず
かかかず

とりあえずコピペで動かして、そこからカスタマイズするのもGOODです。

参考サイト

参考プラグインを使わず、「カスタムタクソノミー」で「絞り込み検索」するQiita

1 COMMENT

現在コメントは受け付けておりません。

前の記事

ページの更新
JavaScriptのlocation.reload()でペー…

次の記事

プラグインなしでカテゴリの親子階層をアコーディオンで出力
カテゴリーのアコーディオン

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら