【WordPress／jQuery】グローバルナビゲーションで現在のページにクラス名をつける方法【カレント表示】

2020.01.21 コーディング

ユーザーが現在どのページを見ているか分かりやすくするため、グローバルナビゲーションの項目にアンダーラインをつけたりすることがあります（カレント表示）。

その際に「current」などのクラス名を付与することになるわけですが、今回はその方法についてのメモ。

カレント表示の方法はよく紹介されていますが、ページが階層構造になっている場合にうまくできないというケースが多いみたいです。

ですのでここでは、子ページを開いているときにもグロナビの親ページの項目にカレント表示される方法を考えていきます。

jQueryによる方法と、WordPress限定になりますがWPの条件分岐タグによる方法の二通りをご紹介します。

グローバルナビゲーションで現在のページに特定のクラス名をつける方法

下記のHTMLとCSSを前提として作っていきます。

<nav id="g_nav">
	<ul>
		<li class="current"><a href="">ホーム</a></li>
		<li><a href="./service/">事業紹介</a>
			<ul>
				<li><a href="./service/products/">製品一覧</a></li>
				<li><a href="./service/equipments/">設備紹介</a></li>
			</ul>
		</li>
		<li><a href="./blog/">ブログ</a></li>
		<li><a href="./contact/">お問い合わせ</a></li>
	</ul>
<!-- #g_nav -->
</nav>

#g_nav {
	height: 100px;
	line-height: 100px;
}

#g_nav > ul {
	display: flex;
}

#g_nav > ul > li {
	margin-right: 2em;
	position: relative;
}

#g_nav > ul > li:last-of-type {
	margin-right: 0;
}

#g_nav > ul > li > a {
	display: block;
	height: 100%;
	position: relative;
	color: #222;
	text-decoration: none;
	transition: .3s ease;
}

#g_nav > ul > li.current > a::after {
	display: block;
	content: '';
	width: 100%;
	height: 4px;
	background: #08a5e3;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: .3s ease;
}

#g_nav > ul > li.current > a::after,
#g_nav > ul > li:hover > a::after {
	opacity: 1;
	transition: .3s ease;
}

このHTMLでは「ホーム」に「current」というクラスが付いていますが、これがどのページを開いているかによって、付与される場所が変わるようにします。

子ページを開いているときには、その親となるページの項目（＝最上階層のli要素）につくようになります。

CSSの方では「#g_nav > ul > li」、つまり最上階層のli要素にのみカレント表示用のスタイルが適用されるように指定しておきます。

jQueryでグローバルナビゲーションにカレント表示する方法（階層構造にも対応）

$(function(){
	$("#g_nav a").each(function(){
		if(this.href == location.href) {
			$(this).parents("li").addClass("current");
		}
	});
});

ポイントは、li要素を「parent」ではなく「parents」で取得していることです（sがついてます）。

parentメソッドでは直上の要素（すぐ上の階層の要素）のみを対象とするのに対し、parentsメソッドは上の階層にあるすべての要素を対象とします。

そのため今回のソースでは、「this(a要素)」の直上のliだけでなく、その上にあるli要素も取得します。

そうなると取得したすべてのliに「current」が付与されるわけですが、CSSでは最上階層のliにのみカレント表示用のスタイルを指定しているため問題ありません。

もちろん目的のli要素にのみ「current」を付与するようにした方がスマートかもしれませんが、わざわざそう書くメリットはあまりないかと思います。

また上記のようにしておけば、子ページ、孫ページ、ひ孫ページ、……　と階層が深くなったとしても、このままで対応可能です。

WordPressの条件分岐タグでグローバルナビゲーションにカレント表示する方法

続いてWordPressの条件分岐を使ってカレント表示させる方法をご紹介します。

WPテーマ内ののテンプレートファイルにあるグローバルナビゲーション部分のソースを以下のように改変します。

<nav id="g_nav">
	<ul>
		<li<?php if( is_front_page() ): //フロントページの場合 ?> class="current"<?php else: endif; ?>><a href="#">ホーム</a></li>
		<li<?php if( is_page('service') || is_page('products') || is_page('equipments') ): //ページスラッグが「service」または「products」または「equipments」の場合 ?> class="current"<?php else: endif; ?>><a href="#">事業紹介</a>
			<ul>
				<li><a href="#">製品一覧</a></li>
				<li><a href="#">設備紹介</a></li>
			</ul>
		</li>
		<li<?php if( is_home() || is_single()):  //投稿アーカイブページまたはシングルページの場合 ?> class="current"<?php else: endif; ?>><a href="#">ブログ</a></li>
		<li <?php if( is_page('contact') ): //ページスラッグが「contact」の場合 ?>class="current"<?php else: endif; ?>><a href="#">お問い合わせ</a></li>
	</ul>
<!-- #g_nav -->
</nav>

ソースが長く＆ややこしくなるためリンクURLは省略しています。

WordPress条件分岐タグの場合は「current」クラスが入る箇所すべてに書き込んでいくため面倒ですが、その分、細かい調整ができます。
　
なおグロナビにカスタム投稿タイプが含まれる場合は、以下のように書きます。

<li<?php if( is_post_type_archive('recruit') || is_singular('recruit')): //スラッグが「recruit」のカスタム投稿タイプのアーカイブページとシングルページ ?> class="current"<?php else: endif; ?>><a href="#">採用情報</a></li>