WordPressにカスタムフィールドで絞り込み検索を実装する方法

 検索フォームに絞り込み検索がついていると何かと便利です。今回はそんな絞り込み検索をWordpressに実装する方法をカスタムフィールドの機能と合わせて紹介します。

 

カスタムフィールドの作成

 まずは絞り込みに使用するカスタムフィールドを作成しましょう。今回は「価格」というフィールドを作成してみました。

 よく使用するメタキー(フィールド名)も日本語で「価格」になっています。フィールドタイプは価格なので数値にしてあります。

 同じ要領で目的の数だけカスタムフィールドを作成しましょう。

価格を使って検索する場合(セレクトを使った例)

 まずは価格を使って検索する場合は次のようなフォームを作成しましょう。

フォームのページ

 ここではプルダウンメニューを使って価格の最小値と最大値を選択できるようなフォームを作っています。

  • 価格の最小値・・・$_GET[‘low’]に代入
  • 価格の最大値・・・$_GET[‘high’]に代入
  • valueには価格の数値データを指定
 <form method="get" action="<?php bloginfo( 'url' ); ?>" class="">

 <!-- ▼価格で検索▼ -->
 <div class="">
 <h3 class="search_title">・価格</h3>
 <select name="low">
  <option value="0" selected>下限なし</option>
  <option value="5000">5,000</option>
  <option value="10000">10,000</option>
  <option value="20000">20,000</option>
  <option value="30000">30,000</option>
  <option value="35000">35,000</option>
  <option value="40000">40,000</option>
  <option value="45000">45,000</option>
  <option value="50000">50,000</option>
  <option value="55000">55,000</option>
  <option value="60000">60,000</option>
  <option value="65000">65,000</option>
  <option value="70000">70,000</option>
  <option value="75000">75,000</option>
  <option value="80000">80,000</option>
 </select> 円 ~ 
 <select name="high">
  <option value="20000">20,000</option>
  <option value="25000">25,000</option>
  <option value="30000">30,000</option>
  <option value="35000">35,000</option>
  <option value="40000">40,000</option>
  <option value="45000">45,000</option>
  <option value="50000">50,000</option>
  <option value="55000">55,000</option>
  <option value="60000">60,000</option>
  <option value="65000">65,000</option>
  <option value="70000">70,000</option>
  <option value="75000">75,000</option>
  <option value="80000">80,000</option>
  <option value="999999999" selected>上限なし</option>
  </select> 円
 </div>

 <div style="margin:20px auto 0 auto; text-align:center; ">
   <input type="hidden" name="post_type" value="◯◯"> <!-- ここに投稿タイプ名を記述して検索結果のページを分岐 -->
   <button id="submit" type="submit" class="search_submit">この条件で検索</button>
  </div>
 </form>

検索結果ページ(search-◯◯.php)

 検索結果ではまずGETから変数に値を代入して取り出します。

 その後、$metaqueryspというメタ情報で絞り込みをする条件の配列に値を代入していきます。

  • ‘key’ => ‘◯◯’, の箇所には最初に作成したカスタムフィールドのメタキーを指定します
  • valueは、今回範囲を指定するので配列 array($low,$high), を指定します
  • compareは、今回は範囲指定なのでBETWEENを指定します
  • typeには数値の条件としてNUMERICを指定しています。
/***********************************/
//価格の検索条件
/***********************************/
$low = $_GET['low']; //価格の最小値
$high = $_GET['high']; //価格の最大値

$metaquerysp[] = array(
 'key'=>'価格',
 'value'=>array( $low, $high ),
 'compare'=>'BETWEEN',
 'type'=>'NUMERIC', //数値の時の条件
 );

$metaquerysp['relation'] = 'AND'; //全ての条件に一致 メタクエリの最終行に置く

 ちなみに最後の「$metaquerysp[‘relation’] = ‘AND’; 」というのは、今回は価格という一つの条件ですが、他にも複数の条件を指定した場合、AND検索なのかOR検索なのかなど条件を指定するためのものです。

検索結果ページで検索条件を表示する

 検索結果には検索条件を表示してあげると親切です。

 初期値、つまり下限が0、上限なし(ここでは999999999)に指定されている場合、「すべての価格」と表示されるように分岐しています。

 もし価格が設定されている場合にはその価格を表示するように分岐しています。

<!-- ▼価格指定がある場合▼ -->
<?php
 if($low == 0 && $high == 999999999){
  echo'<span class="search_jyouken_title">価格:</span>すべての価格<br />';
 }else{
?>
 <span class="search_jyouken_title">価格:</span>
 <?php if($low == 0){ ?>
  下限なし
 <?php }else{
  echo number_format($low).'円';
 } ?> ~ 
 <?php if($high == 999999999){ ?>上限なし<?php }else{ echo number_format($high).'円';} ?><br />
 <?php } ?>

ラジオボタンを使った例

 次に、ラジオボタンを使って条件を1つだけ選択できる場合の例を見ていきましょう。

フォームのページ

 例では「全てのショップ(値なし)」を含めた4種類を用意しました。「全てのショップ」が選択された場合は「value」は空になります。

  <!-- ▼ショップ名で検索▼ -->
 <div class="">
 <h3 class="search_title">・ショップ名で選ぶ</h3>
 <label><input type="radio" name="shop" value="" checked="checked">全てのショップ</label>
 <label><input type="radio" name="shop" value="ショップ1">ショップ1</label>
 <label><input type="radio" name="shop" value="ショップ2">ショップ2</label>
 <label><input type="radio" name="shop" value="ショップ3">ショップ3</label>
 </div>

検索結果ページ(search-◯◯.php)

 検索結果ページは次のようになります。

 GETの値を変数に代入し、先ほどと同じように配列「$metaquerysp」に条件を代入しています。

  • 「key」にはカスタムフィールドのメタキーを指定します
  • 検索に使用する値「value」にはフォーム(GET)からの値を指定します
  • 「compare」にはkeyにvalueの値が含まれるという意味の「LIKE」を指定しました
/*********************************/
//ショップ名の検索条件
/*********************************/
$shop = $_GET['shop'];//ショップ名を変数に代入
if($shop){
    $metaquerysp[] = array(
		'key'=>'ショップ名',
		'value'=> $shop,
		'compare'=>'LIKE',
	);
}
$metaquerysp['relation'] = 'AND'; //全ての条件に一致 メタクエリの最終行に置く

検索結果ページで検索条件を表示する

 こちらも同じく検索結果ページに検索条件を表示してみましょう。

 <!-- ▼ショップの指定がある場合▼ -->
 <?php if (!empty($shop)) : ?>
 <span class="search_jyouken_title">ショップ:</span>
 <?php echo $shop;?><br />
 <?php endif ?>

チェックボックスを使って複数選択する例

 今度はチェックボックスを使った例です、チェックボックスでは複数選択ができるので配列に代入します。よくあるこだわり検索の例を見てみましょう。

フォームのページ

<div class="">
 <h3 class="search_title">・こだわりポイントで選ぶ</h3>
 <label><input type="checkbox" name="kodawaripoint[]" value="テスト1">テスト1</label>
 <label><input type="checkbox" name="kodawaripoint[]" value="テスト2">テスト2</label>
</div>

検索結果ページ(search-◯◯.php)

 チェックボックスでは条件が複数あるので配列を一度foreachで回して、$valという変数を一時的に使って配列「$metaquerysp」に検索条件を指定していきます。

/*********************************/
//こだわりポイントの検索条件
/*********************************/
$kodawaripoint = $_GET['kodawaripoint'];//こだわりポイント

if($kodawaripoint){
 foreach($kodawaripoint as $val){ $metaquerysp[] = array( 'key'=>'こだわり条件', 'value'=> $val, 'compare'=>'LIKE', ); } } $metaquerysp['relation'] = 'AND'; //全ての条件に一致 メタクエリの最終行に置く

検索結果ページで検索条件を表示する

 検索条件の表示では、配列の最後の1つまでを「,」で区切るように出力していきます。

<?php if (is_array($kodawaripoint)) : ?>
 <span class="search_jyouken_title">こだわりポイント:</span>
 <?php
 if (is_array($kodawaripoint)) {
 foreach($kodawaripoint as $val){
 if ($val === end($kodawaripoint)) {
 echo $val;
 }else{
 echo $val.", ";
 }
 }
 }
 ?><br />
 <?php endif ?>

完成

 これで絞り込み検索の機能が完成しました。

フォローする