ヘッダーとかのナビゲーションで現在表示中のページを色を変えたりするのをカレント表示と言います。スマホではあまりナビゲーションが全て表示されている事はないけど、PC表示の時はけっこう使います。その方法をまとめました。
共通するのは、現在表示中のナビゲーション部分にCSSのclassを付与して、CSSで見た目を変えるイメージ
【共通HTML】
<ul class="nav"> <li class="current"><a href="/">HOME</a></li> <li><a href="/about.html">こだわり</a></li> <li><a href="/menu.html">メニュー</a></li> <li><a href="/company.html">店舗情報</a></li> <li><a href="/contact.html">お問い合わせ</a></li> </ul>
【CSS】
.nav li.current a {
color: #f00;
}
WordPressを実装してなくて静的なファイルの場合はjQueryで実装するのがてっとり早そう。
ヘッダー・フッターが共通ファイルじゃなかったら、個別にclassをつければいいんだろうけど、共通したheader.phpとかをつかってるなら、このやり方が一番簡単。
$(function() {
$(‘.nav li a').each(function(){
var $href = $(this).attr('href');
if(location.href.match($href)) {
$(this).parent().addClass('current');
} else {
$(this).parent().removeClass('current');
}
});
});
jQueryで現在表示中のページを判別して、.currentを付与してくれます。
しかし、こちらのコードだとなぜかTOPページで「＜a href=”/index.html”＞」などのファイル名までついてたら、問題なくclassが付与されたのですが、「＜a href=”/“＞」の書き方だとどのページでもTOPページにcurrentがついてしまう…。
<ul class="nav"> <li class="current"><a href="/index.html">HOME</a></li> <li><a href="/about.html">こだわり</a></li> <li class="current"><a href="/menu.html">メニュー</a></li> <li><a href="/company.html">店舗情報</a></li> <li><a href="/contact.html">お問い合わせ</a></li> </ul>
なので、別サイトから参考で「/」対応しているjavascriptのコードを試してみた。
$(document).ready(function() {
if(location.pathname != "/") {
$('.nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
} else $('.nav li a:eq(0)').addClass('active');
});
こちらのコードなら、「/」の後ろのディレクトリで判断するので、問題なくclassが付与されました。
↓こんな感じ
<ul class="nav"> <li><a href="/" class="current">HOME</a></li> <li><a href="/about.html">こだわり</a></li> <li><a href="/menu.html">メニュー</a></li> <li><a href="/company.html">店舗情報</a></li> <li><a href="/contact.html">お問い合わせ</a></li> </ul>
WordPressの外観→メニューで表示させている場合は＜li＞部分に「current-menu-item」というclassが自動的に付与されるので、簡単です。
【HTML】
<ul class="nav"> <li class="current-menu-item"><a href="/">HOME</a></li> <li><a href="/about.html">こだわり</a></li> <li><a href="/menu.html">メニュー</a></li> <li><a href="/company.html">店舗情報</a></li> <li><a href="/contact.html">お問い合わせ</a></li> </ul>
※デフォルトだと他にも色んなclassが入りますが、省力しています。
WordPressでサイトを構築する場合は外観→メニューを使わず、直接header.phpとかにナビゲーションを書く時もあると思いますが、そういう時はif文で条件分岐をします。
<li<?php if(is_home()){ echo ' class="current"'; } ?>><a href="<?php echo home_url(); ?>">HOME</a></li>
<li<?php if(is_page('about')){ echo ' class="current"'; } ?>><a href="<?php echo home_url(); ?>/about/">こだわり</a></li>
<li<?php if(is_page('menu')){ echo ' class="current"'; } ?>><a href="<?php echo home_url(); ?>/menu/">メニュー</a></li>
<li<?php if(is_page('company')){ echo ' class="current"'; } ?>><a href="<?php echo home_url(); ?>/company/">店舗情報</a></li>
<li<?php if(is_page('contact')){ echo ' class="current"'; } ?>><a href="<?php echo home_url(); ?>/contact/">お問い合わせ</a></li>
(is_page(‘ ‘)の部分にスラッグ名で条件分岐させています。
もし、新着情報っていうナビゲーションボタンがあって、
・全カテゴリの新着ページ（ドメイン.com/news）
・各カテゴリのページ
・詳細ページ
と複数ページの場合と色んなページでもカレント表示させたい場合は、こんな書き方でもありかと。
<li<?php if ( is_category(array('category01','category02','category03')) || is_page('news') || is_single() ) { echo ' class="current"'; } ?>>
<a href="<?php echo home_url(); ?>/news/">新着情報</a>
</li>
あと、「works」ってカスタム投稿がナビゲーションにある場合は、アーカイブページ（一覧ページ）と詳細ページでclassを付与したいから
<li<?php ?php if( is_post_archive('works')|| is_singular('works') ) { echo ' class="current"'; } ?>>
って書き方をすれば、OK。