サイドバーのカテゴリーに件数を表示する方法

WordPressのサイドバーで、各カテゴリーに属する投稿件数を表示したいときがあります。標準ウィジェットでも件数は表示できますが、デザインを調整したり、独自の場所に表示したい場合には、functions.php にコードを追加する方法が便利です。

1 実装のポイント

• functions.php にフックを追加してカテゴリー取得
• ウィジェットやサイドバーで呼び出せるショートコードを作成
• CSSで件数のデザイン調整
• 必要に応じてJavaScriptで動的表示も可能

2 functions.php にコードを追加

//-------------------------------------------
// カテゴリーと投稿件数を取得して表示するショートコード
//-------------------------------------------
function my_category_count_list() {
    $categories = get_categories(array(
        'orderby' => 'name',
        'order'   => 'ASC',
        'hide_empty' => 0
    ));

    // カテゴリーをID順に配列化してアクセスしやすく
    $cat_list = array();
    foreach ($categories as $cat) {
        $cat_list[$cat->term_id] = $cat;
    }

    $output = '<ul class="my-category-count">';

    foreach ($categories as $cat) {
        // 階層レベルを計算
        $level = 0;
        $parent = $cat->parent;
        while ($parent != 0) {
            $level++;
            $parent = isset($cat_list[$parent]) ? $cat_list[$parent]->parent : 0;
        }

        $output .= '<li class="cat-level-' . $level . '">';
        $output .= '<a href="' . esc_url(get_category_link($cat->term_id)) . '">';
        $output .= esc_html($cat->name) . ' (' . intval($cat->count) . ')</a></li>';
    }

    $output .= '</ul>';
    return $output;
}
add_shortcode('category_count', 'my_category_count_list');

記事内で表示する場合：

[category_count]
  

3 汎用CSS

/* -----------------------------
 * カテゴリーリストのデザイン
 * ----------------------------- */

/* ul全体を左端に揃える */
.my-category-count {
    list-style: none;     /* デフォルトのリストマーカーを消す */
    margin: 0;            /* 外側の余白をなくす */
    padding: 0;           /* 内側の余白をなくす */
}

/* liの下線と上下余白 */
.my-category-count li {
    margin: 0;                      /* li間の余白をなくす */
    border-bottom: 1px dotted #999; /* 灰色の点線下線を追加 */
}

/* aをブロック化して行全体ホバー可能に */
.my-category-count li a {
    display: block;             /* 行全体をクリック可能に */
    padding: 8px 10px;          /* 内側の余白を設定 */
    text-decoration: none;      /* 下線を消す */
    color: #333;                /* 文字色を濃いグレーに設定 */
    background-color: #ffffff;  /* 背景を白に設定 */
}

/* 階層ごとのインデント */
.my-category-count li.cat-level-0 a { padding-left: 10px; }  /* 1階層目 */
.my-category-count li.cat-level-1 a { padding-left: 25px; }  /* 2階層目 */
.my-category-count li.cat-level-2 a { padding-left: 40px; }  /* 3階層目 */
.my-category-count li.cat-level-3 a { padding-left: 55px; }  /* 4階層目 */
.my-category-count li.cat-level-4 a { padding-left: 70px; }  /* 5階層目 */

/* ホバー時に行全体に薄い灰色背景 */
.my-category-count li a:hover {
    background-color: #e0e0e0; /* ホバーで薄い灰色に変更 */
}
    

4 テーマ別サンプルCSS

4.1 Lightning

/* -----------------------------
 * Lightning用 サイドバーのカテゴリーに件数を表示
 * ----------------------------- */

/* ul全体を左端に揃える */
.my-category-count {
    list-style: none;          /* デフォルトのリストマーカーを消す */
    margin: 0;                 /* ulの上下左右の余白をなくす */
    padding: 0;                /* 内側の余白をなくす */
    margin-left: -30px;        /* テーマの余白を打ち消して左端に揃える */
}

/* liの下線と上下余白 */
.my-category-count li {
    margin: 0;                      /* li間の余白をなくす */
    border-bottom: 1px dotted #999; /* 灰色の点線下線を追加 */
}

/* aをブロック化して行全体ホバー可能に */
.my-category-count li a {
    display: block;             /* 行全体をクリック可能に */
    padding: 8px 10px;          /* 内側の余白を設定 */
    text-decoration: none;      /* 下線を消す */
    color: #333;                /* 文字色を濃いグレーに設定 */
    background-color: #ffffff;  /* 背景を白に設定 */
}

/* 階層ごとのインデント */
.my-category-count li.cat-level-0 a { padding-left: 10px; }  /* 1階層目 */
.my-category-count li.cat-level-1 a { padding-left: 25px; }  /* 2階層目 */
.my-category-count li.cat-level-2 a { padding-left: 40px; }  /* 3階層目 */
.my-category-count li.cat-level-3 a { padding-left: 55px; }  /* 4階層目 */
.my-category-count li.cat-level-4 a { padding-left: 70px; }  /* 5階層目 */

/* ホバー時に行全体に薄い灰色背景 */
.my-category-count li a:hover {
    background-color: #e0e0e0; /* ホバーで薄い灰色に変更 */
}
    

5 完成イメージ

• Contact Form 7 (4)
• 広告 (10)
• Google AdSense (10)
• 便利Tips (192)
• 子テーマ・テーマカスタマイズ (27)
• 基礎 (11)
• 操作説明 (6)
• 特殊文字 (2)
• 固定ページ・デザイン (62)
• HTMLタグ＆CSS (29)
• アクセシビリティ (5)
• 投稿管理・デザイン (10)
• 用語集 (8)
• サイドバー・デザイン (9)
• おすすめプラグイン (8)
• フッターデザイン (2)
• 番外編 (10)
• Contact Form7 (2)
• 管理画面 (19)
• セキュリティ・アクセス制御 (15)
• SEO・サイト運営サポート (41)
• 不具合解決 (9)

6 代用プラグイン

• 「Category Posts Widget」: カテゴリー別の投稿をウィジェットで表示可能
• 「Advanced Sidebar Menu」: カテゴリーやカスタム分類をメニューとして表示

7 まとめ

サイドバーにカテゴリーと投稿件数を表示することで、ユーザーはどのカテゴリーが人気かすぐに把握できます。ショートコード＋CSSで自由にデザイン可能で、テーマに応じた微調整も行いやすい方法です。