WordPressのタグクラウド表示とタグクラウドのデザインのお話

2013.04.07 Category:WP Tips Tag:Functions

前回、ブログをリニューアルしました！　所感まとめ。という記事中では、触れていなかったのですが、タグクラウド表示を少し変更したのとそのデザインについてのまとめです。

WordPressのタグクラウド表示

WordPressでタグを表示させるのはとても簡単です。

通常POST（投稿）の場合

WordPress バージョン 2.3 以上であれば、以下の記載だけで大丈夫です。

<?php wp_tag_cloud('引数'); ?>

1	<?php wp_tag_cloud('引数'); ?>

と、記載するだけ。

引数なしでも大丈夫ですので、()（かっこ）の中に何も書かなくても表示されます。

()（かっこ）の中に引数なしにした場合の初期値として以下の内容が入ります。

<?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

); ?>

おおざっぱに言うと、「タグ名の昇順」で、小さいタグを8pt、大きいタグを22pt、最大 45 タグ、flat（ホワイトスペース区切り）形式ですべてのタグを表示させますよと書かれています。

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

ですが、そこはやはり、名前順を変更したり、書いた記事数が多い順に並べ替えたいなどなどの希望があると思います。そんな時、引数を変更してあげることによって思い通りの並びにすることが出来ます。

わたしは、文字の大きさと単位をピクセルにしたかったので、以下の様に記載しました。

<?php wp_tag_cloud('smallest=14 & largest=15 & unit=px'); ?>

1	<?php wp_tag_cloud('smallest=14 & largest=15 & unit=px'); ?>

その他にも例えば、除外したいタグがある場合は、

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

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

と、書きます。除外したいタグのID番号を指定します。カンマ区切りで複数指定することが可能です。

カスタム投稿　の場合

カスタム投稿の場合は、WordPress バージョン 2.8 以上からこの関数が使えます。

わたしの場合、タグをカスタム投稿を作成する際にscrapbook_tagとして作成しているので、上記のままでは使えなかったので以下のように記載しました。

<?php wp_tag_cloud('smallest=14 & largest=15 & unit=px & taxonomy=scrapbook_tag');?>

1	<?php wp_tag_cloud('smallest=14 & largest=15 & unit=px & taxonomy=scrapbook_tag');?>

WordPressのタグクラウドデザイン

次にデザイン部分ですが、フラットな感じを出したかったのでシャドウなどは使っていません。参考になるかわかりませんが、cssは以下の通り。

.tag-cloud a {
	padding: 3px 5px;
	border: 2px solid #fff;
	background: url('画像ファイルの場所');
	color: #1A1A1A;
	white-space: nowrap;
	font-size: 90%;
	line-height: 200%;
}