タグクラウドをカスタマイズ

サイドバーにタグクラウドを表示すると、デフォルトではアンダーバー付きテキストがアルファベット順に表示されます。タグの文字の大きさは、多く使用されていると大きく表示されます。この、タグクラウド表示をカスタマイズして見栄えを変えたいと思います。

CSSでスタイルを変更

タグクラウドは<div class=“tagcloud”>で括られるので、このクラスのスタイルを変更します。以下は変更例です。テキストを四角の枠で囲って、フォントサイズを13pxに統一しています。フォントサイズ指定は適用を優先させるために!importantとしています。

.tagcloud a {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 1em;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 3px;
    color: #333;
    font-size: 13px !important;
    text-decoration: none;
    margin-bottom: 8px;
}
.tagcloud a:hover {
    background-color: #3498db;
    border: 1px solid #3498db;
    color: #fff;
}

スタイル以外の項目をカスタマイズ

スタイルのカスタマイズはCSSで変更できますが、タグの項目をカスタマイズしたい場合、例えば、表示したい項目や数を指定したり並び順を指定したりなどができます。このカスタマイズをするには、フィルターフックを使います。以下をフックしてパラメータを指定することでカスタマイズができます。設定しているパラメータは初期値です。

function my_widget_tag_cloud_args( $args) {
    $myargs = array(
      'smallest'    => 8,    //一番小さいタグを 8(pt) で表示（件数が少ないタグ。単位は unit パラメータで指定）
      'largest'     => 22,   //一番大きいタグを 22(pt) で表示（件数が多いタグ。単位は unit パ ラメータで指定）
      'unit'        => 'pt', //smallest と largest のフォントサイズの単位として 'pt' (point) を使用（pt, px, em, % 等、CSS でフォントサイズに用いる単位を指定可能）
      'number'      => 45,   //最大 45 タグを表示（'0' を指定すると全てのタグを表示）
      'format'      => 'flat', //'flat' - タグをホワイトスペース（separator パラメータで定義）で区切る
                               //'list' - タグを class='wp-tag-cloud' 付きの ul（番号なし箇条書き）内に表示
                               //'array' - タグを配列に格納し、タグクラウドデータを PHP で扱えるように配列のまま返す
      'separator'   => "\n",   //タグの間に表示するテキストまたはスペース（"\n"（空白））
      'orderby'     => 'name', //タグの表示順とする項目（'name' - タグ名。'count' - 使用数）
      'order'       => 'ASC',  //ソート順（前項でタグ名を指定すると「タグ名の順」となる）
                               //'ASC' - 昇順。'DESC' - 降順。'RAND' - ランダム
      'exclude'     => null,   //除外するタグを指定（除外するタグの term_id をコンマ区切りで指定。null - 除外タグなし）
      'include'     => null,   //表示するタグを指定（表示対象とするタグの term_id をコンマ区切りで指定。null - 全てのタグを含める）
      'topic_count_text_callback' => default_topic_count_text, //タグリンクの title 属性に設定される「タグの件数」の文字列を返す関数の関数名。デフォルト ‘default_topic_count_text' 関数で指定
      'link'        => 'view', //リンク先を指定（'view' - 閲覧。'edit' - 編集）
      'taxonomy'    => 'post_tag', //クラウドの生成に使うタクソノミー、またはタクソノミーの配列（'post_tag' - 投稿タグ。'category' - 投稿カテゴリー。'link_category' - リンクのカテゴリー。登録済みのカスタム分類（タクソノミー）または、タクソノミーの配列）
      'echo'        => true,   //結果を表示するか、変数に入れるか（1 (true) - 表示。0 (false) - 値を返す（表示しない））
    );
    $args = wp_parse_args($args, $myargs);
    return $args;
}
add_filter( 'widget_tag_cloud_args', 'my_widget_tag_cloud_args’);

参照：WordPress Codex日本語版