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

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

実装のポイント

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

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');

汎用CSS

/* ul全体を左端に揃える */
.my-category-count {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* liの下線と上下余白 */
.my-category-count li {
    margin: 0;
    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; }  
.my-category-count li.cat-level-1 a { padding-left: 25px; }  
.my-category-count li.cat-level-2 a { padding-left: 40px; }  
.my-category-count li.cat-level-3 a { padding-left: 55px; }  
.my-category-count li.cat-level-4 a { padding-left: 70px; }  

/* ホバー時に行全体に薄い灰色背景 */
.my-category-count li a:hover {
    background-color: #e0e0e0; /* 濃い目の灰色はそのまま残す */
}
    

テーマ別サンプルCSS

Lightning

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

/* ul全体を左端に揃える */
.my-category-count {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: -30px; /* テーマ余白打ち消し */
}

/* liの下線と上下余白 */
.my-category-count li {
    margin: 0;
    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; }  
.my-category-count li.cat-level-1 a { padding-left: 25px; }  
.my-category-count li.cat-level-2 a { padding-left: 40px; }  
.my-category-count li.cat-level-3 a { padding-left: 55px; }  
.my-category-count li.cat-level-4 a { padding-left: 70px; }  

/* ホバー時に行全体に薄い灰色背景 */
.my-category-count li a:hover {
    background-color: #e0e0e0; /* 濃い目の灰色はそのまま残す */
}
    

（例）

代用プラグイン

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

まとめ

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

スラッグ例: sidebar-category-count