【SWELL】WordPressのタグクラウドを３スッテプでカスタマイズする

1：functions.phpの編集：テーマディレクトリ内のfunctions.phpファイルを開きます。
以下のコードを追加します。

// functions.php に追加または編集
function custom_tag_cloud_shortcode($atts) {
    $atts = shortcode_atts( array(
        'smallest' => 10, // 最小フォントサイズ
        'largest' => 40,  // 最大フォントサイズ
        'unit' => 'px',    // 単位
        'number' => 0,    // 表示するタグ数、0は最大
        'orderby' => 'slug', // ランダムに並べ替え
        'order' => 'ASC',    // 'rand' を使用する場合、このパラメータは無視されます
    ), $atts, 'custom_tag_cloud' );

    $tags = get_tags( array(
        'orderby' => $atts['orderby'], // 'rand' に設定
        'order'   => $atts['order'],   // 'rand' 使用時は無視される
        'number'  => $atts['number'],
        'hide_empty' => true,
    ) );

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

    // 重み付けの計算
    $counts = wp_list_pluck( $tags, 'count' );
    $min = min( $counts );
    $max = max( $counts );

    // フォントサイズの計算
    $spread = $max - $min;
    if ( $spread <= 0 ) {
        $spread = 1;
    }

    $font_spread = $atts['largest'] - $atts['smallest'];
    if ( $font_spread <= 0 ) {
        $font_spread = 1;
    }

    $font_step = $font_spread / $spread;

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

    foreach ( $tags as $tag ) {
        $size = $atts['smallest'] + ( ( $tag->count - $min ) * $font_step );
        $html .= '<a href="' . esc_url( get_tag_link( $tag->term_id ) ) . '" style="font-size: ' . esc_attr( $size ) . $atts['unit'] . ';" title="' . esc_attr( $tag->count ) . ' 件の投稿">' . esc_html( $tag->name ) . '</a> ';
    }

    $html .= '</div>';

    return $html;
}
add_shortcode('custom_tag_cloud', 'custom_tag_cloud_shortcode');

phpコード

2：コピーしたコードをペーストします。

1：スタイルのカスタマイズ：SWELLの追加CSSに以下のコードを追加します。

/* タグクラウド全体のスタイル */
.custom-tag-cloud {
    text-align: center; /* タグクラウド内のタグを中央揃えにします */
    padding: 1px 0;    /* タグクラウドの上下に1pxの余白を追加します */
}

/* タグクラウド内の各タグ（リンク）のスタイル */
.custom-tag-cloud a {
    font-weight: bold; /* テキストを太字に設定 */  
    text-decoration: none;    /* リンクの下線を削除します */
    color: #04384C;           /* タグの文字色を指定されたカラーコードに設定します */
    margin: 1px;              /* タグ同士の間に5pxの余白を追加します */
    display: inline-block;    /* タグをインラインブロック要素として表示し、余白やパディングを適用可能にします */
    transition: color 0.3s;   /* マウスホバー時の色変化を0.3秒で滑らかに遷移させます */
}

/* タグにマウスホバーしたときのスタイル */
.custom-tag-cloud a:hover {
    color: #ff6600; /* ホバー時のタグの文字色を指定されたカラーコードに変更します */
    transform: translateY(-4px); /* ホバー時に少し浮く効果 */
    text-decoration: underline; /* 下線を追加 */
}

CSS

2：コピーしたコードをペーストします。

1：タグクラウドを表示するために、投稿やページ、ウィジェットに 下記のコードを追加します。

ノーマル

[custom_tag_cloud]

カスタム：必要に応じて、属性を指定してカスタマイズします。
functions.phpより、こちらの方で設定したほうが不具合になる確率は減ると思います。

[custom_tag_cloud smallest="12" largest="36" unit="px" number="20" orderby="count" order="DESC"]

2：コピーしたコードをペーストします。