WEB系キャンパス

ナビゲーションをカレント表示する方法まとめ【jQueryとかWordPress】

ヘッダーとかのナビゲーションで現在表示中のページを色を変えたりするのをカレント表示と言います。スマホではあまりナビゲーションが全て表示されている事はないけど、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;
}

【1】jQueryでclassを付与する方法

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>

【2】Wordpressの外観→メニューでカレント表示する方法

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が入りますが、省力しています。

【3】WordPressの条件分岐で表示する方法

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>

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です