WordPressのタグクラウドをカスタマイズする方法

はじめに

WordPressのタグクラウドは wp_tag_cloud() で出力します。デフォルトではタグの使用頻度に応じてフォントサイズが変わりますが、均一サイズにしたり、get_tags() で完全なHTMLをカスタマイズしたりできます。

症状・原因

• タグクラウドのフォントサイズがバラバラで見づらい
• タグクラウドのデザインをテーマに合わせたい
• 特定のタグだけを表示したい
• ウィジェットのタグクラウドが思い通りにならない

解決手順

ステップ1：wp_tag_cloud() の基本パラメータ

// テンプレートやウィジェットで使用
wp_tag_cloud([
    'smallest'  => 12,       // 最小フォントサイズ（px）
    'largest'   => 22,       // 最大フォントサイズ（px）
    'unit'      => 'px',     // フォントサイズ単位
    'number'    => 30,       // 表示するタグ数（0=すべて）
    'format'    => 'flat',   // flat=inline / list=<ul> / array=配列
    'orderby'   => 'name',   // name / count
    'order'     => 'ASC',    // ASC / DESC / RAND
    'exclude'   => '5,12',   // 除外するタグID（カンマ区切り）
    'show_count' => false,   // タグ数を表示するか
]);

ステップ2：フォントサイズを均一にする

// functions.php — タグクラウドのフォントサイズを均一化
add_filter('wp_tag_cloud', function(string $html): string {
    // インラインのfont-sizeスタイルを削除
    return preg_replace('/style=[\'"]font-size:\s*[\d.]+\w+;?[\'"]/', '', $html);
});

// または smallest = largest で同一サイズに
wp_tag_cloud([
    'smallest' => 14,
    'largest'  => 14,
    'unit'     => 'px',
    'number'   => 20,
    'format'   => 'flat',
    'orderby'  => 'name',
    'order'    => 'ASC',
]);

ステップ3：get_tags() で完全カスタムのタグクラウドを作る

// テンプレートで使用
$tags = get_tags([
    'orderby'    => 'count',
    'order'      => 'DESC',
    'number'     => 30,
    'hide_empty' => true,   // 記事のないタグを除外
]);

if ($tags) {
    echo '<div class="tag-cloud">';
    foreach ($tags as $tag) {
        printf(
            '<a href="%s" class="tag-item" data-count="%d">%s<span class="tag-count">%d</span></a>',
            esc_url(get_tag_link($tag->term_id)),
            $tag->count,
            esc_html($tag->name),
            $tag->count
        );
    }
    echo '</div>';
}

ステップ4：CSSでスタイルを設定する

/* タグクラウド */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* wp_tag_cloud() のデフォルトセレクタ */
.tag-cloud a,
.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--color-bg-subtle, #f6f7f7);
    border: 1px solid var(--border-color, #c3c4c7);
    border-radius: 20px;
    font-size: 0.875rem !important; /* フォントサイズ均一化 */
    color: var(--text-color, #1d2327);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.tag-cloud a:hover,
.tag-item:hover {
    background: var(--color-primary, #2271b1);
    border-color: var(--color-primary, #2271b1);
    color: #fff;
}

.tag-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: rgba(0,0,0,.1);
    border-radius: 10px;
    font-size: 0.75rem;
    line-height: 1;
}

.tag-item:hover .tag-count {
    background: rgba(255,255,255,.3);
}

ステップ5：ウィジェットのタグクラウドをカスタマイズする

// functions.php — ウィジェットのタグクラウド出力をフィルター
add_filter('widget_tag_cloud_args', function(array $args): array {
    $args['largest']   = 14;   // 最大サイズを制限
    $args['smallest']  = 12;   // 最小サイズを設定
    $args['unit']      = 'px';
    $args['number']    = 20;
    $args['orderby']   = 'name';
    $args['order']     = 'ASC';
    return $args;
});

注意事項

• wp_tag_cloud() はデフォルトでインラインの style="font-size:..." を出力します。CSSの !important か、フィルターで削除するかのどちらかでデザインを統一してください
• タグの使用数が0の場合、hide_empty => true（デフォルト）では表示されません
• タグページのSEOには注意が必要です。内容が薄いタグページは noindex にすることを検討してください

まとめ

wp_tag_cloud() の smallest・largest を同値にするか、wp_tag_cloud フィルターでインラインスタイルを削除することでフォントサイズを均一化できます。get_tags() を使えばHTMLを完全に制御した独自デザインのタグクラウドが実装できます。