「タグクラウド」ウィジェットのカスタマイズ

tagcloud image

プラグインを使わずにサイズや表示数、ソートなどを設定します。
functions.phpで「widget_tag_cloud_args」を上書きするだけ。

functions.php

パラメータの詳細はCodexで。


// タグクラウド
add_filter( 'widget_tag_cloud_args', 'my_widget_tag_cloud_args');
function my_widget_tag_cloud_args( $args) {
	$args = array(
		'smallest'=>8,	//最小文字サイズ
		'largest'=>13,	//最大文字サイズ
		'unit'=>'px',	//文字サイズ単位
		'number'=>40,	//表示数
		'format'=>'list',	//</pre>
<ul>
	<li>形式に
		'separator'=>'\y\n',	//HTMLを改行
		'order'=>'RAND',	//ランダム表示
		'single_text' => '%s post',		//title表示(1件の場合)
		'multiple_text' => '%s posts'	//title表示(2件以上)
		);
	return $args;
}

title属性を変更

デフォルトの「topic_count_text_callback」では「◯件のトピック」と表示されます。
これを変更するのが上記の12〜13行目。

class属性を変更

同じくfunctions.phpに追加。


// class属性変更
function reClass_wp_tag_cloud( $text) {
	return preg_replace( '~class=\'tag-link-(\d+)\'~m','class="tooltip"',$text);
}
add_filter( 'wp_tag_cloud', 'reClass_wp_tag_cloud');

「class="tooltip"」の部分を自由に変更。空にすればclassナシ。

ついでにCSS


/* タグクラウド */
.tagcloud li{
	float:left;
	display:block;
	}
.tagcloud a{
	display:block;
	height:18px;
	margin:2px;
	padding:1px 8px 1px 5px;
	line-height:1.5em;
	text-decoration: none;
	border:solid 1px #ddd;
	border-radius:2px;
	}
.tagcloud a:before{
	content:'\f302';
	display:inline-block;
	margin:0 2px 0 0;
	font:normal 1em/1 Genericons;
	vertical-align:text-bottom;
	-webkit-font-smoothing:antialiased;
	}
.tagcloud a:hover{
	color:#ccc;
	background:#333;
	border: solid 1px #999;
	}

アイキャッチ部分は画像を使わずアイコンフォント「Genericons」で表示しています。
http://genericons.com/

プラグインを使わずにサイズや表示数、ソートなどを設定します。functions.phpで「widget_tag_cloud_args」を上書きするだけ。

" }

COMMENTS

RELATED