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

ワードプレス

2021-11-15

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

よくネットショップで見かける、値段の安い順、高い順、人気順など見たい順番を選べるボタン。
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>

 

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

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

add query argの注意事項

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

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

 

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

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

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

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

-ワードプレス

関連記事

バージョンアップしたContact Form 7 に入力確認画面をつけたい!

入力確認画面が作れるプラグイン「Contact Form 7 Multi-Step Forms」 Contact Form 7をアップデートしたらフォームが動かなくなってしまった! 調べてみると確認画 …

WordPress よく使うおすすめプラグイン

プラグインが増えれば内容によってスクリプトが増え、ページの読み込みが遅くなるので、使い過ぎないようにします。私が今まで制作していて本当に助かっているプラグインはこちらです!

MW WP Formセレクトボックスに特定カテゴリーの記事タイトルを自動で表示させたい!

フォームセレクトボックスの選択肢をカテゴリーと連動 フォームの質問事項が頻繁に変わるとき、例えば商品が変わる度、注文フォームをいちいち修正するのは慣れていないと大変です。 新しい記事をアップしたら自動 …

MW WP Formが動かない!確認画面にいかない!原因は?

入力画面でループして確認画面やエラーの表示に遷移しない、せっかく入力したのに確認画面を押すと、リロードされて消えてしまい、先に進まない…。なかなか解決せずはまってしまったMW WP Form。試してみた内容をご紹介しています。

【MW WP Form】ラジオボタンの選択項目によって分岐させたい!

ラジオボタンの選択によって表示・非表示を変える 難しいと思って避けてた案件… 下のサンプルのように、選択したラジオボタンによって表示・非表示を切り変えるフォームを作ります! 資料請求のラジオボタンで「 …