WordPressテーマのSimplicityで表示されるタグクラウドをカスタマイズしてみた

Simplicityのウィジェットで表示されるタグクラウドは非常にシンプルで、カスタマイズする余地がたくさんあります。気分転換にでもと思い、タグクラウドの見た目を変えてみたのでご紹介いたします。

functions.php

表示順などを変えるために子テーマの「functions.php」に下記の記述をしました。

function tag_cloud_customize($args) {
    $myargs = array(
        'smallest' => 9, //最小フォントサイズ
        'largest' => 9,  //最大フォントサイズ
        'orderby' => 'count', //表示順(件数)
        'order'   => 'DESC', //ソート順(降順)
    );
    $args = wp_parse_args($args, $myargs);
    return $args;
}
add_filter('widget_tag_cloud_args', 'tag_cloud_customize');

通常、WordPressのタグクラウドは割り振られた件数によってフォントサイズが変わります。個人的に同じ見た目にしたかったので、「smallest」と「largest」を同じサイズの「9」としました。

「orderby」でどのカテゴリで表示するかを決め、「order」で割り振られた件数の多い順から並べています。

WordPressのタグクラウドの初期値やパラメータは下記のようになります。

<?php $args = array(
	'smallest'                  => 8, 
	'largest'                   => 22,
	'unit'                      => 'pt', 
	'number'                    => 45,  
	'format'                    => 'flat',
	'separator'                 => "\n",
	'orderby'                   => 'name', 
	'order'                     => 'ASC',
	'exclude'                   => null, 
	'include'                   => null, 
	'topic_count_text_callback' => default_topic_count_text,
	'link'                      => 'view', 
	'taxonomy'                  => 'post_tag', 
	'echo'                      => true,
	'child_of'                  => null,
); ?>
タグクラウドのパラメータと内容
smallest 最少フォントサイズ。
largest 最大フォントサイズ。
unit フォントサイズに用いる単位。
number クラウドに表示するタグ数。
format クラウド表示のフォーマット。
  • flat – タグをホワイトスペースで区切る。
  • list – タグをul内に表示。
  • array – タグを配列に格納し、タグクラウドデータをPHPで扱えるように配列のまま返す。
separator タグの間に表示するテキストまたはスペース。
orderby タグの表示順とする項目。
  • name – タグ名
  • count – 使用数
order ソート順。
  • ASC – 昇順
  • DESC – 降順
  • RAND – ランダム
exclude 除外するタグをコンマ区切りで指定。
include 表示対象とするタグをコンマ区切りで指定。
topic_count_text_callback タグリンクのtitle属性(ツールチップ)に設定されるの文字列(タグの件数)を返す関数。
link 特定のタグを編集できるようリンクを設定。
taxonomy クラウドの生成に使うタクソノミー、またはタクソノミーの配列。
  • post_tag – 投稿タグ
  • category – 投稿カテゴリー
  • link_category – リンクのカテゴリー
  • 登録済みのカスタム分類(タクソノミー)または、タクソノミーの配列
echo 結果を表示、または変数に入れる。
  • 1 (true) – 表示
  • 0 (false) – 値を返す(表示しない)

style.css

デザインを変えるために子テーマの「style.css」に下記の記述をしました。

.tagcloud a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 6px 12px;
    color: #666;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
    background: #FFF;
}

.tagcloud a:hover {
    transition: 0.3s;
    background: #EFEFEF;
}

ウィジェットで表示されるタグクラウドは、「<div class="tagcloud">」といったように「tagcloud」から始まるので、tagcloud内にあるa要素に対してスタイルを記述しています。

比較

カスタマイズしたタグクラウドとの比較
カスタマイズしたタグクラウドとの比較

カスタマイズした右側のタグのデザインがボタン状になり、割り振られた件数が多いタグの順(降順)で表示されています。

まとめ

  • 子テーマの「functions.php」で表示順などを設定する。
  • 子テーマの「style.css」にスタイルを記述する。

タグクラウドのカスタマイズは気軽にできる部類のウィジェットなので、気分転換に変更してみました。Simplicityは名称のとおりシンプルなのでカスタマイズのし甲斐があります。

元に戻すことも容易なので、いろいろカスタマイズしてみるといいかと思います。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!