WordPressでナビゲーションに現在地のcurrent classをつける方法

WordPressのナビゲーションに現在地表示のためのclassを付与したい。
そんな場合の解決方法を2つご紹介します。

方法1：カスタムメニューで作成する

かんたんに実装したい場合におすすめの方法です。
WordPressの機能「カスタムメニュー」でナビゲーションを作成すると
class名が自動で付与されます。

function.php

//カスタムメニュー
register_nav_menus( array(
    'l-gnav' => 'グローバルナビ',
));

カスタムメニューでfunction.phpにカスタムメニューの指定を追記します。

php

<?php wp_nav_menu(array('theme_location'  => 'l-gnav',)); ?>

メニューを表示させたい箇所に上記のコードを追記します。
すると以下のコードが生成されます。
現在ページには自動でclass名 current-menu-itemとつきます。

生成コード

<ul id="" class="menu">
<li id="menu-item-339" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-339"><a href="">TOP</a></li>
<li id="menu-item-342" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-342"><a href="" aria-current="page">Company</a></li>
<li id="menu-item-343" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343"><a href="">Service</a></li>
</ul>

この方法は、自動付与のclass名が多いところが個人的に難点だと思います。
そんな場合は方法2のカスタマイズをおすすめします。

##方法2：phpで現在地class「_current」を付与

元のHTML

HTML

<!-- l-nav START-->
<nav class="l-nav">
<ul class="l-nav__list">
<li class="l-nav__item"><a href="">TOP</a></li>
<li class="l-nav__item _current"><a href="">Company</a></li>
<li class="l-nav__item"><a href="">Service</a></li>
</ul>
</nav>
<!-- l-nav END-->

このようなHTMLで現在地のみclass名 _current をつけたい場合の
カスタマイズです。

function.php

// ページのルートスラッグ取得
function get_root_slug() {
  global $post;
  if (!is_page()) return false;
  $post_parent = $post->post_parent;
  if ($post_parent === 0) return $post->post_name;
  do {
    $post_data = get_post($post_parent);
    $post_parent = $post_data->post_parent;
  } while ($post_parent !== 0);
  return $post_data->post_name;
}

function.php に上記の記述を追記します。

php

<!-- 現在ページのslugを判定 -->
<?php
function is_page_current($slug) {
  return is_page($slug) || get_root_slug() === $slug;
}
?>

<!-- l-nav START-->
<nav class="l-nav">
<ul class="l-nav__list">
<li class="l-nav__item <?php echo is_front_page() ? ' _current' : '' ?>"><a href="">TOP</a></li>
<li class="l-nav__item <?php echo is_page_current('company') ? ' _current' : '' ?>"><a href="">Company</a></li>
<li class="l-nav__item <?php echo is_page_current('service') ? ' _current' : '' ?>"><a href="">Service</a></li>
</ul>
</nav>
<!-- l-nav END-->

スラッグ名を基準としてclass名を付与するphpコードはこのようになります。
こちらの実装のメリットはオリジナルのclassを指定できることです。

JavaScriptを使う方法などもありますが、
WordPressの基本機能やphpを使用して、メンテナンスのしやすいサイトを制作できると良いですね。