WordPressの投稿一覧ページに並び替え機能をプラグイン無しで実装する方法
WordPress（ワードプレス）の投稿やカスタム投稿の一覧ページで、並び替えができるボタンを設置する方法を紹介します。プラグインを使用することなく無料で実装することができます。
使用シーンとしては、賃貸物件一覧ページでの「賃料が高い順」や「築年数が古い順」、商品一覧ページでの「価格が安い順」などです。
並び替え機能を設置することで、投稿数が多くなった場合でも、ユーザーが求める情報をできるだけスムーズに提供することが可能になります。
並び替え機能実装コード
ここでは不動産サイトを想定して、賃貸物件一覧ページでの実装を紹介します。
カスタム投稿の設定方法、Advanced Custom Fields（ACF）の設定方法などは省略しますが、ACFについては使い方を記事にしていますので、ぜひご覧ください。
Advanced Custom Fieldsの基本的な使い方と全フィールドタイプの紹介
まずは実装コードを先に、その後実装手順を紹介します。
<form action="<?php echo home_url('/property/'); ?>" method="get">
<button type="submit" name="rent" value="asc">賃料が安い順</button>
<button type="submit" name="rent" value="desc">賃料が高い順</button>
<button type="submit" name="date" value="desc">築年が新しい順</button>
<button type="submit" name="date" value="asc">築年が古い順</button>
</form>
<?php
if(isset($_GET['rent'])) { //賃料順
$orderSet = $_GET['rent'];
$metaKey = 'rent';
} elseif(isset($_GET['date'])) { //築年順
$orderSet = $_GET['date'];
$metaKey = 'date';
} else {
$orderSet = 'desc';
}
?>
<?php
$args = array(
'post_type' => 'property',
'posts_per_page' => 6,
'meta_key' => $metaKey,
'orderby' => 'meta_value_num',
'order' => $orderSet
);
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()): ?>
<div class="property-wrapper">
<?php while($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="property-list">
<h2><?php the_title(); ?></h2>
<?php
$rent = get_field('rent'); //賃料
$date = get_field('date'); //築年月
?>
<dl>
<dt>賃料</dt>
<dd><?php echo number_format($rent); ?>円</dd>
<dt>築年月</dt>
<dd><?php echo date('Y年m月', strtotime($date)); ?></dd>
</dl>
</div>
<?php endwhile; ?>
</div>
<?php else: ?>
<p>掲載情報がありません。</p>
<?php endif; ?>カスタム投稿として賃貸物件を用意し、一覧ページに出力するための記述です。
通常の一覧ページに出力する内容とは異なる処理を行うため、WP_Queryを使用します。
仕組みとしては、formタグを使用して各buttonに設定した値（カスタムフィールド）を元に、出力されるカスタム投稿一覧の並び順が切り替わります。
さらに具体的には、formでGET送信したname値（カスタムフィールドのフィールド名）とvalue値（昇順のascと降順のdesc）を元に、処理を行います。
並び替え機能実装手順
並び替えボタンの作成
<form action="<?php echo home_url('/property/'); ?>" method="get">
<button type="submit" name="rent" value="asc">賃料が安い順</button>
<button type="submit" name="rent" value="desc">賃料が高い順</button>
<button type="submit" name="date" value="desc">築年が新しい順</button>
<button type="submit" name="date" value="asc">築年が古い順</button>
</form>並び替えを行うためのボタンを用意します。
actionには現在のURLを指定します。※ここではカスタム投稿のスラッグ「property」
| name | rent カスタムフィールド名、賃料 |
| name | date カスタムフィールド名、築年月 |
| value | asc（昇順） 賃料が安い順、築年が古い順 |
| value | desc（降順） 賃料が高い順、築年が新しい順 |
ボタンを押すことで、カスタムフィールドの情報と並び順（昇順か降順）が送信されます。※ページが再読み込みされます。
並び替え情報取得
<?php
if(isset($_GET['rent'])) { //賃料順
$orderSet = $_GET['rent'];
$metaKey = 'rent';
} elseif(isset($_GET['date'])) { //築年順
$orderSet = $_GET['date'];
$metaKey = 'date';
} else {
$orderSet = 'desc';
}
?>並び替えボタンでGET送信された情報を元に条件分岐を行い、条件に応じて変数に代入します。
| $orderSet | GET送信された並び順が代入されます |
| $metaKey | GET送信された情報を元に、カスタムフィールド名が代入されます |
投稿一覧の表示
<?php
$args = array(
'post_type' => 'property',
'posts_per_page' => 6,
'meta_key' => $metaKey,
'orderby' => 'meta_value_num',
'order' => $orderSet
);
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()): ?>
<div class="property-wrapper">
<?php while($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="property-list">
<h2><?php the_title(); ?></h2>
<?php
$rent = get_field('rent'); //賃料
$date = get_field('date'); //築年月
?>
<dl>
<dt>賃料</dt>
<dd><?php echo number_format($rent); ?>円</dd>
<dt>築年月</dt>
<dd><?php echo date('Y年m月', strtotime($date)); ?></dd>
</dl>
</div>
<?php endwhile; ?>
</div>
<?php else: ?>
<p>掲載情報がありません。</p>
<?php endif; ?>並び替えボタンで送信された情報と代入された変数を元に、投稿の一覧を表示させます。
| post_type | property カスタム投稿「賃貸物件」を指定 |
| posts_per_page | 6 表示件数を指定 |
| meta_key | $metaKey 本来はカスタムフィールド名を指定 ここでは並び替え情報が代入された変数を指定 |
| orderby | meta_value_num 通常は文字列として扱われてしまうため、数字として判断するためにmeta_value_numを指定 |
| order | $orderSet 並び順を指定 ここでは並び替え情報（昇順か降順）が代入された変数を指定 |
※ループ内の情報については、通常の一覧表示方法と同様のため、ここでは省略します。
その他参考
今回は不動産サイトを想定した賃貸物件を例に並び替え機能を紹介しました。並び替え機能については、店舗情報や商品情報を扱うサイトなどでも使用することができます。
WordPressにはプラグインで実装するようなことでも、少し手を加えることで実装できることがあります。プラグインは確かに便利ですが、開発やサポートが途中で終了してしまうことや、WordPressを重くしてしまう要因にもなります。
そういった問題を解決できるメリットが今回紹介した機能にあります。今後も同様な解決案を実例を元に紹介できればと考えています。
