カテゴリーなどの投稿記事の並び順を変更！一覧をソートするボタン

よくネットショップで見かける、値段の安い順、高い順、人気順など見たい順番を選べるボタン。
ユーザーの優先順位によって表示を変えられるので、必要な記事を見つけやすくなります。

投稿記事一覧をソートするボタンの作り方

ステップ①　カスタムフィールドの設定とfunction.phpでの関数の定義

まず、カスタムフィールドをプラグイン「Advanced Custom Fields」で設定します。
作成したのは「価格」「曜日」「日にち」です。
こちらを入力した投稿記事一覧をこれらのカスタムフィールドの値で並び替えたいと思います。

まずカスタムフィールドのパラメータを追加するためfunction.phpに下記コードを記述します。

//カスタムフィールドの値でソート
function add_meta_query_vars( $public_query_vars ) {
$public_query_vars[] = 'meta_key';
$public_query_vars[] = 'meta_value';
return $public_query_vars;
}
add_filter( 'query_vars', 'add_meta_query_vars' );

'meta_key'：取得するカスタムフィールドのフィールド名
'meta_value'：取得するカスタムフィールドの値
 

ステップ②-1　一覧ページに並び替えボタンを設置

add_query_argを使ってURLにパラメータを追加します。

※PHPのため、固定ページに直接入力できません。

<ul>
 	<li><a href="<?php echo esc_url(add_query_arg( array('meta_key' => 'sale-date', 'orderby' => 'meta_value_num', 'order' => 'ASC'), 'http://example.com/aaaaa/') ); ?>">日付順</a></li>
 	<li><a href="<?php echo esc_url(add_query_arg( array('meta_key' => 'sale-week', 'orderby' => 'meta_value_num', 'order' => 'ASC'), 'http://example.com/aaaaa/') ); ?>">曜日順</a></li>
 	<li><a href="<?php echo esc_url(add_query_arg( array('meta_key' => 'sweets-price', 'orderby' => 'meta_value_num', 'order' => 'DESC'), 'http://example.com/aaaaa/') ); ?>">価格高い順</a></li>
 	<li><a href="<?php echo esc_url(add_query_arg( array('meta_key' => 'sweets-price', 'orderby' => 'meta_value_num', 'order' => 'ASC'), 'http://example.com/aaaaa/') ); ?>">価格安い順</a></li>
 	<li><a href="<?php echo esc_url(add_query_arg( array('order' => 'DESC', 'sort' => 'date'), 'http://example.com/aaaaa/')  ); ?>">投稿新着順</a></li>
</ul>

 
'meta_key' => 'xxxxxx',//カスタムフィールドのキー。こちらにフィールド名を入れました。
'orderby' => 'meta_value_num',//カスタムフィールドの値で並び順を変更
'order' => 'ASC', //ASCで昇順、DESCで降順
'sort' => 'date' , //投稿日で並び替える
URL部分（http://example.com/aaaaa/）は置き換えてください。

ステップ②-2　セレクトボックスによるソート

こちらはセレクトボックスバージョンです。

※PHPのため、固定ページに直接入力できません。

<select onchange="location.href=value;">
<option value="">並び順を選択</option>
<option value="<?php echo esc_url(add_query_arg( array('meta_key' => 'sale-date', 'orderby' => 'meta_value_num', 'order' => 'ASC'), 'http://example.com/aaaaa/') ); ?>">日付順</option>
<option value="<?php echo esc_url(add_query_arg( array('meta_key' => 'sale-week', 'orderby' => 'meta_value_num', 'order' => 'ASC'), 'http://example.com/aaaaa/') ); ?>">曜日順</option>
<option value="<?php echo esc_url(add_query_arg( array('meta_key' => 'sweets-price', 'orderby' => 'meta_value_num', 'order' => 'DESC'), 'http://example.com/aaaaa/') ); ?>">価格高い順</option>
<option value="<?php echo esc_url( add_query_arg( array('meta_key' => 'sweets-price', 'orderby' => 'meta_value_num', 'order' => 'ASC'), 'http://example.com/aaaaa/' ) ); ?>">価格安い順</option>
<option value="<?php echo esc_url(add_query_arg( array('order' => 'DESC', 'sort' => 'date'), 'http://example.com/aaaaa/') ); ?>">投稿新着順</option>
</select>

 

並び順を選択 日付順 曜日順 価格高い順 価格安い順 投稿新着順

↑こちらはサンプルです。リンクはつけていません。

add query argの注意事項

WordPress Codex 日本語版にクロスサイトスクリプティングについての注意事項がありました。

現在 WordPress URL "http://blog.example.com/client/?s=word" にいると仮定して...リンクを出力する前にesc_url()を使用する必要があることに注意してください。この関数はURLをエスケープしませんので、クロスサイトスクリプティングの原因になります。

 

esc_url()　サニタイジング処理について

情報漏洩やウイルス感染などの被害を起こす不正なスクリプトの動作を防ぐため、サニタイジング処理が必要な場合があります。
タグやjavascriptを実行させないように「esc_url()」で囲んで、下のように文字列に置き換え、無害化します。

「<」「>」「&」「'」「"」⇒「&lt;」「&gt;」「&amp;」「&#39;」「&quot;」

今回のボタンにも「esc_url()」を使用しました。

おわりに

記事が多い場合、ソートや絞り込みができると便利になります。
ユーザーにとって使いやすいサイトになるため、制作時に必要に応じて提案できたらと思います。