カテゴリーなどの一覧ページに並び順を変更できるボタンをつけたい

投稿記事一覧をソートするボタンを作りたい！

よくネットショップで見かける、値段の安い順、高い順、人気順など見たい順番を選べるボタン。
WordPressのカテゴリー一覧ページなどに設置できれば、ユーザーが必要な記事を見つけやすくなります。

一覧ページをカスタムフィールドの値で並べ替える準備

まず、カスタムフィールドをプラグイン「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’：取得するカスタムフィールドの値

一覧ページに並び替えボタンを設置

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’ , //投稿日で並び替える

直接リンクしてソートするセレクトボックスを設置

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

※こちらも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>

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

こちらを参考にさせていただきました。本当にありがとうございます。

参考

WordPress（ワードプレス）で投稿一覧にページャーやソートを付ける方法「WP-PageNavi」｜EMONA INC.

add query argの注意事項

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

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

参考

関数リファレンス/add query arg｜WordPress Codex 日本語版

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

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

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

今回のボタンの場合、多分いらないと思いますが念のため「esc_url()」を使用しました。