カテゴリーごとにページを分ける！実用的なサイト構築テクニック

前回の記事では、get_categories()を使って投稿をカテゴリー順に並べる方法を学習しました。しかし、すべてのカテゴリーの投稿を1つのページに表示すると、投稿数が増えた時に見づらくなってしまいます。

今回は、より実用的なアプローチとして「カテゴリーごとに個別のページを作成する」方法を詳しく解説します。この方法により、ユーザーは興味のあるカテゴリーだけを効率的に閲覧できるようになります。

今回の目標

• カテゴリーベースのパーマリンク設定をマスターする
• page-news.phpでカテゴリー一覧を表示する
• category.phpでカテゴリー別投稿一覧を作成する
• カテゴリーページのタイトル表示を最適化する

パーマリンク設定の確認と変更

カテゴリーページを作成するには、まずWordPressの管理画面でパーマリンク設定を確認・変更する必要があります。

管理画面での設定確認

まず、管理画面の設定→パーマリンクにアクセスしましょう。

現在の設定を確認すると

• カスタム構造: /%news%/%post_id%
• カテゴリーベース: 空欄

になっていることが確認できます。

この設定により、投稿の個別ページは http://sample.local/news/123 のようなURLになっています。

カテゴリーベースの設定変更

カテゴリーページを作成するため、同じパーマリンク設定画面でカテゴリーベースを設定します。

1. カテゴリーベースの入力欄に news/category を入力
2. 変更を保存をクリック（重要！）

この設定により、カテゴリーページのURLが以下のようになります。

http://sample.local/news/category/カテゴリースラッグ

URL構造の再確認

URL構造を整理します。

カテゴリー一覧の表示

現状ではお知らせページに投稿一覧が表示されています。

• お知らせページは、カテゴリーの一覧
• カテゴリーページは、カテゴリーに該当する投稿一覧
• 個別の投稿ページ

の構造に変更します。

まずは、お知らせページのテンプレート page-news.php を編集して、カテゴリー一覧を表示します。

<?php get_header();?>

<?php the_content(); ?>

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

echo '<ul class="category-list">' . PHP_EOL;

// カテゴリーごとにループ
foreach ($categories as $category) {
    echo '<li><a href="'.get_term_link($category->term_id).'">'.$category->name.'</a></li>' . PHP_EOL;
}

echo '</ul>' . PHP_EOL;
?>

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

<?php get_footer();?>

コードのポイント解説

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

前回の記事で学習したように get_categories は、カテゴリー一覧を取得する関数です。hide_empty => trueを指定することにより、投稿がないカテゴリーは表示対象から除外されます。

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

get_term_link()でカテゴリーページのURLを取得

get_term_link()関数は、先ほど設定したパーマリンク設定のカテゴリーベースに基づいてURLを自動生成します。

foreach ($categories as $category) {
    echo '<li><a href="'.get_term_link($category->term_id).'">'.$category->name.'</a></li>' . PHP_EOL;
}

表示結果の確認

ブラウザで http://sample.local/news にアクセスすると、カテゴリー一覧がリンク付きで表示されます。

カテゴリー別投稿一覧の作成

次に、カテゴリーページのテンプレート category.php を新規作成します。

<?php get_header();?>

<?php
// 現在表示中のカテゴリー情報を取得
$target = get_queried_object();

// そのカテゴリーに属する投稿を取得
$args = [
    'post_type' => 'post',
    'post_status' => 'publish',
    'orderby' => 'title',
    'order' => 'asc',
    'category__in' => [$target->term_id],
];

$query = new WP_Query($args);

echo '<ul class="post-list">' . PHP_EOL;

while ($query->have_posts()) {
    $query->the_post();
    
    echo '<li>'.
        '<span class="date">'.get_the_date('Y年m月d日').'</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>※このページは category.php テンプレートで表示されています</p>

<?php get_footer();?>

コードの重要ポイント

get_queried_object()で現在のカテゴリー情報を取得

category.phpでは、get_queried_object()で現在表示中のカテゴリー情報が取得できます。

$target = get_queried_object();

この関数は以下のような情報を取得できます。

• term_id: ターム ID
• name: ターム名
• slug: スラッグ
• description: 説明
• parent: 親タームの ID（0なら親なし）
• count: このタームに属する投稿の数

カテゴリーの指定

get_queried_object()はタームIDもスラッグも取得できます。よってカテゴリーの指定は、IDでもスラッグでも可能です。

'category__in' => [$target->term_id],

'category_name' => $target->slug,

表示結果の確認

カテゴリー一覧のリンクをクリックすると、該当するカテゴリーの投稿一覧が表示されます。

タイトル表示の最適化

カテゴリーページにアクセスした時、ページタイトル（h1要素）に最初の投稿のタイトルが表示されてしまう問题があります。

例：http://sample.local/news/category/web-sns にアクセスすると → 「SNS総フォロー100人を達成しました」（最初の投稿タイトル）が表示される

これを「Web/SNSのお知らせ」のように適切なタイトルに変更しましょう。

header.phpの修正

現在のタイトル表示部分

<?php if (!is_front_page()) : ?>
    <h1 class="page-title"><?php the_title(); ?></h1>
<?php endif; ?>

ここで!is_front_page()としている理由をおさらいしましょう。

フロントページ（トップページ）では、headerタグ内にあるサイト名がh1要素として表示されているため、mainタグ内には別のh1要素を表示しません。これによりSEO的に適切な1ページ1つのh1構造を維持しています。

これを以下のように修正します。

<?php
if (is_category()) {
    $category = get_queried_object();
    echo '<h1 class="page-title">'.$category->name.'のお知らせ</h1>'.PHP_EOL;
} elseif (!is_front_page()) {
    echo '<h1 class="page-title">'. get_the_title() .'</h1>'.PHP_EOL;
}
?>

コードの解説

is_category()でカテゴリーページかどうかを判定

if (is_category()) {
    // カテゴリーページの場合の処理
}

カテゴリー名を使ったタイトル表示

get_queried_objectのnameで現在表示中のカテゴリー名を取得できます。

$category = get_queried_object();
echo '<h1 class="page-title">'.$category->name.'のお知らせ</h1>'.PHP_EOL;

これにより、「Web/SNS」カテゴリーなら「Web/SNSのお知らせ」というタイトルが表示されます。

タイトル表示の確認

各カテゴリーページにアクセスして、適切なタイトルが表示されることを確認しましょう。

まとめ

今回の記事では、WordPressでカテゴリーごとに個別のページを作成する実装方法を学習しました。

学習した内容

• パーマリンク設定: カテゴリーベースの設定とURL構造の理解
• page-news.php: get_categories()とget_term_link()を使ったカテゴリー一覧表示
• category.php: get_queried_object()を使ったカテゴリー別投稿一覧
• タイトル最適化: is_category()を使った条件分岐によるタイトル表示

実装の流れ

1. パーマリンク設定でカテゴリーベースを設定
2. お知らせページでカテゴリー一覧を表示
3. カテゴリーページで該当投稿の一覧を表示
4. ページタイトルの表示を最適化

この実装により、ユーザーは興味のあるカテゴリーだけを効率的に閲覧できるようになり、大量の投稿があっても使いやすいWebサイトを構築できます。

次回予告

次回は、さらに細かい分類としてタグ機能の活用について詳しく解説します。

• お知らせページpage-news.phpにタグ一覧を表示
• tag.phpにタグに該当する投稿の一覧を表示
• カテゴリーとタグの使い分けのベストプラクティス

基本的な考え方はカテゴリーと同じですが、タグならではの特徴や実用的な活用方法についても詳しく解説します。お楽しみに！

成果物

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

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

［成果物］カテゴリーごとにページを分ける！実用的なサイト構築テクニック

【カテゴリーごとにページを分ける！実用的なサイト構築テクニック】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この投稿をシェアする