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
こんな感じでパラメーターが追加されます。
人気順で並び替える
以前書いた記事、WordPressの投稿を並び替える方法にも書きましたが、プラグインの｢WP-PostViews｣を使用すれば、記事の回覧数をカスタムフィールドの｢views｣というmeta_keyに値（回覧数）を保存するようになります、この値を利用して人気順としてソートすることができます。
<ul>
<li><a href="<?php echo add_query_arg( array('meta_key' => 'views', 'orderby' => 'meta_value_num', 'order' => 'DESC'), get_pagenum_link(1) ); ?>">人気高い順</a></li>
<li><a href="<?php echo add_query_arg( array('meta_key' => 'views', 'orderby' => 'meta_value_num', 'order' => 'ASC'), get_pagenum_link(1) ); ?>">人気低い順</a></li>
</ul>
｢get_pagenum_link(1)｣という記述ですが、並び替えをしたとき強制的に1ページ目を表示させます。
まとめ
｢Intuitive Custom Post Order｣というプラグインを有効にしていると、｢order｣で降順、昇順の並び替えがうまくいきませんでした。
記事並び替え系のプラグインを使用しているとバッティングして挙動がおかしくなることがありそうなので、その辺は考えてカスタマイズをしなければならないですね。
