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

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セレクタの優先度について詳しくは、こちらを参照してください。

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

なので、タグクラウドに対してスタイルを適用させようと、以下のように!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属性指定が優先されてしまう

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

タグクラウド完成形

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

主な手順

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

  1. functions.phpにstyle属性等を除去するコードを書く
  2. 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">
headタグは、大抵のテーマならばheader.phpにあるかと思います。

スタイルシートの記述

あとは、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をいじるのはちょっと…」なんて場合は、上記の方法で。