wordpressでタグクラウドを均一なサイズにする方法

記事が増えてきて、タグクラウドのサイズのバラバラ感が目立ってきたので修正を行いました。

なんでタグクラウドのサイズが変わってしまうの？

<div class="tagcloud">
<a href='http://darudaru-life.com/tag/php' class='tag-link-7 tag-link-position-3' title='2件のトピック' style='font-size: 16.4pt;'>PHP</a>
<a href='http://darudaru-life.com/tag/wordpress' class='tag-link-6 tag-link-position-4' title='3件のトピック' style='font-size: 22pt;'>wordpress</a>
<a href='http://darudaru-life.com/tag/work' class='tag-link-8 tag-link-position-5' title='1件のトピック' style='font-size: 8pt;'>work</a></div></article>

タグに紐づく記事の件数によって、aタグのstyleが変わっています。

1件の場合はfont-size:8px、2件の場合はfont-size:16.4px、とどんどん大きくなっていきます。

これがタグクラウドの文字サイズがバラバラになってしまう原因です。

わたしのようにcssでタグクラウドのスタイルを指定していても、タグクラウドのフォントサイズがインラインで指定されているため、一番強くなってしまっています。

修正方法

1. 「!important」を指定する

一番簡単な方法です。

タグクラウドのaタグにスタイルの優先順位を一番高くさせる!importantを指定します。

.tagcloud a {
 font-size: 16px !important;
}

修正範囲もたった1行をcssに追加するだけで修正できます。

できるんですが、ネット上の情報を見ていると修正方法としては次に出てくるfuntions.phpを改修する方法がほとんど。

なんでだ？と調べていたところ、!importantはcssの優先順位のルールを無視させる方法のため、マークアップする上ではあまり推奨できないという意見が多く見られました。

書いたスタイルが!importantのせいで逆に反映されなかったり、いざ外そうとしても影響範囲が分からないなど、メンテナンスも悪いからとのこと。

とはいえ、個人のwordpress内で、しかも意図的にスタイルを無視させたいがために使うので、!importantで修正しちゃって問題ないと個人的には思います。

2. functions.phpにタグクラウドのオプションを追加する

functions.phpにタグクラウドのパラメータの変更処理を追加します。

function tag_cloud_filter($args){
  $args['unit'] = 'px';  // フォントサイズの単位。デフォルトだとpt。
  $args['smallest'] = 13;  // 最小文字サイズは13px
  $args['largest'] = 13;  // 最大サイズは13px
  return $args;
}
add_filter('widget_tag_cloud_args', 'tag_cloud_filter');

これで完了です。

さいごに

このブログでは勉強もかねてfunctions.phpの方法で修正を行いました。