WordPressの投稿一覧をボタンクリックで並び替える方法

2016/04/16
2016/05/02
WordPress
並び替え, plugin, WordPress

ECサイトによくある商品一覧を条件毎によって並び替えをするボタンですが、さりげなく便利ですね。
WordPressでも、トップページやアーカイブページの投稿一覧を並び替えするボタンを実装することができます。

URLにパラメーターをつける

WordPressは基本URLにパラメータを追加することで投稿の並び替え・絞り込みができます。 WP_Queryのパラメーターを使い、様々な条件を指定することができます。

パラメーター	例	概要
order	‘DESC’	‘ASC’で昇順、’DESC’で降順（初期値は’DESC’）
orderby	‘date’	どのパラメーターでソートするか（初期値は’date’） ‘none’:並び替えない ‘ID’:記事IDでソート ‘author’:投稿者でソート ‘title’タイトルでソート ‘name’:ユーザー名でソート ‘date’:日付でソート ‘modified’:更新日でソート ‘parent’親ページのIDでソート ‘rand’:ランダムでソート ‘comment_count’:コメント数でソート ‘menu_order’:ページの表示でソート ‘meta_value’:カスタムフィールドの値を文字列としてソート ‘meta_value_num’:カスタムフィールドの値を数値としてソート ‘post_in’配列で指定された記事IDの並び順を維持

ただし、カスタムフィールドのパラメーターはデフォルトでは使えないのでfunctions.phpをカスタマイズする必要があります。

functions.php

<?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' );
?>

｢query_vars｣フィルターフックを使い、カスタムフィールドのキーと値がURLパラメータとして認識されるようにします。
カスタムクエリの追加方法はWordPress Codex日本語版に詳しく記載されてます。

カスタムクエリ

並び替えボタンを作成する

実際に並び替えをするには<a>タグを使用します。
｢add query arg｣関数を使い、クエリを付けたURLを取得します。

投稿順で並び替える

<ul>
	<li><a href="<?php echo add_query_arg( array('order' => 'DESC') ); ?>">投稿が新しい順</a></li>
	<li><a href="<?php echo add_query_arg( array('order' => 'ASC') ); ?>">投稿が古い順</a></li>
</ul>

上記のコードで記事の新しい順、古い順の並び替えができます。

実際にURLにどのようなにパラメーターがつくかというと

新しい順 => https://yuji-okayama-designersworks.com/?order=DESC
古い順 => https://yuji-okayama-designersworks.com/?order=ASC

こんな感じでパラメーターが追加されます。

まとめ

｢Intuitive Custom Post Order｣というプラグインを有効にしていると、｢order｣で降順、昇順の並び替えがうまくいきませんでした。
記事並び替え系のプラグインを使用しているとバッティングして挙動がおかしくなることがありそうなので、その辺は考えてカスタマイズをしなければならないですね。