説明付きカテゴリー一覧を自動生成（HTML版）する方法

この記事では、WordPressの全カテゴリ一覧（索引ページ）を自動生成する方法を紹介します。
投稿数やカテゴリ説明も同時に表示し、階層構造（親・子・孫カテゴリ）をわかりやすく整理する「まとめ記事」ページを作ります。

1 実装のポイント

• ショートコード [category_index] でカテゴリ一覧を自動出力
• 親・子カテゴリを階層構造で表示（入れ子）
• カテゴリ名・件数・説明を表示
• CSSで階層インデント＋親カテゴリ強調

2 functions.php にコードを追加

注意： 必ず子テーマの functions.php に追加してください。親テーマに直接追加するとアップデートで消える可能性があります。

//----------------------------------------------------
// ショートコード [category_index]：カテゴリ索引ページ
//----------------------------------------------------
function wp_tips_render_category_tree($parent_id = 0, $level = 0) {
    $subcats = get_categories(['parent' => $parent_id, 'hide_empty' => false]);
    if (empty($subcats)) return;

    echo '<ul class="category-list level-' . $level . '">';
    foreach ($subcats as $cat) {
        $link = get_category_link($cat->term_id);
        $desc = $cat->description ? esc_html($cat->description) : '';

        echo '<li>';
        echo '<a href="' . esc_url($link) . '">' . esc_html($cat->name) . '</a>';
        echo '<span class="cat-count">（' . intval($cat->count) . '件）</span>';

        if ($desc) echo '<p class="cat-desc">' . $desc . '</p>';

        // 再帰呼び出し
        wp_tips_render_category_tree($cat->term_id, $level + 1);

        echo '</li>';
    }
    echo '</ul>';
}

//----------------------------------------------------
// ショートコード [category_index]：カテゴリ索引ページ
//----------------------------------------------------
function wp_tips_category_index_shortcode() {
    ob_start();
    echo '<div class="category-index">';
    echo '<h3>WordPress Tipsまとめ（全カテゴリ索引）</h3>';
    wp_tips_render_category_tree(0, 0);
    echo '</div>';
    return ob_get_clean();
}
add_shortcode('category_index', 'wp_tips_category_index_shortcode');
  

2.1 ポイント

上記コードをテーマの functions.php に追加すると、ショートコード [category_index] でカテゴリー一覧を表示できます。

記事内で表示する場合：

[category_index]
  

3 汎用CSS

/* ------------------------------------------------
 * ショートコード [category_index]：カテゴリ索引ページ
 * --------------------------------------------- */

.category-index { /** 全体ボックス **/
  margin: 30px 0 !important; /** 上下に余白を設定（!importantで強制） **/
  background: #fffbea; /** 柔らかい黄色背景で親しみやすく **/
  padding: 30px; /** 内側に余白を確保 **/
  border-radius: 10px; /** 角を丸くして優しい印象に **/
}

.category-list { /** リスト全体 **/
  list-style: none; /** デフォルトの点（マーカー）を非表示 **/
  margin: 0; /** 外側余白をリセット **/
  padding: 0; /** 内側余白をリセット **/
}

.category-list li { /** 各カテゴリ項目 **/
  margin-bottom: 20px; /** 下に余白をつけて区切る **/
  border-bottom: 1px dashed #ccc; /** 薄い点線の区切り線を追加 **/
  padding-bottom: 10px; /** 下線との間に余白を確保 **/
}

.category-list li a { /** カテゴリ名リンク **/
  font-size: 1.2rem; /** 通常カテゴリの文字サイズを拡大 **/
  font-weight: bold; /** 太字で見出しのように強調 **/
  color: #0073aa; /** WordPress系のブルーで統一感を演出 **/
  text-decoration: none; /** 下線を消してすっきり見せる **/
}

.category-list li a:hover { /** マウスホバー時のリンク演出 **/
  text-decoration: underline; /** 下線を表示してリンク感を強調 **/
}

.cat-count { /** 投稿件数表示部分 **/
  margin-left: 5px; /** カテゴリ名との間に少し間隔を空ける **/
  font-size: 0.9rem; /** 少し小さめで控えめに表示 **/
  color: #555; /** グレーで落ち着いたトーンに **/
}

.cat-desc { /** カテゴリ説明文 **/
  margin: 5px 0 0 10px; /** 上と左に余白を設定して見やすく **/
  color: #555; /** 落ち着いた文字色 **/
  font-size: 0.9rem; /** 小さめの文字サイズで補足的に表示 **/
}

/** 階層ごとのインデント（背景は維持） **/
.category-list.level-0 { margin-left: 0; } /** 親カテゴリは左寄せ **/
.category-list.level-1 { margin-left: 1em; } /** 子カテゴリは1文字分右へインデント **/
.category-list.level-2 { margin-left: 2em; } /** 孫カテゴリはさらに右へ **/
.category-list.level-3 { margin-left: 3em; } /** ひ孫カテゴリ以降も順に右寄せ **/

/** 親カテゴリーの文字サイズをさらに大きく **/
.category-list.level-0 > li > a { /** 最上位カテゴリ名 **/
  font-size: 1.4rem; /** さらに大きな文字サイズで強調 **/
  color: #0073aa; /** WordPressブルーで統一 **/
}
    

4 完成イメージ

▶ カテゴリー説明付き一覧

5 代用プラグイン

プラグインで同様のカテゴリ一覧を作成したい場合は、以下も参考になります。

• Category and Tag Manager：カテゴリ構造を管理しやすくする
• List Category Posts：ショートコードでカテゴリ別記事リストを出力

6 まとめ

この記事の方法を使えば、「全カテゴリ索引ページ」を自動で生成できます。
WordPressの投稿構造を整理し、訪問者が目的の記事に素早くアクセスできるナビゲーションページとして活用しましょう。