いつかしようと思いながら放置したままにしていたグローバルナビゲーションのハイライト表示に手を付けてみました。

これまでブログ関連のカテゴリーページやタグページなどを開いても、グローバルナビの「ブログ」にハイライトが当たっていませんでした。

例えばこのように。これではサイト構造上おかしいですね。

これはブログ一覧ページを固定ページにしているためにcurrent_page_parentクラスやcurrent_page_ancestorクラスでは対応できていないためです。

そこでハイライト表示を完成させるために、wp_nav_menuに条件付きで新しいクラスを追加します。

グローバルナビに条件付きでカスタムクラスを追加する

1.function.phpに次の関数を追加します。

function hub_current_nav($css, $item) {
  if ($item->title == 'ブログ') {
    if(is_single() || is_archive()) {
      $css[] = 'current-page-ancestor';
    }
  }
  return $css;
}

やっていることは簡単で「is_single()」「is_archive()」と2つの条件分岐タグを使って「wp_nav_menu」のタイトルが「ブログ」の項目にcurrent-page-ancestorクラスを追加しています。

2.header.phpに次のフィルターフックを追加します。

<?php
  add_filter('nav_menu_css_class', 'hub_current_nav', 10, 2);
  wp_nav_menu(array(
    'container' => 'ul',
    'menu_class' => 'nav navbar-nav',
    'theme_location' => 'place_pc_global',
    'depth' => 3,
  ));
  remove_filter('nav_menu_css_class', 'hub_current_nav');
?>

nav_menu_css_classフックポイントにadd_filterでさきほど「function.php」に追加したhub_current_navを登録します。これは一度限りの処理なので、remove_filterでフックの登録解除忘れずに。

グローバルナビのハイライト表示が完成

うまくいきました。フィルターフックって本当に便利。