[WP]WordPressでタグクラウドを出力する方法とカスタマイズのまとめ

WordPress

2013.01.27

WordPressではテンプレートタグwp_tag_cloud()を利用してサイドバーなどにタグクラウドを表示させることができます。

タグ一覧のデザインも変更しやすく便利です。

今回はタグクラウドの基本的な使い方に加えて、簡単なカスタマイズもまとめて紹介させていただきます。

タグクラウドを表示する

タグクラウドを表示する

まずはそのままwp_tag_cloud()を利用してタグクラウドを表示する方法です。

sidebar.phpなどのテンプレートファイル内に以下のソースコードを追加します。

<?php wp_tag_cloud(); ?>

1	<?php wp_tag_cloud(); ?>

フォントサイズを変更する

紐づけられたタグの記事件数によって、フォントサイズを変更することも可能です。

smallestが「件数が少ない」タグで、デフォルトが8pt、largestが「件数が多い」タグで、デフォルトが22pt です。

<?php wp_tag_cloud('smallest=8 & largest=22'); ?>

1	<?php wp_tag_cloud('smallest=8 & largest=22'); ?>

タグクラウドの並び順を変更する

orderで「並び順」を指定できます。

「ASC」で昇順、「DESC」で降順、「RAND」でランダム表示です。

<?php wp_tag_cloud('order=DESC'); ?>

1	<?php wp_tag_cloud('order=DESC'); ?>

タグクラウドの表示件数を変更する

numberで「表示件数」を変更できます。初期値は45 です。

<?php wp_tag_cloud('number=45'); ?>

1	<?php wp_tag_cloud('number=45'); ?>

特定のタグを除外する

excludeを使えば、指定したIDのタグは一覧から除外されます。

タグIDはカンマ区切りで複数指定することも可能です。

<?php wp_tag_cloud('exclude=1,3,4,5'); ?>

1	<?php wp_tag_cloud('exclude=1,3,4,5'); ?>

タグクラウドのフォーマットを変更する

デフォルトの設定のままでは、大小さまざまなフォントサイズのタグリンクがズラ〜っと横に並ぶのですが、format=listにすることで「リスト形式」に変更することも可能です。

<?php wp_tag_cloud('format=list'); ?>

1	<?php wp_tag_cloud('format=list'); ?>

タグクラウドのデザインを変更する

出力されたタグクラウドのデザインをCSS で補正できます。

当ブログでは、リンクを楕円形にして背景色を入れた上で、:hover時の色も変更しています。

/*通常*/
.tags a		{
	display:block;
	color:#222;
	background:#e2e2e2;
	text-decoration:none;
	padding:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}

/*hover時*/
.tags a:hover	{
	display:block;
	color:#fff;
	background:#2e5fa1;
	text-decoration:none;
	padding:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}