WordPressでは「wp_tag_cloud()」を使って簡単にタグクラウドを設置出来ます。
それはいいのですが、デフォルトでは、
- タグに登録された記事の件数が表示出来ない
- 文字サイズ以外設定出来ない
のが不満で、せっせと調べながらカスタマイズしてみました。
まずはfunctions.phpに下記を貼り付けます。
smallestとlargestを使ってタグを五段階(1~5)に評価する仕組みで、ここでは30件をランダムに表示するように設定しています。
// functions.php
function score_tag_cloud(){
$tags = wp_tag_cloud('format=array&smallest=1&largest=5&number=30&order=RAND');
foreach($tags as $tag){
preg_match('/href=\'http:\/\/.+?\'/', $tag, $matche);
$wtc_href = $matche[0];
preg_match('/style=\'.+?\'/', $tag, $matche);
$wtc_score = round(floatval(preg_replace('/[^0-9\.]/', '', $matche[0])));
$wtc_class_score = "tag-score-". $wtc_score;
preg_match('/title=\'.+?\'/', $tag, $matche);
$wtc_title = $matche[0];
$wtc_count = mb_ereg_replace('[^0-9]', '', $wtc_title);
preg_match('/class=\'.+?\'/', $tag, $matche);
$wtc_class = preg_replace('/\'$/', " $wtc_class_score'", $matche[0]);
$tag_name = strip_tags($tag);
echo "<li $wtc_class><a $wtc_href $title>$tag_name</a> ($wtc_count)</li>";
}
}
表示件数を変えたい場合はnumber=30を、表示順を変えたい場合はorder=RANDを変更して下さい。
あとは、
<ul class="wp-tag-cloud">
<?php score_tag_cloud(); ?>
</ul>
上記をテンプレートの好きな場所に貼り付けて、
ul.wp-tag-cloud {
overflow: hidden;
}
ul.wp-tag-cloud li {
margin-right: 5px;
color: #cccccc;
float: left;
}
ul.wp-tag-cloud li.tag-score-1 a {
color: #999999;
font-size: 72%;
}
ul.wp-tag-cloud li.tag-score-2 a {
color: #00CC00;
font-size: 86%;
}
ul.wp-tag-cloud li.tag-score-3 a {
color: #FB940B;
font-size: 100%;
}
ul.wp-tag-cloud li.tag-score-4 a {
color: #03C0C6;
font-size: 115%;
}
ul.wp-tag-cloud li.tag-score-5 a {
color: #FF98BF;
font-size: 129%;
}
このようにCSSからそれぞれスタイルを指定してあげればお好みに表示出来ます。
- 参考サイト
- WordPress のタグで重要度を示すクラス名を追加する
- WordPress Codex 日本語版 テンプレートタグ/wp tag cloud