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

ウェブサイトの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でcurrentのa要素のスタイルを変えるだけですね。

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

パンくずリストとは？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内の記述でカレント表示をしまして、かなりややこしいコードになったので残しておこうと思ったんですが、色々手を使ったので、残すには大変で、ひとまず簡単なところまでとなりました・・。

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