WordPressに、タグクラウドウィジェットがあります。
WordPressデフォルト動作のタグクラウドは、以下のような感じで「投稿数」に応じて文字サイズが変わります。
この、文字サイズの違いは、どのように実装されているかというと、以下のように、Aタグに対してstyle属性で直接フォントサイズを指定するタグが出力されています。
<a style="font-size: 16.279569892473pt;" （その他属性略） >
目次
個人的に思うタグクラウドウィジェットの問題点
このように、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セレクタの優先度について詳しくは、こちらを参照してください。
なので、タグクラウドに対してスタイルを適用させようと、以下のように!importantを含めずに、フォントサイズの指定をしても、
.tagcloud a {
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 2px;
color: #555;
display: inline-block;
margin-bottom: 5px;
padding: 4px 8px;
text-decoration: none;
font-size: 12px;
}
.tagcloud a:hover {
background-color: #f3f3f3;
transition: all 0.3s ease 0s;
}
優先度が負けてしまうため、以下のように文字サイズが投稿数によって変わってしまいます。
今回は、このstyle属性のインライン指定をPHPで取り除いて、以下のように「全て文字サイズの同じタグクラウド」を作成する方法を紹介します。
主な手順
今回のカスタマイズで必要な、主な手順は以下になります。
- functions.phpにstyle属性等を除去するコードを書く
- style.cssに表示を整えるスタイルシートを書く
基本的にコピペで行える簡単なカスタマイズです。
functions.phpにstyle属性等を除去するコードを書く
まずは、functions.phpにstyle属性を取り除くコードを書きます。加えてカッコも不要なので、併せて取り除きます。
//タグクラウドの出力変更
function wp_tag_cloud_custom_ex( $output ) {
//style属性を取り除く
$output = preg_replace( '/\s*?style="[^"]+?"/i', '', $output);
//カッコを取り除く
$output = str_replace( ' (', '', $output);
$output = str_replace( ')', '', $output);
return $output;
}
add_filter( 'wp_tag_cloud', 'wp_tag_cloud_custom_ex');
style.cssに表示を整えるスタイルシートを書く
あとは、見た目を変更するスタイルシートを書きます。
Font Awesomeの呼び出し
と、その前に、今回はFont Awesomeのアイコンフォントを利用しているので、テーマ側でFont Awesomeの呼び出しがされていない場合は、<head></head>内に以下のタグを貼り付けてください。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
スタイルシートの記述
あとは、style.cssに以下のような感じでスタイルを書きます。
.tagcloud a {
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 2px;
color: #555;
display: inline-block;
margin-bottom: 5px;
padding: 4px 8px;
text-decoration: none;
font-size: 12px;
}
.tagcloud a::before {
font-family: FontAwesome;
content: "\f02b";
padding-right: 3px;
}
.tagcloud a:hover {
background-color: #f3f3f3;
transition: all 0.3s ease 0s;
}
.tagcloud a .tag-link-count {
margin-left: 10px;
}
これでカスタマイズは終了です。
動作確認
上記のカスタマイズを行うことで、Wordpressデフォルトでは、以下のように表示されていたタグクラウドが、
以下のように表示されるようになりました。
まとめ
今回のカスタマイズを行うことで、タグクラウドのスタイルに!importantを指定せずとも、フォントサイズを揃えることができました。ついでに、カッコも取り除くことができました。
!importantは、1つならまだ良いですが、多用していると後々面倒になる可能性は高いです。なので、できるだけ使用しない方が良いのかなと。
というわけで「できるだけスタイルのインライン指定は取り除きたい」とか、「!importantは絶対に使いたくない」なんて方は今回の方法を試してみてください。
特に!importantの使用に抵抗がない場合は、普通に以下のようにCSSを書けば文字サイズは揃うかと思います。
.tagcloud a {
font-size: 12px !important;
}
「!importantを使いたくないばっかりにPHPをいじるのはちょっと…」なんて場合は、上記の方法で。
