Simplicity タグクラウドのデザイン変更

率直に言って Simplicity のタグ表示は不細工だ。該当件数でフォントサイズが変わってガタガタな表示になるし、文字だけで素っ気ない。もうちょっとタグらしく、多少はきれいなデザインにしたい。というわけで、「WordPressテーマのSimplicityで表示されるタグクラウドをカスタマイズしてみた」を参考にカスタマイズしてみた。というか、半分以上コピペだが。

まずは、WP「ダッシュボード」→「外観」→「テーマの編集」へ。

画面右の「テンプレート」欄から「テーマのための関数 (functions.php)」を選択して、次のように書き加える。

function tag_cloud_customize($args) {
 $myargs = array(
 'smallest' => 13, //最小フォントサイズ
 'largest' => 13, //最大フォントサイズ
 'unit' => 'px', //フォントサイズ単位
 'orderby' => 'name', //表示順(名前)
 'order' => 'ASC', //ソート順(昇順)
 );
 $args = wp_parse_args($args, $myargs);
 return $args;
}
add_filter('widget_tag_cloud_args', 'tag_cloud_customize');

赤字部分の指定を揃えておけば、該当件数でフォントサイズが不細工に変わることはなくなる。WPのデフォルトではサイズ単位は pt だが、何かと px の方が全体を揃えやすいので、ここも変更。

つづいて、style.css でタグ表示にかかわるクラス（.tagcloud）を指定してスタイルを記述する。 transition はいらないかと思ったが、けっこうそれらしい雰囲気が出るものだな。

.tagcloud a {
  display: inline-block;
  margin-bottom: 5px;
  padding: 1px 10px;
  text-decoration: none;
  color: #89e;
  border-radius: 5px;
  border: 1px solid #ccf;
  background-color: #fff;
}
 
.tagcloud a:hover {
  transition: 0.3s;
  color: #c03;
  background: #efefef;
}