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

ワードプレス

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()」を使用しました。

-ワードプレス

関連記事

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

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

最初の数行を表示させて、残りは会員限定で閲覧できるWPの限定コンテンツを作りたい

【プラグイン無し】moreタグ以降はログインで表示させる限定をコンテンツを作成! 今回はログインフォーム、限定コンテンツについて調べました! やりたいことは下記になります。 ・コンテンツの最初の数行を …

WordPressのお引っ越し。アイキャッチ画像の移行も大丈夫?

プラグインを使ってWordPressを移行する WordPressの移行で今よく使っているのが、アイキャッチ画像もちゃんと移してくれる「Attachment Importer」です。(「WordPre …

WordPressテーマ「lightning」カスタム投稿

「lightning」のカスタム投稿 WordPress無料テーマで人気の「lightning」。 サポートの終了しているテーマ「BizVektor」から後継の「lightning」に移行したという方 …

【MW WP Form】フォーム入力が必要なダウンロードボタンを作りたい!

MW WP Formで作る資料ダウンロード用フォーム 先日、お客さまの要望で「名前などを入力してもらってから資料をダウンロードできるような仕組みにしてほしい」というのがありました。 登録すると資料がも …