カテゴリー順で並べる！WP_Query応用テクニック

前回の記事では、WP_Queryの抽出条件について詳しく学習し、特定のカテゴリーや日付での投稿絞り込み方法をマスターしました。今回は、これまでの学習の応用として、投稿をカテゴリー順に並べて表示する実践的なテクニックを学習します。

WP_Queryの標準機能では直接カテゴリー順に並べることができませんが、カテゴリー一覧を取得してループ処理を組み合わせることで、この課題を解決できます。

今回の目標

• カテゴリー順に投稿を並べる仕組みを理解する
• get_categories()関数の使い方をマスターする
• カテゴリーと投稿を階層構造で表示する方法を学ぶ
• プラグインを使ったカテゴリー順序管理を実践する

関連する記事

条件を極める！WP_Query抽出条件の実践テクニック

WordPressのWP_Queryを使って、特定のカテゴリーや期間の投稿を絞り込む抽出条件について解説。カテゴリー指定、日付による絞り込み、複数条件の組み合わせなど、サイトのニーズに応じた柔軟な投稿一覧を作成する実践的なテクニックを学習できます。

関連する記事

カテゴリー順で並べる！WP_Query応用テクニック

WordPressの標準機能では直接カテゴリー順に投稿を並べることができませんが、カテゴリー一覧を取得してループ処理を組み合わせることで実現できます。複数のカテゴリーを含む投稿一覧を、カテゴリー順に並べて表示する実践的なテクニックを詳しく解説します。

投稿をカテゴリー順に並べる

前回までの学習で、orderbyを使った並び替えと、特定のカテゴリーを抽出する方法を学びました。しかし、「複数のカテゴリーを含む投稿一覧を、カテゴリー順に並べて表示する」ことは、WP_Queryの標準機能だけでは実現できません。

なぜなら、orderbyパラメータにはカテゴリーを指定する項目がないからです。1つの投稿に複数のカテゴリーを設定できるWordPressの仕様上、どのカテゴリーを基準に並び替えるかが曖昧になってしまうためです。

考え方（設計）

orderbyではカテゴリー順に並べられませんが、以下のアプローチで同等の結果を実現できます：

1. カテゴリー一覧を取得 → get_categories()関数を使用
2. カテゴリーごとにループ → foreachでカテゴリーを順番に処理
3. 各カテゴリーに属する投稿を抽出 → category__inで該当する投稿を取得
4. 階層構造で表示 → カテゴリー名の下に投稿一覧を表示

この方法により、「カテゴリー順に並べたのと同等」の表示を実現できます。

実践 – コードの実装

page-news.phpを以下のように修正しましょう。

<?php get_header();?>
    <?php the_content(); ?>

    <?php
    	// カテゴリー一覧を取得
    	$categories = get_categories([
        	'hide_empty' => true, // 投稿がないカテゴリーは除外
    	]);

        echo '<ul class="post-list">' . PHP_EOL;
        
        // カテゴリーごとにループ
        foreach ($categories as $category) {
            
            // そのカテゴリーに属する投稿を取得
            $args = [
                'post_type' => 'post',
                'post_status' => 'publish',
                'orderby' => 'title',
                'order' => 'asc',
                'category__in' => [$category->term_id],
            ];
            
            $query = new WP_Query($args);
            
            
            while ($query->have_posts()) {
                $query->the_post();
                
                echo '<li>'.
         			'<span class="date">'.get_the_date('Y年m月d日').'</span>'.
         			'<span class="category">'.$category->name.'</span>'.
         			'<a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.
     		 		'</li>'.PHP_EOL;
            }
            
            wp_reset_postdata(); // 投稿データをリセット
            
        }
        
        echo '</ul>' . PHP_EOL;
    ?>		

    <p>※このページは page-news.php テンプレートで表示されています</p>
<?php get_footer();?>

コードの解説

get_categories()でカテゴリー一覧を取得

// カテゴリー一覧を取得
$categories = get_categories([
	'hide_empty' => true, // 投稿がないカテゴリーは除外
]);

get_categoriesはカテゴリー一覧をを取得するWordPress関数です。

hide_emptyパラメーター（投稿がないカテゴリーを非表示）をtrueにすることで抽出されるカテゴリーは、必ず該当する投稿があることになります。

カテゴリーごとにループ処理

// カテゴリーごとにループ
foreach ($categories as $category) {
    
    // そのカテゴリーに属する投稿を取得
    $args = [
        'post_type' => 'post',
        'post_status' => 'publish',
        'orderby' => 'title',
        'order' => 'asc',
        'category__in' => [$category->term_id],
    ];
    
    // 省略
}

$categories変数に格納されたカテゴリー一覧をforeachで１つずつ処理します。

投稿の抽出条件に 'category__in' => [$category->term_id] を指定することで、指定したカテゴリーに紐づく投稿だけが抽出されます。

投稿抽出のリセット

$query = new WP_Query($args);

while ($query->have_posts()) {
	$query->the_post();
	// 省略
}

wp_reset_postdata(); // 投稿データをリセット

foreachのループでWP_Queryによるデータ抽出を行っています。このように連続してWP_Queryを実行する際は、必ずwp_reset_postdataでWP_Queryをリセットしてください。該当データがないのに前回のデータが残るなど、予期せぬ動作をすることがあります。

表示結果

表示結果をより見やすくするために、スタイルシートで見た目を調整します。main.cssに以下のスタイルを追加しました。

.post-list .date {
    display: inline-block;
    width: 9.0rem;
}

.post-list .category {
    display: inline-block;
    width: 6.0rem;
}

このスタイルによって日付とカテゴリーの幅が揃って、見やすくなります。

それでは、投稿一覧を見てみましょう。これで、カテゴリー順に投稿が並んで表示されるようになりました。

カテゴリー自体を順番に並べる

現在のコードでは、カテゴリーはWordPressのデフォルト順序で並んでいます。しかし、実際のWebサイトでは「重要なカテゴリーを上に表示したい」「特定の順序で並べたい」といったニーズがあります。

WordPress標準の機能では、カテゴリーの表示順序を自由に変更することが意外と難しいのが現実です。管理画面でドラッグ&ドロップによる直感的な並び替え機能や順序の入力は提供されていません。

そこで、プラグインの力を借りることをおすすめします。

Category Order and Taxonomy Terms Orderの導入

カテゴリーの並び順を管理するプラグインとして、Category Order and Taxonomy Terms Orderが特におすすめです。

関連する記事

固定ページ一覧を最適化しよう！プラグインの導入とAdmin Columnsの活用

固定ページ一覧の管理を効率化するために、Admin Columnsプラグインを導入し、「スラッグ」や「順序」を一覧に表示する方法を解説します。プラグインの基本概念から導入手順、実践的な順序設定テクニックまでを丁寧に紹介し、効率的なページ管理を実現します。

このプラグインの特徴

• 直感的な操作 → ドラッグ&ドロップで簡単に並び替え
• 軽量 → 動作が軽く、サイトのパフォーマンスに影響しない
• 安全性 → 長期間メンテナンスされている信頼できるプラグイン

インストール手順

1. 管理画面のプラグイン→新規追加をクリック
2. 検索ボックスに「Category Order」と入力
3. プラグインを見つけて今すぐインストールをクリック
4. インストール完了後、有効化をクリック

Category Order and Taxonomy Terms Orderによるカテゴリーの並び替え

プラグインを有効化すると、管理画面に新しいメニューが追加されます。

並び替え手順

1. 管理画面の確認
   • サイドメニューの投稿にタクソノミーの並び順が追加されていることを確認

2. カテゴリーの並び替え
   • カテゴリーをドラッグ&ドロップで希望の順序に並び替え
   • Updateボタンをクリックして保存

1. 新店舗
2. イベント  
3. WEB/SNS
4. 休業
5. 未分類

プラグインによる並び順は、get_categories()で自動的に反映されます。

再確認

Category Order and Taxonomy Terms Order による並び替えが完了したら、再度、投稿一覧を表示して以下の点を確認しましょう。

チェックポイント

1. カテゴリーの並び順
   • プラグインで設定した順序通りに表示されているか
   • 管理画面での並び順とフロントエンドでの表示が一致しているか
2. 投稿の表示
   • 各カテゴリーに属する投稿が正しく表示されているか

まとめ

今回の記事では、WP_Queryの応用テクニックとして、投稿をカテゴリー順に並べる方法を学習しました。

技術的なポイント

• get_categories() → カテゴリー一覧の取得
• foreachループ → カテゴリーごとの処理
• category__in → 特定カテゴリーの投稿抽出
• wp_reset_postdata() → 投稿データのリセット

設計思想

• WordPress標準機能の制約を理解する
• 複数の機能を組み合わせて課題を解決する
• プラグインを適切に活用する
• ユーザビリティを考慮した表示設計

プラグイン活用

• Category Order and Taxonomy Terms Order → カテゴリー順序の管理
• 直感的なドラッグ&ドロップ操作

この手法をマスターすることで、企業サイトのニュース一覧やブログのカテゴリー別表示など、実践的なWebサイト構築に活用できるようになります。

次回

次回は、さらに実用的な機能として「カテゴリーごとにページを分ける」方法について詳しく解説します。

次回の内容

• category.phpテンプレート → カテゴリー専用ページの基礎

category.phpテンプレートの作成方法について詳しく解説します。カテゴリー別のページを作成することで、より使いやすいWebサイトを構築できるようになります。お楽しみに！

成果物

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

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

［成果物］カテゴリー順で並べる！WP_Query応用テクニック

【カテゴリー順で並べる！WP_Query応用テクニック】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この投稿をシェアする