タグクラウドに【記事数を表示】して【デザインも変える】簡単な方法

WoedPressのウィジェットのタグクラウドをカスタマイズをしました。
目標にしたのは、「NAVERまとめ」の様なタグの表示です。

目標にした「NAVERまとめ風タグクラウド」

このタグクラウドの特徴は

  • 記事の投稿数が表示されている
  • 四角い枠で囲まれたデザイン

このようにしたくて試行錯誤した結果、なんとか出来ましたので、ご紹介します

私が現在使用しているテーマはSimplicityですが
今回ご紹介する方法は「プラグインをインストールして「スタイルシート(style.css)にソースをコピペするだけ」なので、テーマが「STINGER」など、どのテーマでも大丈夫だと思います。

インストールとコピペで超かんたん!
タグクラウドに【記事数を表示】して【デザインを変える方法】

タグクラウドに記事数を表示する

1. 「Simple Tags」プラグインをインストール

「Simple Tags」プラグインをインストールします。
管理画面から「Simple Tags」を検索します。
WordPress管理画面 > プラグイン > 新規追加 >「Simple Tags」で検索


インストールして有効化します。

2.記事数を表示するためのパラメーター追加

「Simple Tags」の設定画面を開きます。
WordPress管理画面 > プラグイン > Simple Tagsです。

設定画面が開いたら「タグクラウド」をクリック

ページの真ん中あたりに「タグリンクのフォーマット」があります。

「タグリンクのフォーマット」のいちばん後ろの</a>の前に(%tag_count%) を追加します。

これで、タグクラウドの後ろに記事数が表示されるようになります。

3.ウィジェットの設定

ウィジェットにTag Cloud(Simple Tags)を追加します。

表示位置や表示内容を設定します。タグの表示順番、文字サイズ、文字の色なども細かく指定できます。こちらはお好みでどうぞ。

4.完成

タグクラウドに記事数が表示されるようになりました。

タグクラウドのデザインを変える

「Simple Tags」プラグインで表示されるようになったタグクラウドのデザインを変更していきます。

1.style.cssを開く

WordPress管理画面 > 外観>テーマの編集>から使用しているテーマのstyle.cssを開きます。

2.ソースをコピペして更新

現在使用しているテーマのstyle.cssに以下のソースをコピペして更新してください。
子テーマが使用できる方は子テーマのstyle.cssにコピペして更新してください。
貼り付ける場所は一番下です。
※なるべく子テーマを使用する事をおすすめします。

3.完成

以上で完成です。

上記のソースで変更したタグクラウド

まとめ

どうでしょう?
「NAVERまとめ」風に見えるでしょうか?

枠の色や形などのデザインを変えてみたい方はソースを変えてみてくださいね。

文字の大きさや色はプラグイン「Simple Tags」の設定画面から変更できます。
「Simple Tags」はタグの管理にとっても便利なプラグインなので、インストールをおすすめします。