順序をデザインする！WP_Query並び替えの実践テクニック

前回の記事では、WP_Query関数による投稿一覧の表示について学習し、基本的な使い方をマスターしました。投稿をデータベースから取得してHTMLで表示する仕組みを理解できたところで、今回はWP_Queryの「並び替え機能」について詳しく学習していきます。

並び替え機能を自由に操ることで、投稿日順、タイトル順、ランダム表示など、サイトの用途に応じた最適な投稿一覧を作成できるようになります。

今回の目標

• カテゴリー表示の準備を行う
• 並び順の指定方法をマスターする
• 複数条件での並び替えを理解する
• カテゴリー順での並び替えを実現する方法を学習する

カテゴリー表示の準備作業

まずは実習用の投稿データを準備しましょう。以下の手順で、カテゴリーの作成と投稿への設定を行います。

カテゴリーを登録

管理画面の投稿→カテゴリーから、以下のカテゴリーを作成してください。

名前	スラッグ
新店舗	opening
WEB/SNS	web-sns
イベント	events
休業	closed
未分類	uncategorized

投稿にカテゴリーを設定

既存の投稿に以下のカテゴリーを設定してください。

投稿	カテゴリー
新店舗オープンのお知らせ	新店舗
SNS総フォロワー100人を達成しました	WEB/SNS
WordPress講習会開催のお知らせ	イベント
夏季休暇のお知らせ	休業
Webサイト開設のお知らせ	WEB/SNS
Hello world!	未分類

お知らせ一覧にカテゴリーを表示

前回作成したpage-news.phpを修正して、日付とカテゴリーを表示するようにしましょう。

変更前のコード：

echo '<li><a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a></li>'.PHP_EOL;

変更後のコード：

$categorys = get_the_category($post->ID);
if(isset($categorys)){
    $category = $categorys[0]->name;
} else {
    $category = '未設定';
}
echo '<li>'.
         '<span class="date">'.get_the_date('Y年m月d日').'</span>'.
         '<span class="category">'.$category.'</span>'.
         '<a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.
     '</li>'.PHP_EOL;

この修正により、各投稿の日付とカテゴリー名が表示されるようになります。get_the_category()関数は配列を返すため、[0]で最初のカテゴリーを取得しています。

1行目

get_the_categoryでIDに紐づくカテゴリーを取得

2行目～6行目

isset関数で$categorys変数に値があるかどうかチェックしています。値がある場合、1つ目のカテゴリー（$cagegorys変数の0番目）を取得。値がなければ「未設定」とします。

7行目～11行目

コードを読みやすいように複数行に分けました。get_the_dateで投稿日を取得。$category変数でカテゴリーを表示。スタイルシートで装飾できるようにspanタグにクラスを追加しています。

表示を確認してみよう

page-news.phpの変更が終わったら保存してお知らせ一覧ページを確認してみましょう。

これで下準備が整いました。それでは、並び替えをしてみましょう。

並び替え機能の基本

現在のpage-news.phpでは、以下のような基本的な抽出条件を使用しています。

$args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
];

この状態では並び替えの指定がないため、WordPressのデフォルトである投稿日（date）の降順（desc）で表示されます。

並び順の指定方法

WP_Queryでは、検索条件に並び替順（order）と並び替え項目（orderby）を指定することができます。

並び順の種類：

• asc → 昇順（A→Z、古い→新しい）
• desc → 降順（Z→A、新しい→古い）

よく使う並び替え項目

並び替えてみよう

タイトルの昇順で並び替え

page-news.phpの抽出条件を以下のように修正してみましょう。

$args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
    'orderby'        => 'title',
    'order'          => 'asc',
];

この設定により、投稿一覧の表示順序が以下のように変わります。

1. Hello world!
2. SNS総フォロワー100人を達成しました
3. Webサイト開設のお知らせ
4. WordPress講習会開催のお知らせ
5. 夏季休暇のお知らせ
6. 新店舗オープンのお知らせ

タイトルがアルファベット順（あいうえお順）で並び替えられていることが確認できましたか？

複数条件で並び替え

場合によっては複数の条件で並び替えたい時もあります。例えば、「まずタイトルで並び替えて、同じタイトルがあった場合は投稿日で並び替える」といった複雑な並び順を指定できます。

複数条件を指定する場合は、orderbyを配列にします。

タイトルの昇順、投稿日の降順を同時に指定

$args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
    'orderby'        => [
        'title' => 'ASC',
        'date' => 'DESC',
    ]
];

この設定では、まずタイトルの昇順で並び替え、タイトルが同じ投稿がある場合は投稿日の降順で並び替えられます。

その他の並び替えパターン

ランダム表示

毎回異なる順序で投稿を表示したい場合

$args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
    'orderby'        => 'rand',
];

ページを表示するたびに並びがことなるため、読者は新鮮な感覚でWebサイトを閲覧できます。ブログなどに有効ですね。

更新日順

最近更新された投稿から表示したい場合

$args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
    'orderby'        => 'modified',
    'order'          => 'DESC',
];

投稿日ではなく更新日順に並び替えることもできます。変更を知らせたいときに便利です。

カテゴリー順での並び替えについて

この記事で学んだ方法だけでは、カテゴリーで並び替えることはできません。それは、１つの記事に複数のカテゴリーを設定できるからです。

しかし、あるテクニックを使うことで、カテゴリー順での並び替えを実現できます。そのためには、まず抽出条件を覚える必要があります。

その方法を次回以降の記事で紹介しますのでお楽しみに。

まとめ

今回の記事では、WP_Queryの並び替え機能について詳しく学習しました。重要なポイントをまとめると：

• 基本的な並び替え：orderbyとorderを使った単一条件での並び順指定
• 複数条件での並び替え：配列を使った複雑な並び順の実現
• その他の並び替えパターン：ランダム、更新日順、ID順など用途に応じた選択
• カテゴリー順の並び替え：次回学ぶ抽出条件と組み合わせて実現

並び替え機能をマスターすることで、サイトの目的に応じた最適な投稿一覧を作成できるようになります。特に、カテゴリー順での並び替えは実用的なテクニックとして覚えておくと便利です。

次回予告

次回は 抽出条件 について学習します。

• カテゴリーを指定した抽出
• 投稿日を指定した抽出

カテゴリーを指定した抽出を覚えると、カテゴリー順ができるようになります。次回もお楽しみに！

成果物

この記事で作成した成果物は、以下のページでまとめて確認することができます。

成果物をまとめて確認する

［成果物］順序をデザインする！WP_Query並び替えの実践テクニック

【順序をデザインする！WP_Query並び替えの実践テクニック】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この投稿をシェアする