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

ワードプレス

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

-ワードプレス

関連記事

ページの最初の画像を自動でアイキャッチにする

読みやすさや視線誘導のために、記事一覧にアイキャッチ画像を設定します。 「読んでみたい」と思ってもらえるアイキャッチ画像を準備したいですね! WordPressでは編集画面右下の「アイキャッチ画像を設 …

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

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

特定のページだけにcssやjsを読み込ませたい!

JavaScriptやcssのファイル、読み込まれるのに時間がかかりページが重くなります。 必要なページだけにリンクさせたいですよね。 今日はページごとにファイルをリンクする方法をまとめました! ❶h …

固定ページでphpを使いたい

例えばトップページを固定ページで作成したとき、お知らせの新着一覧を固定ページ上で好きな位置に配置したいな、と考えたことはありませんか?

よく使うWordPressテンプレートタグ

URLを出力するWordPressのテンプレートタグ phpファイルにテンプレートタグを使用することで、自動でURLを取得して表示してくれます。ドメインが変わってもコードの修正なし! ホームページのU …