メニュー
hiro
フリーランス
人生の後半になり、「自分はこれがやりたかったのか」というものが偶然見つかりました。「何をいまさら」と思いながらフリーランスを目指します。趣味は、武術の形の鍛錬とやりたいことを含めたライフスタイルを考察することです。
アーカイブ
目次 ~ Contents ~

【SWELL】WordPressのタイポグラフィ風タグクラウドに色をつける方法

アイキャッチ画像のようなタグクラウドのタグに色を付けることによって、タイポグラフィ風に仕上げることが可能です。
前回紹介したタグクラウドの一部をショートコードで変更します。
タグクラウドが華やかになります。

実装手順は、以下の2つです
  1. 色機能が追加されたコードに変更する
  2. CSSも追加コードに変更する

今回紹介するショートコードも、AIを活用して作成・調整したものです。
任意のタグに色をつけてみたいと思った時に、ぜひ試してみてください。

前回記事

目次

実装

ショートコードを追加する前にサイトのバックアップを推奨します。

STEP

functions.phpに色機能が追加されたコードを追加

1:functions.phpの編集:外観のテーマファイルエディターのCHILD(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 );
        $class = 'custom-tag-' . sanitize_html_class( $tag->slug ); // スラグをクラス名に変換

        $html .= '<a href="' . esc_url( get_tag_link( $tag->term_id ) ) . '" class="' . esc_attr( $class ) . '" 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:コピーしたコードをペーストします。

functions.php
STEP

CSSの追加

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; /* タグ同士の間隔 */
    display: inline-block; /* インラインブロックで表示 */
    transition: color 0.3s, transform 0.3s; /* 色と移動のスムーズな変化 */
}

/* タグごとの色指定 */
.custom-tag-occupation { color: #EE82EE !important; } /* 紫色 */
.custom-tag-hobby { color: #FFFF00 !important; } /* 黄色 */
.custom-tag-expression9 { color: #0000FF !important; } /* 青色 */

/* タグにマウスホバーしたときのスタイル (すべてのタグ共通) */
.custom-tag-cloud a:hover {
    color: #ff6600 !important; /* ホバー時のタグの文字色を統一 */
    transform: translateY(-4px); /* ホバー時に少し浮く */
    text-decoration: underline; /* 下線を追加 */
}

CSSコード

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

追加CSS
STEP

ウィジェットに追加

ここは前回と同じです。

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

ノーマル

[custom_tag_cloud]

カスタム例:必要に応じて、属性を指定してカスタマイズします。

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

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

ウィジェット

各種設定

ほとんどの設定は前回と同じです。
今回のタグと色設定以外は前回の記事を参照してください。

前回

追加CSS設定

タグごとに文字色を変えるには、各タグに適切なクラスを付与する必要があります。
上記unctions.php追加コードの「get_tag_link 」を出力する部分を変更、タグのスラッグをクラス名として適用することで、CSSで設定を行うという仕組みです。

この方法のメリットは、簡単に色が付けられる。
デメリットは、タグ指定が少々面倒なことです。

設定方法

追加設定は、任意のタグとカラーコードを指定します。

指定数は自由です。
指定しないと、色はつかず全体の色と同じになります。
当ブログの場合はSWELLの公式の色になります。

以下が変更するCSS設定箇所です。

CSS設定

スラッグ

スラッグ
  • カラーコード例
    • 赤(Red) → #FF0000
    • 橙(Orange) → #FFA500
    • 黄(Yellow) → #FFFF00
    • 緑(Green) → #008000
    • 青(Blue) → #0000FF
    • 藍(Indigo) → #4B0082
    • 紫(Violet) → #EE82EE

 

まとめ

今回ご紹介した方法は、前回のテーマ SWELL のタグクラウドの手法をさらに発展させたものです。
ショートコードを改良し、各タグに個別の色を設定できるようにすることで、デザイン性を向上させました。

これにより、タグごとに異なる色を持つ視覚的に魅力的なタグクラウド が完成します。

当記事のショートコードを使用すれば、すぐに実現可能です。
詳細な設定方法については、前回の記事をご参照ください。

ぜひお試しください!

前回の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次