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

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

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

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

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

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

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

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

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

主な手順

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

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

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

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

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

//カテゴリ・アーカイブウィジェットの投稿数のカッコを取り除く
function remove_post_count_parentheses( $output ) {
  $output = preg_replace('/<\/a>.*\((\d+)\)/','<span class="post-count">$1</span></a>',$output);
  return $output;
}
add_filter( 'wp_list_categories', 'remove_post_count_parentheses' );
add_filter( 'get_archives_link',  'remove_post_count_parentheses' );

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

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

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

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

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

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

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

/*カテゴリー・アーカイブウィジェット*/
.widget_categories ul,
.widget_archive ul {
  padding: 0;
  list-style: none;
}

.widget_categories ul li ul,
.widget_archive ul li ul {
  padding-left: 20px;
}

.widget_categories ul li a,
.widget_archive ul li a {
  color: #333;
  text-decoration: none;
  padding: 10px 0;
  display: block;
  padding-right: 4px;
  padding-left: 4px;
}

.widget_categories ul li a:hover,
.widget_archive ul li a:hover {
  background-color: #f3f3f3;
  transition: all 0.3s ease 0s;
}

.widget_categories ul li a .post-count,
.widget_archive ul li a .post-count {
  display: block;
  float: right;
  color: #fff;
  background-color: #999;
  font-size: 0.8em;
  padding: 0 6px;
  border-radius: 6px;
}

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