[WP]WordPressで「タグクラウド」を出力する方法とカスタマイズのまとめ
スポンサード
sidebar.php などのテンプレートファイル内に以下のソースコードを追加します。
「ASC」で昇順、「DESC」で降順、「RAND」でランダム表示です。
タグIDはカンマ区切りで複数指定することも可能です。
当ブログでは、リンクを楕円形にして背景色を入れた上で、
スポンサード
WordPressではテンプレートタグ wp_tag_cloud() を利用して、サイドバーなどに「タグクラウド」を表示させることができます。
タグ一覧のデザインも変更しやすく便利です。
今回はタグクラウドの基本的な使い方に加えて、簡単なカスタマイズもまとめて紹介させていただきます。
目次
タグクラウド を表示する
まずはそのまま wp_tag_cloud() を利用してタグクラウドを表示する方法です。sidebar.php などのテンプレートファイル内に以下のソースコードを追加します。
1 | <?php wp_tag_cloud(); ?> |
フォントサイズを変更する
紐づけられたタグの記事件数によって、フォントサイズを変更することも可能です。smallest
が「件数が少ない」タグで、デフォルトが8pt、largest
が「件数が多い」タグで、デフォルトが22pt です。1 | <?php wp_tag_cloud('smallest=8 & largest=22'); ?> |
タグクラウドの並び順を変更する
order
で「並び順」を指定できます。「ASC」で昇順、「DESC」で降順、「RAND」でランダム表示です。
1 | <?php wp_tag_cloud('order=DESC'); ?> |
タグクラウドの表示件数を変更する
number
で「表示件数」を変更できます。初期値は45 です。1 | <?php wp_tag_cloud('number=45'); ?> |
特定のタグを除外する
exclude
を使えば、指定したIDのタグは一覧から除外されます。タグIDはカンマ区切りで複数指定することも可能です。
1 | <?php wp_tag_cloud('exclude=1,3,4,5'); ?> |
タグクラウドのフォーマットを変更する
デフォルトの設定のままでは、大小さまざまなフォントサイズのタグリンクがズラ〜っと横に並ぶのですが、format=list
にすることで「リスト形式」に変更することも可能です。1 | <?php wp_tag_cloud('format=list'); ?> |
タグクラウドのデザインを変更する
出力されたタグクラウドのデザインをCSS で補正できます。当ブログでは、リンクを楕円形にして背景色を入れた上で、
:hover
時の色も変更しています。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /*通常*/ .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
テンプレートタグ/wp tag cloud
スポンサード
コメント