前回、ブログをリニューアルしました! 所感まとめ。という記事中では、触れていなかったのですが、タグクラウド表示を少し変更したのとそのデザインについてのまとめです。
WordPressのタグクラウド表示
WordPressでタグを表示させるのはとても簡単です。
通常POST(投稿)の場合
WordPress バージョン 2.3 以上であれば、以下の記載だけで大丈夫です。
1 |
<?php wp_tag_cloud('引数'); ?> |
と、記載するだけ。
引数なしでも大丈夫ですので、()(かっこ)の中に何も書かなくても表示されます。
()(かっこ)の中に引数なしにした場合の初期値として以下の内容が入ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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 に記載されています。
ですが、そこはやはり、名前順を変更したり、書いた記事数が多い順に並べ替えたいなどなどの希望があると思います。そんな時、引数を変更してあげることによって思い通りの並びにすることが出来ます。
わたしは、文字の大きさと単位をピクセルにしたかったので、以下の様に記載しました。
1 |
<?php wp_tag_cloud('smallest=14 & largest=15 & unit=px'); ?> |
その他にも例えば、除外したいタグがある場合は、
1 |
<?php wp_tag_cloud('exclude=1,5'); ?> |
と、書きます。除外したいタグのID番号を指定します。カンマ区切りで複数指定することが可能です。
カスタム投稿 の場合
カスタム投稿の場合は、WordPress バージョン 2.8 以上からこの関数が使えます。
わたしの場合、タグをカスタム投稿を作成する際にscrapbook_tagとして作成しているので、上記のままでは使えなかったので以下のように記載しました。
1 |
<?php wp_tag_cloud('smallest=14 & largest=15 & unit=px & taxonomy=scrapbook_tag');?> |
WordPressのタグクラウドデザイン
次にデザイン部分ですが、フラットな感じを出したかったのでシャドウなどは使っていません。参考になるかわかりませんが、cssは以下の通り。
1 2 3 4 5 6 7 8 9 |
.tag-cloud a { padding: 3px 5px; border: 2px solid #fff; background: url('画像ファイルの場所'); color: #1A1A1A; white-space: nowrap; font-size: 90%; line-height: 200%; } |
この部分は、もう少し変更したいので、まだまだ試案中です。
デザインの参考に!!
タグクラウドのデザインを集めた記事です。何点ほどあるのか数えていませんが、結構たくさんありまので気になるデザインが見つかるかも。

こちらは、CSSだけで作られたタグクラウドデザイン。
とてもキュートで色使いもとても好きです。

最後に
WordPress Codexに以下の文が記載されていたので追記。
タクソノミーをもとにクラウド作成できるよう、taxonomy パラメータが追加されています。これは例えば(投稿のタグだけではなく)投稿カテゴリーのクラウドを作ることもできるということです。
投稿カテゴリーのクラウドというのも面白そうですね。
今度試してみたいと思います。
Pingback: タグクラウドをちょっとおとなしめでシンプルに変更してみた。 | 極楽ひだまり保育園()