logo icon

プラグインを使わずWordPressのタグクラウド「wp_tag_cloud()」をカスタマイズする方法

WordPressでは「wp_tag_cloud()」を使って簡単にタグクラウドを設置出来ます。

それはいいのですが、デフォルトでは、

  • タグに登録された記事の件数が表示出来ない
  • 文字サイズ以外設定出来ない

のが不満で、せっせと調べながらカスタマイズしてみました。

まずはfunctions.phpに下記を貼り付けます。
smallestlargestを使ってタグを五段階(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