WordPressではウィジェットの中に、タグを表示するための「タグクラウド」というウィジェットが用意されています。タグクラウドを表示すると、タグが登録してある投稿が多い順にフォントの大きさが変更されます。
タグクラウドのフォントサイズ変更は、やっかいなことにstyle属性でHTML内にインラインで追加されるようになっています。例えば、以下のような感じです。
1 | <a href="http://example.com/tag/tag01/" class="tag-cloud-link tag-link-3 tag-link-position-1" style="font-size: 22pt;" aria-label="タグ1 (2個の項目)">タグ1<span class="tag-link-count"> (2)</span></a> |
インラインでスタイルが追加されるため、CSSでフォントサイズを変更しようと思ったら、!importantを付けて優先度を上げてやらなければいけません。それはそれでいいのですが、!importantは極力使いたくないものです。
そこで今回は、タグクラウドのコードから、style属性を除去してしまう方法をご紹介したいと思います。
WordPressのタグクラウドに追加されるstyle属性を除去する方法
タグクラウドに追加されるstyle属性を除去するには、functions.phpに以下を追加します。
1 2 3 4 5 | function tagcloud_style_removal( $output ) { $output = preg_replace( '/\s*?style="[^"]+?"/i', '', $output); return $output;}add_filter( 'wp_tag_cloud', 'tagcloud_style_removal'); |
ウィジェットの設定で、「タグの数を表示」にチェックを入れていて、タグの数に付与される括弧も除去したい場合は、以下のように記述します。
1 2 3 4 5 6 7 | function tagcloud_style_removal( $output ) { $output = preg_replace( '/\s*?style="[^"]+?"/i', '', $output); $output = str_replace( ' (', '', $output); $output = str_replace( ')', '', $output); return $output;}add_filter( 'wp_tag_cloud', 'tagcloud_style_removal'); |
これでタグクラウドのstyle属性および投稿数の括弧が出力されなくなります。
あとがき
投稿数によってフォントサイズが変わるデザインって、わかりやすいといえばわかりやすいですけど、見た目的には正直ダサいですよね^^; タグクラウドの見た目を統一したい時は、ぜひ参考にしていただければと思います。