WordPressタグクラウドウィジェットのstyle属性を取り除く方法(&括弧も除去)

WordPressに、タグクラウドウィジェットがあります。

WordPressデフォルト動作のタグクラウドは、以下のような感じで「投稿数」に応じて文字サイズが変わります。

デフォルトのタグクラウドウィジェット

この、文字サイズの違いは、どのように実装されているかというと、以下のように、Aタグに対してstyle属性で直接フォントサイズを指定するタグが出力されています。

スポンサーリンク
レクタングル(大)広告

個人的に思うタグクラウドウィジェットの問題点

このように、style属性が直接HTMLタグにインラインで指定されてしまうと、何が困るかというと「CSSセレクタの優先度が極端に上がってしまい、インライン以外でスタイルを適用させようとすると!importantを使うしかなくなってしまう」ということです。

ちなみに、大まかな優先度はこんな感じ。

指定方法 点数
style属性 style=”” 1.0.0.0
ID #main 0.1.0.0
クラス .entry 0.0.1.0
属性セレクタ [href*=”google”] 0.0.1.0
疑似クラス :hover 0.0.1.0
要素名 h1 0.0.0.1
擬似要素 :first-line 0.0.0.1
全称セレクタ * 0.0.0.0

CSSセレクタの優先度について詳しくは、こちらを参照してください。

CSSセレクタの優先度の計算は、正直面倒くさいです。 簡単なものの場合は「このCSSセレクタは、IDとクラスと要素で指定してあるから0...

なので、タグクラウドに対してスタイルを適用させようと、以下のように!importantを含めずに、フォントサイズの指定をしても、

優先度が負けてしまうため、以下のように文字サイズが投稿数によって変わってしまいます。

style属性指定が優先されてしまう

今回は、このstyle属性のインライン指定をPHPで取り除いて、以下のように「全て文字サイズの同じタグクラウド」を作成する方法を紹介します。

タグクラウド完成形

ついでに、カッコも邪魔なので、取り除いてFont Awesomeのタグマークを取り付けました。

主な手順

今回のカスタマイズで必要な、主な手順は以下になります。

  1. functions.phpにstyle属性等を除去するコードを書く
  2. style.cssに表示を整えるスタイルシートを書く

基本的にコピペで行える簡単なカスタマイズです。

functions.phpにstyle属性等を除去するコードを書く

まずは、functions.phpにstyle属性を取り除くコードを書きます。加えてカッコも不要なので、併せて取り除きます。

カッコが必要な場合は、カッコを置換している部分のコードをコメントアウトしてください。

style.cssに表示を整えるスタイルシートを書く

あとは、見た目を変更するスタイルシートを書きます。

Font Awesomeの呼び出し

と、その前に、今回はFont Awesomeのアイコンフォントを利用しているので、テーマ側でFont Awesomeの呼び出しがされていない場合は、<head></head>内に以下のタグを貼り付けてください。

headタグは、大抵のテーマならばheader.phpにあるかと思います。

スタイルシートの記述

あとは、style.cssに以下のような感じでスタイルを書きます。

これでカスタマイズは終了です。

スタイルシートは好みに合わせて変更してください。

動作確認

上記のカスタマイズを行うことで、Wordpressデフォルトでは、以下のように表示されていたタグクラウドが、

デフォルトのタグクラウドウィジェット

以下のように表示されるようになりました。

タグクラウドウィジェット表示の完成形

まとめ

今回のカスタマイズを行うことで、タグクラウドのスタイルに!importantを指定せずとも、フォントサイズを揃えることができました。ついでに、カッコも取り除くことができました。

!importantは、1つならまだ良いですが、多用していると後々面倒になる可能性は高いです。なので、できるだけ使用しない方が良いのかなと。

というわけで「できるだけスタイルのインライン指定は取り除きたい」とか、「!importantは絶対に使いたくない」なんて方は今回の方法を試してみてください。

特に!importantの使用に抵抗がない場合は、普通に以下のようにCSSを書けば文字サイズは揃うかと思います。

「!importantを使いたくないばっかりにPHPをいじるのはちょっと…」なんて場合は、上記の方法で。