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

2020年3月22日

WordPressではテンプレートタグ wp_tag_cloud() を利用して、サイドバーなどに「タグクラウド」を表示させることができます。タグ一覧のデザインも変更しやすく便利です。今回はタグクラウドの基本的な使い方に加えて、簡単なカスタマイズもまとめて紹介させていただきます。

タグクラウドを表示する

まずはそのまま wp_tag_cloud() を利用してタグクラウドを表示する方法です。 sidebar.php などのテンプレートファイル内に以下のソースコードを追加します

<?php wp_tag_cloud(); ?>

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

紐づけられたタグの記事件数によって、フォントサイズを変更することも可能です。 smallest が「件数が少ない」タグで、デフォルトが8pt、 largest が「件数が多い」タグで、デフォルトが22pt です。

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

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

order で「並び順」を指定できます。「ASC」で昇順、「DESC」で降順、「RAND」でランダム表示です。

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

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

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

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

特定のタグを除外する

exclude を使えば、指定したIDのタグは一覧から除外されます。タグIDはカンマ区切りで複数指定することも可能です。

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

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

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

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

参考ページテンプレートタグ/wp tag cloud