【SWELL対応】ブログのタグクラウドをヒートマップ風に表示！PHP＋CSSで簡単に設置する方法

まず、以下のPHPコードを 子テーマの functions.php に貼り付けてください。

※外観メニューに「テーマファイルエディター」が表示されない場合は、セキュリティプラグインの影響が考えられます。

たとえば、「Really Simple Security」では、設定項目にある「ファイルエディターの無効化」が「ON」になっていると、テーマファイルエディターが非表示になります。

この設定を「OFF」に変更することで、「テーマファイルエディター」が再び表示されるようになります。

PHPコード

// ヒートマップ型タグクラウドのショートコードを定義
function custom_tag_cloud_boxed_shortcode($atts) {
    $atts = shortcode_atts( array(
        'number' => 10, // 取得するタグ数（最大9個まで表示）
    ), $atts, 'custom_tag_cloud_boxed' );

    $tags = get_tags( array(
        'orderby' => 'count',      // 使用頻度の多い順に取得
        'order'   => 'DESC',
        'number'  => $atts['number'],
        'hide_empty' => true,     // 投稿のないタグは除外
    ) );

    if ( empty( $tags ) ) return '';

    $html = '<div class="custom-tag-boxed-heatmap">';

    foreach ( $tags as $i => $tag ) {
        $rank = $i + 1;             // タグの順位（1〜9）
        if ( $rank > 9 ) break;    // 最大9個まで表示

        // 背景色を明度で変化（HSL）
        $lightness = 15 + (($rank - 1) / 8) * 55; // 濃→薄
        $bg_color = "hsl(200, 60%, {$lightness}%)";

        // フォントサイズを順位で変化
        if ($rank === 1) {
            $font_size = 38;
        } elseif ($rank === 2) {
            $font_size = 26;
        } else {
            $font_size = 24 - (($rank - 3) / 6) * 16; // 3位〜9位で24→8に分布
        }

        // タグのHTML出力（リンク＋クラス名＋インラインスタイル）
        $html .= '<a href="' . esc_url(get_tag_link($tag->term_id)) . '"
            class="tag-box tag-' . $rank . '"
            style="
                background-color: ' . $bg_color . ';
                font-size: ' . round($font_size, 2) . 'px;
            "
            title="' . esc_attr($tag->count) . ' 件の投稿">
            <span>' . esc_html($tag->name) . '</span>
        </a>';
    }

    $html .= '</div>';
    return $html;
}
add_shortcode('custom_tag_cloud_boxed', 'custom_tag_cloud_boxed_shortcode');

PHPコード

以上です。

次に、タグクラウドの見た目を整えるためにCSSコードを追加します。タグの人気順位に応じて、サイズや位置をきれいに並べて表示できるようにします。

※CSSとは、Webサイトの「見た目のルール」を指定するためのコードです。ここでは、タグの「人気順」に基づいて、大きさや配置を細かく制御していきます。

CSSコード

「外観→カスタマイズ→追加CSS」の手順で以下のコードを追加します。

/* ヒートマップ　PC表示 */
.custom-tag-boxed-heatmap {
    position: relative;
    width: 840px;
    height: 420px;
    box-sizing: border-box;
    overflow: hidden;
    background: #f7f7f7;
}

.custom-tag-boxed-heatmap .tag-box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    overflow: hidden;
    border-radius: 6px;
    padding: 0 6px;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: transform 0.2s, box-shadow 0.2s;
}

.custom-tag-boxed-heatmap .tag-box:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.custom-tag-boxed-heatmap .tag-box span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === 各タグの位置とサイズ（840×420ベース） === */

/* 1位：420×420 */
.custom-tag-boxed-heatmap .tag-1 {
    left: 0;
    top: 0;
    width: 420px;
    height: 420px;
}

/* 2位：420×210 */
.custom-tag-boxed-heatmap .tag-2 {
    left: 420px;
    top: 0;
    width: 420px;
    height: 210px;
}

/* 3位：210×210 */
.custom-tag-boxed-heatmap .tag-3 {
    left: 420px;
    top: 210px;
    width: 210px;
    height: 210px;
}

/* 4位：210×105 */
.custom-tag-boxed-heatmap .tag-4 {
    left: 630px;
    top: 210px;
    width: 210px;
    height: 105px;
}

/* 5位：105×105 */
.custom-tag-boxed-heatmap .tag-5 {
    left: 630px;
    top: 315px;
    width: 105px;
    height: 105px;
}

/* 6位：105×52.5 */
.custom-tag-boxed-heatmap .tag-6 {
    left: 735px;
    top: 315px;
    width: 105px;
    height: 52.5px;
}

/* 7位：52.5×52.5 */
.custom-tag-boxed-heatmap .tag-7 {
    left: 735px;
    top: 367.5px;
    width: 52.5px;
    height: 52.5px;
}

/* 8位：52.5×26.25 */
.custom-tag-boxed-heatmap .tag-8 {
    left: 787.5px;
    top: 367.5px;
    width: 52.5px;
    height: 26.25px;
}

/* 9位：52.5×26.25 */
.custom-tag-boxed-heatmap .tag-9 {
    left: 787.5px;
    top: 393.75px;
    width: 52.5px;
    height: 26.25px;
}

CSSコード

以上です。

タグの配置

タグの順位ごとの位置とサイズです。

スマホ表示でヒートマップが画面からはみ出してしまう問題を防ぐため、下記のCSSコードを追加して調整します。
このコードは、STEP2のCSSコードの下に追記してください。

/* ヒートマップ　スマホ表示 */
@media screen and (max-width: 767px) {
  .custom-tag-boxed-heatmap {
    transform: scale(0.4);
    transform-origin: top left;
    width: 840px;
    height: 420px;
    overflow: hidden;
  }
}

CSSコード

記事やウィジェットなど、表示したい場所に以下のショートコードを貼り付けてください。

[custom_tag_cloud_boxed]

HTMLショートコード