WordPressのカテゴリー一覧ウィジェットの記事数をCSSで装飾する方法

WordPressの標準カテゴリー一覧ウィジェットは記事数だけ<a></a>タグに囲まれていないため、CSSで装飾できません。

というわけで記事数の部分だけを<a></a>で囲ってCSSで装飾する方法を紹介していきたいと思います。

では早速どうぞ。

※このコードは標準のWordPressウィジェットである「カテゴリー一覧」にのみ有効です。お使いのテーマによっては別にカスタムウィジェットが用意されている場合があるのでお気をつけください。

function.phpをカスタム

とりあえず下記コードを「function.php」に貼り付けてください。

function wp_list_categories_archives( $output ) {
    $output = str_replace("&amp;nbsp;", " ", $output);
    $output = preg_replace('/&lt;\/a&gt; \(([0-9]*)\)/', ' &lt;span class="count_vew"&gt;${1}&lt;/span&gt;&lt;/a&gt;', $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 );

これでカテゴリー一覧の記事数が<a></a>で囲われたと思います。

サンプルCSS

とりあえず僕がこのWEBサイトで使っているCSSをそのまま貼っておくので適当に編集して使ってください。

span.count_vew {
    float: right;
    background: #333;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    text-align: center;
}

上記のようなCSSをあてると、

こんな感じになると思います。

まとめ

いかがでしたでしょうか。

今回もコピペでササっとカスタマイズできるので、ぜひお試しください。

ではでは。

Writer

フクチ

フクチ| CEO


代表の福知です。 よろしくお願いします。









こちらの記事もおすすめ

Related Posts