ウィジェットコメント0件

[WordPress] カテゴリ一覧ウィジェットの記事数をaタグ内に入れる方法

目次 []

カテゴリ一覧ウィジェットの記事数をaタグ内に入れたい

WordPressのカテゴリ一覧ウィジェットにはオプションで記事数も合わせて出力することが可能です。ただし、リストのリンクになっている部分の外に記事数が出力されます。

不都合がなければ別に良いのですが、デザインの都合で記事数部分のテキストもリンクに含めたいと考えました。その対応方法をまとめます。

通常の出力の確認

まずは何もカスタマイズしない状態で、記事数部分がどのように出力されるか確認します。

<li class="cat-item cat-item-20">
    <a href="https://example.com/archives/category/xxx">XXXX</a> (5)
</li>

このようにaタグの外に記事数が出力されています。これを次のように出力するのが目的です。

<li class="cat-item cat-item-20">
    <a href="https://example.com/archives/category/xxx">XXXX (5)</a>
</li>

カスタマイズ方法

既存のカテゴリウィジェットを継承してカスタマイズしてもうまくいくと思いますが、ここはフィルターフックで出力内容を書き換えて対応します。

// 渡された値を何もせずそのまま返すだけ
add_filter( 'wp_list_categories', function( $output, $args ) {
    return $output;
}, 10, 2 );

フィルターイベント wp_list_categories は、カテゴリウィジェットが出力する内容をカスタマイズすることができます。

引数 $output は、出力されるHTLMテキストが格納されており、引数 $args は、ウィジェットのオプションが格納されています。

戻り値でカスタマイズして書き換えたテキストを返すと、その値で出力してくれます。上のコードでは渡された値をそのまま返していますが、この値を変形して無理やり出力内容をカスタマイズします。

$output の内容

$output には、カテゴリのリストアイテム部分だけが来ます。

<li class="cat-item cat-item-1">
    <a href="http://example.com/archives/category/uncategorized" >Uncategorized</a> (5)
</li>
<li class="cat-item cat-item-2">
    <a href="http://example.com/archives/category/%e3%81%82%e3%81%95%e3%81%b2" >あさひ</a> (1)
</li>
<li class="cat-item cat-item-17">
    <a href="http://example.com/archives/category/%e3%82%a2%e3%83%a1%e3%83%aa%e3%82%ab" >アメリカ</a> (2)
</li>
<li class="cat-item cat-item-18">
    <a href="http://example.com/archives/category/%e3%82%a4%e3%82%bf%e3%'... (length=11714)

記事数部分をaタグ内に入れる正規表現

$output を正規表現で置換し、aタグの中に記事数部分のテキストを入れてしまいます。

add_filter( 'wp_list_categories', function( $output, $args ) {
    $output = preg_replace( '/<\/a>\s*\((\d+)\)/',' ($1)</a>', $output );
    return $output;
}, 10, 2 );

出力は次のようになります。上にある元の出力と比べてみるとどうなっているかよくわかります。

<li class="cat-item cat-item-1">
    <a href="http://example.com/archives/category/uncategorized" >Uncategorized (5)</a>
</li>
<li class="cat-item cat-item-2">
    <a href="http://example.com/archives/category/%e3%81%82%e3%81%95%e3%81%b2" >あさひ (1)</a>
</li>
<li class="cat-item cat-item-17">
    <a href="http://example.com/archives/category/%e3%82%a2%e3%83%a1%e3%83%aa%e3%82%ab" >アメリカ (2)</a>
</li>
    <li class="cat-item ca'... (length=13685)

preg_replace 関数は、第一引数で </a> (5) となっている部分を正規表現で指定し、記事数部分のテキストを変数に格納しています。

第二引数で置換する値を指定するときにマッチングした値の変数部分を使い、(5) </a> となるように指定しています。

第三引数は、正規表現を使う対象となる文字列なので、$output を指定しています。

preg_replace 関数によってすべての記事数部分のテキストが置換され、記事数部分がaタグの中に格納されるようになります。

以上。