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

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

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

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

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

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

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

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

2015年12月22日追記:

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

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

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

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

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

あと、「シンプルにサンプル」とかダジャレは言っていません。


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

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

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

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

最終更新日:2015年12月22日

コメント

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

  • hype studio

    わかりやすい解説、ありがとうございました。
    ひとつ、2行目の閉じspanのスペルが違っていたので報告させていただきますね。

    現状:${1}
    正解:${1}

  • increment-log

    ご指摘ありがとうございます。
    確かにspanタグのスペルが間違っていました^^;

    「/spn」から「/span」に修正いたしました。

  • 雪姫

    しおつぎさん、はじめまして。

    カテゴリリストのデザインを何とかしたいなぁと思いカスタマイズ記事を探していて、こちらに辿り着きました。

    私のサイトは1つのカテゴリの内包件数が4桁になることがあり、数字3ケタごとにカンマが入ります。
    そこで、([0-9]*) を ([0-9,]*) に変更したところ4桁カンマ付きでもうまく表示できました。

    わかりやすい記事でとても参考になりました、シェアありがとうございます!

    • 雪姫さん、はじめまして。

      コメントありがとうございますm(__)m

      記事数が4桁!半端ないですね、ひっくり返りそうです。4桁区切りのコード追加しておきますね、合わせてありがとうございます。

      今回の記事のプログラムは引用した部分もありますが、参考になったようでなによりです!

トラックバック

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