WordPressの「wp_list_categories」を使って投稿(記事)数を表示する時に「a要素」内に入れたり、カッコ「()」を取ったりする方法

WordPressでリンク付きでカテゴリーをリスト形式で表示させたい場合には「wp_list_categories」というテンプレートタグを使うと便利なんで、私はよく利用しています。

それで、

「カテゴリー名の隣に記事数を表示させたい!」

としたら、例えば下のようにPHPコードを書くとできます。

PHPコード

wp_list_categories('show_count=1');

「wp_list_categories」にはパラメーターを設定することができます。上のコードのように「show_count」パラメーターに「1」を設定してあげると、カテゴリ名の隣に記事数が表示されます。

こんな感じで、カテゴリ名の隣に記事数が表示されます

出力されるhtmlコードは以下です。

htmlコード

<li class="categories">カテゴリー
 <ul>
  <li class="cat-item cat-item-2"><a href="http://local.wptest.com/wp/category/dai/" title="大カテゴリー に含まれる投稿をすべて表示">大カテゴリー</a> (3)
  <ul class="children">
   <li class="cat-item cat-item-3"><a href="http://local.wptest.com/wp/category/dai/chu/" title="中カテゴリー に含まれる投稿をすべて表示">中カテゴリー</a> (3)
   <ul class="children">
    <li class="cat-item cat-item-7"><a href="http://local.wptest.com/wp/category/dai/chu/syou/" title="小カテゴリー に含まれる投稿をすべて表示">小カテゴリー</a> (2)
    </li>
   </ul>
   </li>
  </ul>
  </li>
 </ul>
</li>

と、ここで上のhtmlコードの太字になっている部分に注目ください。記事数が表示されている部分ですね。これを「a要素の中に入れたい」と思いました。

記事数も「a要素」に入れて出力させたい

こんな感じにしたいとします。

記事数が「a要素」に入ってる状態

その場合は、下のようにPHPコードを書くとできます。

PHPコード

$categories = wp_list_categories('echo=0&show_count=1');
$categories = preg_replace('/<\/a> \(([0-9]+)\)/', ' <span class="count">(\\1)</span></a>', $categories );
echo $categories;

(そのまんまのご紹介になりますが・・・コードは「Category count inside the link」を参考にさせて頂きました。ありがとうございます)

上のコードがやっていることは、「wp_list_categories」にパラメーター「echo」を追加、値を「0」にして「$categories」に一旦格納します。それで、「preg_replace」関数を使って「</a>(0~9の数字)」の文字列があった場合、「a要素の内部に入れるように置換」しています。

ちなみに、上のコードの例では「span要素」にクラス名「count」も付与して置換、カウント数も個別にスタイルシートで装飾できるようになっています。

出力されるhtmlコードは以下です。

htmlコード

<li class="categories">カテゴリー
 <ul>
  <li class="cat-item cat-item-2"><a href="http://local.wptest.com/wp/category/dai/" title="大カテゴリー に含まれる投稿をすべて表示">大カテゴリー <span class="count">(3)</span></a>
  <ul class="children">
   <li class="cat-item cat-item-3"><a href="http://local.wptest.com/wp/category/dai/chu/" title="中カテゴリー に含まれる投稿をすべて表示">中カテゴリー <span class="count">(3)</span></a>
   <ul class="children">
    <li class="cat-item cat-item-7"><a href="http://local.wptest.com/wp/category/dai/chu/syou/" title="小カテゴリー に含まれる投稿をすべて表示">小カテゴリー <span class="count">(2)</span></a>
    </li>
   </ul>
   </li>
  </ul>
  </li>
 </ul>
</li>

ちゃんと「a要素」内に記事数が入ってます。いい感じです。

おまけ:記事数の両隣にあるカッコ「()」を消したい!という場合

さきほどのPHPコードを応用すればOKです。

PHPコード

$categories = wp_list_categories('echo=0&show_count=1');
$categories = preg_replace('/<\/a> \(([0-9]+)\)/', ' <span class="count">\\1</span></a>', $categories );
echo$categories;

結果は以下のようになりました。出力されるhtmlは省略しますね。

いいですねぇ。「preg_replace」で置換する文字列を変えてあげればいいだけです。この辺はいろいろと試して、お好みで出力してみましょう~。

以上、何かのご参考となりましたら幸いです。

著者:bouya Imamura