WordPressのカテゴリーウィジェットの投稿数部分をカスタマイズしてデザインするサンプル ~ アーカイブウィジェットも対応

更新日: 2021/01/05
公開日: 2014/07/04

カテゴリー:
- WordPress

WordPressのカテゴリーウィジェットをちょっとだけカスタマイズする内容です。デフォルトだとなんだか味気なかったので前々から調整したかったんですよね。

どういう風にカスタマイズするかというと、以下の画像のようにします。

wordpress-categories-customize01 — どっかで見たことあるよネ

このように、投稿数をタグで囲んでスタイリングします。CSSも用意していますがテーマによってスタイリングが上書きされる可能性が高いので、適宜調整が必要になるかと思われます。

フィルターフックを使ってカスタマイズ

前提として、このカスタマイズはWordPress標準のカテゴリーウィジェット、もしくはカテゴリーリストを生成するwp_list_categories()にのみ有効です。他のカテゴリー表示の関数には意味がないので注意です。

それではまず、下記ソースコードをfunctions.phpに貼り付けます。

function theme_list_categories( $output, $args ) {
    $replaced_text = preg_replace('/<\/a> \(([0-9]*)\)/', ' <span class="count">$1</span></a>', $output);
    if($replaced_text != NULL) {
        return $replaced_text;
    } else {
        return $output;
    }
}
add_filter( 'wp_list_categories', 'theme_list_categories', 10, 2 );

2015年12月22日追記：

コメントで記事数が4桁以上になった場合の改変コードをお教えいただきました。ありがとうございます。（4桁ってひっくり返る記事数ですね）

正規表現部分に少し付け加えるだけで対応可能です。カンマ区切りにしたい場合は以下のように変更します。

// ([0-9]*) の部分を、
$replaced_text = preg_replace('/<\/a> \(([0-9]*)\)/', ' <span class="count">$1</span></a>', $output);

// ([0-9,]*) というように"9"の後ろに","（カンマ）を付け加えます
$replaced_text = preg_replace('/<\/a> \(([0-9,]*)\)/', ' <span class="count">$1</span></a>', $output);

次に、カテゴリーウィジェット用にCSSを書きます。以下は僕のブログで使用しているCSSから色々消してシンプルにしたサンプルです。（線を消したり、角丸とかを削除してます）

大体はテーマフォルダ（wp-content\themes\テーマ名）にあるstyle.cssに書き込めばスタイリングできます。

.widget_categories ul.children {
 padding-left: 16px;
}
.widget_categories a {
 display: block;
 overflow: hidden;
 *zoom: 1;
 padding: 8px;
 color: #313131;
}
.widget_categories a:hover {
 background: #f0f0f0;
}
.widget_categories a:hover span {
 color: white;
 background: #313131;
}
.widget_categories span {
 display: inline;
 float: right;
 margin-left: 8px;
 padding: 1px 8px;
 font-weight: bold;
 color: #313131;
 background: #f0f0f0;
}

これでカテゴリーウィジェットの見栄え（特に投稿数）がちょっとは良くなるハズ…！

2017年04月03日追記：

アーカイブウィジェットも同様のHTML構造に近いのでカスタマイズしようかと思ったら、すでに記事化しているブログがありました。メモも兼ねてご紹介いたします。

カテゴリとアーカイブウィジェットの投稿件数をaタグの内側に | Thought is free

こちらで紹介しているコードを拝借し、三桁ごとにカンマを加えるよう修正したら完璧でしょう。

技術的なことについて補足です。

wp_list_categories()、もしくはその他カテゴリー表示関数が生成するHTML構造そのものを弄ろうとしたのですが、どうもココらへんを編集できるフックが見当たりませんでした。もし挑戦するとなると、メソッドの上書き（オーバーライド）が必要になるようです。

コレに加え、カテゴリーの親子関係を計算してHTML構造を構築しなければならず、そこら辺をWordPressはWalkerクラスとその仲間たち（メソッド）を使って調整していました。

こちらについては以下の記事を参考にしました。とっても助かりました。