ゆるくはじめるWordPress.

カスタムメニューに投稿数を表示させたい時のためのメモ

post-count-top

カスタムメニューはデフォルトでは該当のカテゴリーに何件記事が投稿されているかは表示してくれません。表示するためにはコードを書き加える必要があるのですが、先日その記述が書かれたサイトを発見したので、今回はそのコードを使ってカスタマイズする方法をCSSとあわせてメモしておきたいと思います。
サイドメニューを作る場合なんかに役立つと思うので、そんな時の参考にどうぞ!

完成サンプルイメージ

サイドメニュー完成イメージ

ウィジェットを使わなかった場合でもメニュー内に投稿数が表示されるようカスタマイズしてみます。カスタムメニューの詳しい設定方法に関しては下記ページで。

関連

テーマにカスタムメニューを追加する【WordPressテーマ作り STEP7】
もしグローバルメニューなどのメニューをサイトに入れたいと思ったら、カスタムメニューが使えるとかなり便利! カスタムメニュー化しておくと、テンプレートファイルを触らずに管理画面から

テンプレートファイルにカスタムメニューを設置

テンプレートファイル:例

<h4>Category</h4>
<?php wp_nav_menu( array(
  'theme_location'  => 'side_menu',
  'container'       => 'nav',
  'container_class' => 'main_menu',
  'items_wrap'      => '<ul>%3$s</ul>') );
?>

今回はサイドメニューに設置する例を用いました。
このままではカテゴリーをメニューに設定しても投稿数は表示されないので、コードを追加してカスタマイズします。


CSS

サンプルに使ったCSSも載せておきます。

CSS

h4 {
  background-color: #b0c4de;
  padding: 0.5em 0.75em;
  border-radius: 3px 3px 0 0;
  margin: 0;
  color: #fff;
}
ul {
  margin: 0;
  padding: 0;
}
.main_menu li {
  list-style-type: none;
  background-color: #fff;
  border-bottom: 2px dotted #ccc;
}
.main_menu li a {
  display: block;
  color: #666;
  padding: 0.5em 0.75em;
  text-decoration: none;
}
.main_menu li a:hover {
  background-color: #f7f6f5;
}
.main_menu li:last-child {
  border-bottom: none;
}

functions.phpにコードを追加して投稿数を表示

投稿数表示

functions.php

//カスタムメニューに投稿数表示を追加
add_filter( 'wp_nav_menu_objects', 'article_count' );
function article_count( $items ) {
  foreach ( $items as $item ) {
      if ( $term = get_term( $item->object_id, $item->object ) ) {
          $item->title .= " (". $term->count .")";
      }
      $args[] = $item;
  }
  return $args;
}

上のコードをfunctions.phpに追加すると、カテゴリー名の後ろに投稿数が表示されるようになります。コードは下記サイトのものをお借りしました。
WordPressのカスタマイズ超入門 | SONICMOOV LAB


さらに投稿数の表示部分をカスタマイズ

functions.php

//カスタムメニューに投稿数表示とクラスを追加
add_filter( 'wp_nav_menu_objects', 'article_count' );
function article_count( $items ) {
  foreach ( $items as $item ) {
      if ( $term = get_term( $item->object_id, $item->object ) ) {
          $item->title .= '<span class="menu_count">'. $term->count .'</span>';
      }
      $args[] = $item;
  }
  return $args;
}

コードを少し書き換えて投稿数部分にmenu_countとクラスを付けました。

CSSを追加

CSS

.menu_count {
  float: right;
  text-align: center;
  min-width: 2em;
  font-size: 90%;
  background-color: #c8d1de;
  padding: 2px 3px;
  color: #fff;
  border-radius: 8px;
}
サイドメニュー完成イメージ

追加したクラスにCSSを付け足すと、このようにデザインを加えて表示させる事ができます。投稿数が何桁に増えてもそれに合わせて表示可能。お好みで書き換えてカスタマイズしてみてください!


マウスオーバーが反応しない時は

ネガティブマージンを利用してサイドバーを作った場合、カラムの重なりの順番によってサイドバー内のリンクが反応しなかったり、マウスオーバーのアクションが正常に動かない事があります。
そんな時は下記コードを対象の要素に付け加えると回避できる事があるのでお試しください。

CSS

li a {
  position: relative;
  z-index: 2;
}

スポンサーリンク

公開日: