【SWELL対応】ヒートマップ風タグクラウドのUI改良｜▼ をクリックだけでマーカーを開く仕様にする！

以下のコードを、 前回のPHP コード（functions.php） である「custom_tag_cloud_boxed_color_shortcode」 を削除して、以下のコードをペーストします。
置き換え作業なので、消し忘れがないように注意してください。

// 任意カラー対応ヒートマップ風タグクラウド（9位を▼で展開：▼だけクリックで開く）
function custom_tag_cloud_boxed_color_shortcode($atts) {
    $atts = shortcode_atts( array(
        'number' => 30,     // 10位以降も取得
        'color'  => '#ff0000',
    ), $atts, 'custom_tag_cloud_boxed_color' );

    $base_color = sanitize_hex_color($atts['color']);
    if ( ! $base_color ) {
        $base_color = '#ff0000';
    }

    // HEX → RGB
    list($r, $g, $b) = sscanf($base_color, "#%02x%02x%02x");

    // タグ取得（投稿数順）
    $tags = get_tags( array(
        'orderby'    => 'count',
        'order'      => 'DESC',
        'number'     => $atts['number'],
        'hide_empty' => true,
    ) );

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

    // 9位以降を dropdown 用に分離
    $rest_tags = array_slice($tags, 8);

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

    foreach ( $tags as $i => $tag ) {
        $rank = $i + 1;
        if ( $rank > 9 ) break;

        // opacity（Ver.1.0 固定仕様）
        $opacity_map = [1.00, 0.90, 0.79, 0.72, 0.64, 0.57, 0.49, 0.42, 0.34];
        $opacity  = $opacity_map[$rank - 1];
        $bg_color = "rgba({$r}, {$g}, {$b}, " . round($opacity, 2) . ")";

        // フォントサイズ
        if ($rank === 1) {
            $font_size = 38;
        } elseif ($rank === 2) {
            $font_size = 26;
        } else {
            $font_size = 24 - (($rank - 3) / 6) * 16;
        }

        // ★ 9位は「▼」でクリック展開
        if ($rank === 9) {
            $html .= '<details class="tag-box-color tag-9 tag-etc"
                style="background-color:' . esc_attr($bg_color) . '; font-size:' . esc_attr(round($font_size, 2)) . 'px;">';

            $html .= '<summary class="tag-etc-summary"><span class="tag-etc-arrow">▼</span></summary>';

            // dropdown
            if ( ! empty($rest_tags) ) {
                $html .= '<div class="tag-etc-panel">
                    <select class="tag-etc-dropdown"
                        onchange="if(this.value){window.location.href=this.value;}"
                        aria-label="その他のタグ">
                        <option value="">タグを選択</option>';

                foreach ($rest_tags as $t) {
                    $html .= '<option value="' . esc_url(get_tag_link($t->term_id)) . '">'
                          . esc_html($t->name) . ' (' . intval($t->count) . ')
                          </option>';
                }

                $html .= '</select></div>';
            }

            $html .= '</details>';
            continue;
        }

        // 1〜8位は通常タグ
        $html .= '<a href="' . esc_url(get_tag_link($tag->term_id)) . '"
            class="tag-box-color tag-' . $rank . '"
            style="background-color:' . esc_attr($bg_color) . ';
                   font-size:' . esc_attr(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_color', 'custom_tag_cloud_boxed_color_shortcode');

置き換え版 PHP コード

手順：外観 → カスタマイズ → 追加CSS に進んで追記します。前回のCSSはそのままです。

/* 標準detailsマーカー（レ・三角）を消す */
.custom-tag-boxed-heatmap-color .tag-etc summary::-webkit-details-marker { display:none; }
.custom-tag-boxed-heatmap-color .tag-etc summary::marker { content:""; }

/* 9位タブを中央寄せ */
.custom-tag-boxed-heatmap-color .tag-etc{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

/* ▼だけクリック可能にする */
.custom-tag-boxed-heatmap-color .tag-etc-summary{
  padding:0;
  margin:0;
  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  list-style:none;
}

/* ▼表示を大きくする（誘導UI） */
.custom-tag-boxed-heatmap-color .tag-etc-arrow{
  font-size:16px;
  font-weight:700;
  line-height:1;
}

/* 開いた中身 */
.custom-tag-boxed-heatmap-color .tag-etc-panel{
  padding:8px 10px 10px;
  width:100%;
}

/* dropdown */
.custom-tag-boxed-heatmap-color .tag-etc-dropdown{
  width:100%;
  font-size:13px;
  padding:4px 6px;
  border-radius:6px;
}

▼機能のCSSコード

前回のショートコードに、「number=”30″」を追加される形になります。これは、タグを30コ表示します。無制限に表示したい場合は、number=”0″ と入れてください。
「0e2e3d」の部分には、希望の色のHEXカラーコードを入れてください。

これを記事で表示したいところや、ウィジェットに入れてください。

[custom_tag_cloud_boxed_color number="0" color="#0e2e3d"]

ショートコード