WordPressのカテゴリー・アーカイブウィジェットの投稿数に付加されるカッコを除去するカスタマイズ方法

WordPressのウィジェット機能に「カテゴリー」と「アーカイブ」ウィジェットがあります。

それぞれのウィジェットの、「投稿数を表示」機能を有効にすると、それぞれの項目に対して投稿数が表示されます。

カテゴリー・アーカイブウィジェットで「投稿数を表示」を有効にする

このように、設定して公開ページのウィジェットエリアを見てみると、以下のように投稿数がカッコ付きで表示されます。

のカテゴリー・アーカイブウィジェットの投稿数がカッコつきで表示

これを後から、CSSでスタイリングしようかとしたときに、カッコが何かと邪魔になるなんてこともあるかと思います。

加えて、「投稿数」は、Aリンク内に含まれていないので、「スタイリングする時に扱いづらい」なんて難点も。

「この難点を解消する方法はないものか?」と調べてみたら、とりあえず解消方法はあるみたいです。

そんなわけで今回は、「カテゴリー・アーカイブウィジェットの投稿数のカッコを取り除いて、投稿数もAタグ内に同梱する方法」について書きたいと思います。

最終的には、こんな感じになるようにカスタマイズしてみたいと思います。

カテゴリー・アーカイブウィジェットの投稿主の完成形

スポンサーリンク
レクタングル(大)広告

主な手順

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

  1. functions.phpに投稿数のカッコを取り除くコードを書く
  2. style.cssに表示を整えるCSSを書く

特に、動作にこだわらなければ、コピペ2回で行えるカスタマイズになっています。

functions.phpに投稿数のカッコを取り除くコードを書く

まずは、functions.phpに以下のコードをコピペします。

やっていることは単純で、カテゴリー・アーカイブウィジェット表示前の状態で、投稿数のカッコを正規表現置換で取り除いて、CSSでスタイリングする上で必要になるHTML要素を付加して出力しているだけです。

ウィジェットの出力を制御する上で必要となるフィルターフック名は、以下の記事を参考にさせていただきました。

参考 How to remove the parentheses from the category widget | Don’t Forget

style.cssに表示を整えるCSSを書く

ただ、この時点では、まだCSSを設定していないので、Wordpress上で閲覧してみると、以下のように表示されます。

スタイルを設定しないで投稿数のカッコを取り除いた状態

「項目」と「投稿数」がくっついて表示されてしまいます。これに対して、表示の体裁が整うように以下のようにCSSを記述します。

style.cssに、以下のコードをコピペします。

CSSは好みに合わせて変更してください。

動作確認

今回、「投稿数のカッコを取り除く」処理を行い、「CSSでスタイルを整える」作業を行ったことで、以下のように表示されます。

カテゴリー・アーカイブウィジェットの投稿主の完成形[4]

投稿数も、Aタグ内に同梱されています。

まとめ

上のスタイルはさておき、CSSである程度自由に見た目を変更できるようにはなったかと思います。

とりあえず、CSSでは消すことのできないカッコを取り除いて、スタイリング用のHTML要素も付け加えたので、以前よりはスタイルの自由度が上がったのではないかと。

カテゴリーウィジェットの出力を変更するには「wp_list_categories」を。アーカイブウィジェットの出力を変更するには「get_archives_link」をフックして、置換すればHTML出力自体もある程度自由に変更可能です。

というわけで、「カテゴリー・アーカイブウィジェットが出力するHTMLが気に入らない」なんて場合は、今回の方法で変更することは可能になると思います。