カテゴリとアーカイブウィジェットの投稿件数をaタグの内側に

Worpress code

WordPress にデフォルトで付いている
カテゴリとアーカイブのウィジェット。

デフォルトだと、HTMLソースが ↓ こんな感じ

<ul>
<li class="～"><a href="～" >カテゴリ1</a> (16)</li>
<li class="～"><a href="～" >カテゴリ2</a> (5)</li>
<li class="～"><a href="～" >カテゴリ3</a> (9)</li>
<li class="～"><a href="～" >カテゴリ4</a> (10)</li>
</ul>

投稿数の表示が a タグの外側にあるので、CSS での装飾がやりづらい。

position などを指定してやれば、キレイに装飾できないこともないが、
素直に件数表示を a タグの内側にしてやった方が早いかなと思う。

SEO 的な内部リンクで考えれば、
a タグの外側にあるべきなのかもしれんが、そんなものは微々たるものだ。

というわけで、
カテゴリとアーカイブウィジェットの投稿件数をaタグの内側になるように

functions.php に以下を追加

function wp_list_categories_archives( $output ) {
    $output = str_replace("&nbsp;", " ", $output);
    $output = preg_replace('/<\/a> \(([0-9]*)\)/', ' (${1})</a>', $output);
    return $output;
}
add_filter( 'wp_list_categories', 'wp_list_categories_archives', 10, 2 );
add_filter( 'get_archives_link', 'wp_list_categories_archives', 10, 2 );

これで、HTMLソースが ↓ こんな感じに変わる

<ul>
<li class="～"><a href="～" >カテゴリ1 (16)</a></li>
<li class="～"><a href="～" >カテゴリ2 (5)</a></li>
<li class="～"><a href="～" >カテゴリ3 (9)</a></li>
<li class="～"><a href="～" >カテゴリ4 (10)</a></li>
</ul>

さらに、

function wp_list_categories_archives( $output ) {
    $output = str_replace("&nbsp;", " ", $output);
    $output = preg_replace('/<\/a> \(([0-9]*)\)/', ' <span class="count_vew">(${1})</span></a>', $output);
    return $output;
}
add_filter( 'wp_list_categories', 'wp_list_categories_archives', 10, 2 );
add_filter( 'get_archives_link', 'wp_list_categories_archives', 10, 2 );

などとしてやれば、

HTMLソースが ↓ こんな感じになるので、

<ul>
<li class="～"><a href="～" >カテゴリ1 <span class="count_view">(16)</span></a></li>
<li class="～"><a href="～" >カテゴリ2 <span class="count_view">(5)</span></a></li>
<li class="～"><a href="～" >カテゴリ3 <span class="count_view">(9)</span></a></li>
<li class="～"><a href="～" >カテゴリ4 <span class="count_view">(10)</span></a></li>
</ul>

.count_view で
投稿数の表示そのものにも装飾ができるようになるでござる。

WordPress

Posted by るな