【不動産サイトは必須】WordPressで検索した結果を簡単に並び替える仕組みを実装する方法

WordPress | 2017.01.05

不動産サイトを作成する場合は必須の機能である並び替え機能をWordPressで簡単に実装する方法を今回はご紹介したいと思います。
検索機能については、こちらのサイトで紹介されている内容を使わせてもらっています。

不動産サイトでよくある並び替えの方法として、賃料順の並べ替えがあります。
賃料を物件毎に保持させようとする場合、大抵はカスタムフィールドを作成して設定すると思います。
カスタムフィールド順に表示する場合、通常のWordPressで用意されているOrderbyでは並び替えをすることができないため、新たに並び替えの条件を定義する必要があります。

並び替えの条件を定義する上でまず必要なのが、新しい並び替え条件項目です。
以下のようにfunction.phpに並び替え条件になる項目を定義します。
（以下では「sort」を定義しています。）

function.php

// 並び替え条件パラメータを追加
function add_sort_query_vars( $public_query_vars ) {
  $public_query_vars[] = 'sort';
  return $public_query_vars;
}
add_filter( 'query_vars', 'add_sort_query_vars' );

// 並び替え条件パラメータを追加

function add_sort_query_vars( $public_query_vars ) {

$public_query_vars[] = 'sort';

return $public_query_vars;

}

add_filter( 'query_vars', 'add_sort_query_vars' );

さらにfunction.phpに以下のように並び替えの条件を記述します。
sortに設定されている値が「RENT_DESC」であれば、カスタムフィールドで設定されている「price」が降順になるように並べ替える条件を付与しています。
「RENT_DESC」でなはない値が設定されている場合は、昇順に並べ変える条件を検索条件に付与するようにしています。
新たに条件を追加したい場合は、if文で条件を追加してもらえばOKです！！

function.php

// 並び替え処理を設定
function change_posts_per_page( $query ){
  if($query->is_search()){
    if( !empty($_GET['sort']) ){
      if( $_GET['sort'] == 'RENT_DESC' ){
        $query->set( 'orderby', array( 'price' => 'DESC') );
      }else{
        $query->set( 'orderby', array( 'price' => 'ASC' ) );
      }
    }
  }
}

add_action( 'pre_get_posts', 'change_posts_per_page' );

// 並び替え処理を設定

function change_posts_per_page( $query ){

if($query->is_search()){

if( !empty($_GET['sort']) ){

if( $_GET['sort'] == 'RENT_DESC' ){

$query->set( 'orderby', array( 'price' => 'DESC') );

}else{

$query->set( 'orderby', array( 'price' => 'ASC' ) );

}

add_action( 'pre_get_posts', 'change_posts_per_page' );

次はフロント部分です。
並び替えの条件はセレクトボックスで選択できるようにしています。
この記述は、検索結果を表示するページに設定して下さい。

並び替えの条件になる値を先ほどfunction.phpで定義した内容に合わせてvalueに設定します。
再度画面を表示した時に現在の並び替え条件を表示するためにselectedを設定する記述もしています。

検索結果ページ

<?php $sort_val = get_query_var( 'sort', '' ); ?>
<select id="sort" name="sort">
    <option value="<?php echo add_query_arg('sort', false); ?>" <?php if($sort_val == ''): echo 'selected'; endif; ?>>指定なし</option>
    <option value="<?php echo add_query_arg('sort', 'RENT_ASC'); ?>" <?php if($sort_val == 'RENT_ASC'): echo 'selected'; endif; ?>>賃料安い順</option>
    <option value="<?php echo add_query_arg('sort', 'RENT_DESC'); ?>" <?php if($sort_val == 'RENT_DESC'): echo 'selected'; endif; ?>>賃料高い順</option>
</select>

<?php $sort_val = get_query_var( 'sort', '' ); ?>

<option value="<?php echo add_query_arg('sort', 'RENT_ASC'); ?>" <?php if($sort_val == 'RENT_ASC'): echo 'selected'; endif; ?>>賃料安い順</option>

<option value="<?php echo add_query_arg('sort', 'RENT_DESC'); ?>" <?php if($sort_val == 'RENT_DESC'): echo 'selected'; endif; ?>>賃料高い順</option>

</select>

セレクトボックスの定義を設定しましたが、このままではセレクトボックスの値を変更しても画面遷移しないので、
セレクトボックスの値が変更した際に画面遷移するようにJavaScriptの処理を記述します。

JavaScript

  // 並び替えの条件が変わった時の処理
  $("select[name='sort']").change(function() {
    var href = $(this).val();
    if(href != ''){
      location.href = href;
    }
  });

// 並び替えの条件が変わった時の処理

$("select[name='sort']").change(function() {

var href = $(this).val();

if(href != ''){

location.href = href;

}

});