簡易カテゴリー一覧を自動生成（HTML版）する方法

WordPressサイトで、易カテゴリーサイトマップを親子階層付きで一覧表示したい場合、PHPの関数とショートコードを使うと便利です。ここでは「親カテゴリーは太字」「子カテゴリーはインデント付きで表示」「投稿数も表示」する例を紹介します。

1 function.phpにコードを追加（カテゴリーリンク一覧を作成）

//-----------------------------------
// カテゴリーリンク一覧を出力する関数
//-----------------------------------
function show_category_links_list() {
    echo '<ul class="category-link-list">';
    wp_list_categories(array(
        'orderby'       => 'name',
        'order'         => 'ASC',
        'show_count'    => true,
        'title_li'      => '',
        'hide_empty'    => false,
        'hierarchical'  => true,
    ));
    echo '</ul>';
}

// ショートコードで表示させる
function category_links_shortcode() {
    ob_start();
    show_category_links_list();
    return ob_get_clean();
}
add_shortcode('category_links', 'category_links_shortcode');
  

1.1 ポイント

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

記事内で表示する場合：

[category_links]
  

2 汎用CSS

/* -----------------------------
 * カテゴリーリンク一覧の親ul
----------------------------- */

/* 親<ul>全体の設定。リストマークを消して余白をリセット */
.category-link-list {
    list-style: none;       /* デフォルトのリストマークを消す */
    margin: 0;              /* 外側の余白をなしに */
    padding: 0;             /* 内側の余白をなしに */
}

/* 各<li>要素の基本スタイル（間隔と行間を調整） */
.category-link-list li {
    margin: 0.3em 0;        /* 上下に少し余白を取る */
    line-height: 1.5;       /* 行間を1.5倍にして読みやすく */
}

/* 各リンク（aタグ）の基本スタイル */
.category-link-list a {
    text-decoration: none;  /* 下線を消す */
    color: #0073aa;         /* 通常時の文字色（WordPress管理画面の青に近い） */
    transition: color 0.3s; /* ホバー時の色変化を滑らかに */
}

/* ホバー時のリンクの見た目（色と下線追加） */
.category-link-list a:hover {
    color: #00aaff;         /* 明るい青色に変更 */
    text-decoration: underline; /* 下線を表示 */
}

/* 子<ul>（階層）の設定 */
.category-link-list ul {
    margin-left: 20px;      /* 親より20px右にインデント */
    list-style: disc;       /* 子階層では丸いリストマークを表示 */
}

/* 親カテゴリーのみ太字に */
.category-link-list > li {
    font-weight: bold;      /* 親カテゴリを目立たせる */
}

/* 子カテゴリーは通常の太さに戻す */
.category-link-list > li ul li {
    font-weight: normal;
}

/* 孫階層以下の<li>は通常の太さに戻す */
.category-link-list > li ul li ul li {
    font-weight: normal;    /* 深い階層は太字解除 */
}

/* 投稿数（span.count）の見た目 */
.category-link-list li a span.count {
    color: #666;            /* 投稿数の色をグレーに */
    font-size: 0.9em;       /* 少し小さめの文字サイズ */
    margin-left: 4px;       /* カテゴリ名との間に少し余白を取る */
}

  

3 完成イメージ

記事内に以下のショートコードを貼り付けるとカテゴリー一覧が表示されます：

▶ 簡易カテゴリー一覧

4 まとめ

• カテゴリーリンク一覧が親子階層付きで、投稿数付きで表示されます。
• ブログ記事内でもショートコードで簡単に呼び出せます。