WordPress ウィジェットカテゴリーの投稿数をa要素内に入れspanで囲む

category-widget

今回は、ウィジェットカテゴリーの投稿数をa要素内に入れ投稿数を<span>で囲みたいと思います。
WordPressでは、ウィジェットにデフォルトでカテゴリーウィジェットがあり投稿数も表示出来ますが、投稿数を表示するとa要素外に投稿数が表示されますので、この投稿数をa要素内に入れ<span>で囲みたいと思います。
今回は、functions.phpにコードを記載していきたいと思います。

カテゴリーウィジェットは管理画面 > 外観 > ウィジェット で設定できます。

widget

通常の投稿数を表示した場合

通常通り管理画面 > 外観 > ウィジェットでカテゴリーウィジェットに投稿数を表示にチェックを入れて設定した場合下記のような表示になります。

widget-1

このレイアウトでも良いとは思うのですが、CSSなのでデザインをしにくいので、投稿数をa要素内に入れなおかつ投稿数を<span>で囲みたいと思います。
下記のようなしたいと思います。

widget-2

ウィジェットカテゴリーの出力されたコードがこちらです。

widget-3

functions.phpにコードの記載

それでは、functions.phpにウィジェットカテゴリーの投稿数もa要塞に入れ<span>で囲むコード記載していきましょう。
下記コードを記載します。

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

上記コードをfunctions.phpに記載するだけで投稿数もa要塞に入れ<span>で囲まれます。
今回は、()を表示させていますが、不要の場合は、($1)$1に変更すれば、投稿数のみ表示できますしclass名も変更可能です。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS app-icon-img

AppStore アフェリエイターには必須ツール 【AppStoreアイコン取得プログラム】

NEXT badge-img

PhotoShop 可愛らしいバッジ素材【ベクター】【商用可】