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

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

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

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

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

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

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

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

2015年12月22日追記:

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

正規表現部分に文字通りチョンっと付け加えるだけのようです。カンマ区切りにしたい場合は以下のように変更します。

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

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

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

 

2017年04月03日追記:

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

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

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


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

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

コレに加え、カテゴリーの親子関係を計算してHTML構造を構築しなければならず、そこら辺をWordPressはWalkerクラスとその仲間たち(メソッド)を使って調整していました。なんかちょっとヤバイので、以下の記事を参考にしました。とっても助かりました。

こちらの記事にも書いてある通り力技になってしまいますが、仕方がないのかなと思います。

最終更新日:2017年4月3日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

    Trackback: https://increment-log.com/wordpress-categories-customize/trackback/