HOME

ABOUT

ARCHIVES

CONTACT

tagcloud

WordPressタグクラウドをカスタマイズ:フォントサイズ指定・並び替え

tagcloud

どーも@PNRAです!

WordPressでホームページを作成していると、サイドバーにタグクラウドをつけている人は多いかと思います。特にブログを書いている人は皆さん設置されていると思います。かくいう私どもも設置しているのですが、当初ただデフォルトで載っけていたらタグの使用頻度によって大きさはまちまち。あまり表示が美しいとはいえません。そこでfunction.phpに少し書き込んでこちらをカスタマイズしたいと思います。
(function.phpがない場合は、作成し、テーマファイルの直下に置いてください。)

実装までの手順

やるべきことはたったの2つ

function.phpを編集

style.cssを編集

これだけです。

function.phpを編集

function.php

// tag cloud custom
function theme_new_tag_cloud($args) {
$myargs = array(
'smallest' => 0.85,
'largest' => 0.85,
'unit' => 'em',
'number' => 0,
'order' => 'ASC',
);
return $myargs;
}
add_filter('widget_tag_cloud_args', 'theme_new_tag_cloud');

パラメーターの説明

smallestは一番小さいフォントサイズ(初期値は8pt)
largestは一番大きいフォントサイズ(初期値は 22pt)
unitはフォントの値の単位(em,px,ptで指定 初期値はpoint )
numberは表示するタグ数(初期値は45、0で全表示)
orderは表示の順番(ASC⇛昇順、DESC⇛降順、RAND⇛ランダム )

詳細を知りたい方はテンプレートタグ/wp tag cloudをご覧ください。

style.cssを編集

CSS

/*! 格納したウェブフォントを読み込む */
.tagcloud { }
.tagcloud:after {
content: ' ';
display: block;
clear: both;
}
.tagcloud a {
color: #666;
background:#f6f6f6;
padding:3px 8px;
margin:5px;
float:left;
}

CSSの方は好みに応じて自由に変更です。上記のSTYLE指定はこの pixeliste のタグクラウドの実装例です。float:left;で要素を左寄せにして、疑似要素:afterでclearfix:both;を加えています。要素はそれぞれ背景と文字色を指定し、margin:5px;の間隔でタイルのようなビジュアルに仕上げてあります。
タグクラウドに関するTipsは他にもあるのですが、今回はフォントサイズの指定と並び順のカスタマイズという表題にしたのでこの辺で。

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)