【WordPress】ウィジェットのタグクラウドをカスタマイズする方法

2013.09.23 Category:WP Tips Tag:Functions

前にこのようなWordPressのタグクラウド表示とタグクラウドのデザインのお話という記事を書いたのですが、そこでは直接テンプレートに書いて表示させるいろいろを書いていました。

今回は、ウィジェット版です。

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

ウィジェットのタグクラウドは、よく使うタグのフォントサイズが大きくて少々見栄え的に好きではないので、少しだけカスタマイズ。

最小と最大の文字サイズは変わらないようにしてみました。

functions.phpに以下を追記します。

// テーマのタグクラウドのパラメータ変更
function my_tag_cloud_filter($args) {
	$myargs = array(
		'smallest' => 10, // 最小文字サイズは 10pt
		'largest' => 10, // 最大文字サイズは 10pt
		'number' => 30,  // 一度に表示するのは30タグまで
		'order' => 'RAND', // 表示順はランダムで
	);
	return $myargs;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

// テーマのタグクラウドのパラメータ変更

function my_tag_cloud_filter($args) {

$myargs = array(

'smallest' => 10, // 最小文字サイズは 10pt

'largest' => 10, // 最大文字サイズは 10pt

'number' => 30, // 一度に表示するのは30タグまで

'order' => 'RAND', // 表示順はランダムで

);

return $myargs;

}

add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

設定したパラメータの内容

パラメータ	内容
smallest	最小文字サイズ
largest	最大文字サイズ
order	表示するタグ数
number	表示順

初期値

その他の初期値や設定出来る項目です。

<?php $defaults = array(
          'smallest' => 8, 
          'largest' => 22,
          'unit' => 'pt', 
          'number' => 45,  
          'format' => 'flat',
          'orderby' => 'name', 
          'order' => 'ASC',
          'exclude' => '', 
          'include' => '', 
          'link' => 'view', 
          'taxonomy' => 'post_tag', 
          'echo' => true
          ); ?>

<?php $defaults = array(

'smallest' => 8,

'largest' => 22,

'unit' => 'pt',

'number' => 45,

'format' => 'flat',

'orderby' => 'name',

'order' => 'ASC',

'exclude' => '',

'include' => '',

'link' => 'view',

'taxonomy' => 'post_tag',

'echo' => true

); ?>

詳しくは、こちらのテンプレートタグ/wp tag cloud | WordPress　Codex に記載されています。

出来上がりのhtmlを見てみると以下のような感じとなります。

<div class="tagcloud">
<a href='#' class='tag-link-n' title='n件のトピック' style='font-size: 10pt;'>ﾀｸﾞ1</a>
<a href='#' class='tag-link-n' title='n件のトピック' style='font-size: 10pt;'>ﾀｸﾞ2</a>
</div>

</div>

CSSで整える

あとは、CSSで整えてあげると出来上がりです。

参考になるかわかりませんが、このブログで使用しているCSSを書いておきます。

以前も書きましたが、あれから少し変更しているので再褐。

.tagcloud {
  position: relative;
  overflow: hidden;
  padding: 0 22px 0 14px;
  text-align: left;
}
.tagcloud a {
  display: inline-block;
  background: #fbf8e5;
  white-space: nowrap;
  font-size: 98%;
  color: #a97837;
  line-height: 1.3;
  padding: 3px 8px;
  margin-bottom: 5px;
  text-decoration: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 2px solid #D4CFC1;
}

.tagcloud a:hover {
  color: #b54f41;
  text-decoration: underline;
}