福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン

ご指定された単一記事を表示しています。
2013年7月14日 タグ:

カテゴリー一覧表示で、投稿数もリンクタグ内に出力する

カテゴリー一覧表示で、投稿数もリンク内に出力する

WordPressで、カテゴリーやカスタム分類の一覧表示でよく使われるのが、wp_list_categorieというテンプレートタグです。

$argsは「引数」で、いろいろ用意されていますのでカスタマイズもしやすいです。 具体的な引数については、WordPress Codex をご確認ください。

カテゴリーリンクと投稿数を出力する

ソースコード具体例
画面での表示
出力されるHTML

カスタム分類と投稿数を出力する

ソースコード具体例
画面での表示
出力されるHTML

投稿数もリンク内に出力する必要があるケース

場合によっては、投稿数もリンク内に出力したい場合があります。たとえば、マウスオーバーされたさいに、

の範囲でアクションを起こしたいときなどです。

こんなメニューがあったとします。マウスオーバーさせたときの変化する範囲を確認してください。
出力されるHTML
投稿数を表示させると、マウスオーバー時の変化する範囲が小さくなってしまいます。
出力されたHTML。投稿数がリンクの外に入っています。これが原因です。

投稿数もリンク内に出力する方法

大変便利な wp_list_categories ですが、投稿数もリンク内に出力できるオプションはありません。 そこで少し力技ですが、wp_list_categories で取得したデータを、PHPの preg_replace 関数で、投稿数をリンクの中にいれてみます。

挿入するソース
画面での表示
出されたHTML

wp_list_categoriesの引数 「echo」は、値を0とするとカテゴリーリストは出力されず、変数に代入することができます。
上のソースの4行目で$stringにそれを行っています。

preg_replace関数は、「正規表現検索および置換を行う」という関数で

第1引数:正規表現で検索を行うパターン
第2引数:置換を行う文字列
第3引数:検索・置換の対象となる文字列
を記述します。

preg_replace関数を説明すると以下のようになります。

ちなみにこのサイトでは、投稿数自体も少しいじりたかったので、投稿数にclassを付けてあります。

※今回ご紹介した方法の他にも、カテゴリーリストのリンク内に投稿数を入れる方法があるようなので、またご紹介できればと思います。
※記述間違い等のご指摘があれば、教えていただけると助かります。
こちらの記事もどうぞ
参照にさせていただいたサイト
カテゴリー:WordPress tutorial

コメント

「カテゴリー一覧表示で、投稿数もリンクタグ内に出力する」への3件のコメント

  1. Pingback:[WordPress]テーマを自作する~その⑤~新しいテーマについて少しだけお見せします。 | Sorairo

  2. Pingback:wp_list_categoriesで()の数字をリンクさせる | たけめも

  3. Pingback:WordPressのカテゴリーウィジェットの投稿数部分をカスタマイズしてデザインするサンプル

コメントを残す

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

FB Comment 試験中