JavaScript

グローバルナビゲーションで現在地を表示する(カレント表示)

ウェブサイトのPC画面で表示するヘッダーのメニューのことを、どの画面でも表示されるという意味合いからグローバルメニューと呼びます。現在のページがグローバルメニューのどこに位置しているかを示す方法についてご紹介します。

グローバルメニューに現在地を表示するメリット

大規模なサイトになると、グローバルメニューの階層も深くなり、ユーザーが現在地を見失いがちです。そもそも検索で引っかかって見つけたページに直接訪問した人は、そのページに関連したページを探そうとしたときに、パンくずリストだけだと情報が不足することもあると思います。

そのようなケースで、グローバルメニューに現在地表示をすると利便性が上がると考えます。

WordPressでカレント表示をする方法

WordPressの関数を用いると、次のようにしてカレント表示が可能です。

<header>
   <ul>
      <li><a <?php $dir = 'concept'; if(is_page($dir)){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>">コンセプト</a></li>
      <li><a <?php $dir = 'features'; if(is_page($dir)){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>">特徴</a></li>
      <li><a <?php $dir = 'services'; if(is_page($dir)){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>">サービス</a></li>
      <li><a <?php $dir = 'works'; if(is_page($dir)){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>"></a></li>
      <li><a <?php $dir = 'blog'; if(is_page($dir)){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>">ブログ</a></li>
   </ul>
</header>

ページ判別関数is_page()と、リンク先の2箇所に同じ文字列を用いるので、変数を用いて分かりやすくしています。

現在表示されているページにはcurrentというクラス名がa要素につくので、あとはCSSでcurrenta要素のスタイルを変えるだけですね。

このやり方を応用すれば、グローバルメニューには親階層のページしか表示されてなかったとしても、その親階層にカレント表示させることができます。どうやって親階層を判別するかは、パンくずリストの作り方を説明している次の記事を参照ください。

パンくずリストとは?SEO効果と設置方法

PHPでカレント表示をする方法

WordPressでなくても、PHPの場合次のようにURLの中に特定のディレクトリがあるかを判別するやり方で似たようにカレント表示が可能になります。

strstr( $url, '/$dir/' )

で、変数$urlの中に/$dir/という文字列があるか、という判別を行っています。

<?php
$url = $_SERVER&#91;'REQUEST_URI'&#93;; ?>
<header>
   <ul>
      <li><a <?php $dir = 'concept'; if( strpos( $url, '/$dir/' ) !== false ){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>">コンセプト</a></li>
      <li><a <?php $dir = 'features'; if( strpos( $url, '/$dir/' ) !== false ){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>">特徴</a></li>
      <li><a <?php $dir = 'services'; if( strpos( $url, '/$dir/' ) !== false ){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>">サービス</a></li>
      <li><a <?php $dir = 'works'; if( strpos( $url, '/$dir/' ) !== false ){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>"></a></li>
      <li><a <?php $dir = 'blog'; if( strpos( $url, '/$dir/' ) !== false ){ echo'class="current"'; } ?> href="/<?php echo $dir; ?>">ブログ</a></li>
   </ul>
</header>

JavaScriptでカレント表示をする方法

JavaScriptでは、URLを拾う関数があるので、それを使って次のようにできます。

HTML

<header>
   <ul class="gNav">
      <li><a class="concept" href="/concept/">コンセプト</a></li>
      <li><a class="features" href="/features/">"&gt;特徴</a></li>
      <li><a class="services" href="/services/">サービス</a></li>
      <li><a class="works" href="/works/>">実績</a></li>
      <li><a class="blog" href="/blog/">ブログ</a></li>
   </ul>
</header>

JavaScript

<script>
const url = location.href;
const dir = url.split("/").filter( e => Boolean(e)); // URLを/で分割して配列に格納
const lastDir = dir.pop();  // 分割したURLの最後の部分を取り出し

const gNavs = document.querySelectorAll('.gNav a');
gNavs.forEach( gNav =>{
   let currentName = gNav.className;
   if (lastDir ===  currentName){
      gNav.classList.add('current');
   }  
});
</script>

クラス名をHTMLにあらかじめ付与する必要があるので、WordPressであれば、先ほどご紹介した方法の方が良いとは思います。

まとめ

すごく複雑な構造のサイトを作った時にWordPressのheader.php内の記述でカレント表示をしまして、かなりややこしいコードになったので残しておこうと思ったんですが、色々手を使ったので、残すには大変で、ひとまず簡単なところまでとなりました・・。

気が向いたら色々パターンを追記していきます。

著者のイメージ画像

株式会社BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月に独立後、2024年4月に株式会社BringFlowerを設立。SEOコンサルを活動の軸に据えつつ、AIライティングツールの開発と運営を自ら行う。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。