スタッフブログ

BLOG


WordPressでナビゲーションメニューに現在地のカレント current class をつける方法

公開日

グローバルメニューなどのナビゲーションに現在表示しているページの目印をつけたい時、カレント（class=”current”）をつけCSSで装飾する方法をご紹介します。

WordPressを利用している場合はWordPressの基本機能やphpを利用するとスムーズかと思います。現在のスラッグとを比較して同じ場合に「class=”current”」を付与する仕組みになります。

このページの目次
  1. トップページで「current」をつける場合
  2. 固定ページで「current」をつける場合
  3. HTMLの実装例
  4. CSSの記述例
  5. まとめ

トップページで「current」をつける場合

トップページの場合は「is_front_page」と「is_home」を使用します。
例えばトップページは次のコードを追加します。

<?php if( is_front_page() && is_home() ) echo ' class="current"'; ?>

固定ページで「current」をつける場合

固定ページcurrent をつける場合は「is_page」 を使います。
例えば固定ページのスラッグが「sample」 の時は下記コードを追加します。

<?php if( is_page('sample') ) echo ' class="current"'; ?>

HTMLの実装例

<ul>
<li><a href="<?php echo home_url('/', 'https'); ?>"<?php if( is_front_page() && is_home() ) echo ' class="current"'; ?>>ホーム</a></li>
<li><a href="<?php echo home_url('/greeting/', 'https'); ?>"<?php if( is_page('greeting') ) echo ' class="current"'; ?>>ご挨拶</a></li>
<li><a href="<?php echo home_url('/about/', 'https'); ?>"<?php if( is_page('about') ) echo ' class="current"'; ?>>会社案内</a></li>
<li><a href="<?php echo home_url('/faq/', 'https'); ?>"<?php if( is_page('faq') ) echo ' class="current"'; ?>>よくある質問</a></li>
</ul>

CSSの記述例

li a.current{
color:#F00;
}

上記は現在表示しているページのメニューの文字色を赤にする記述例です。

まとめ

WordPressでグローバルナビゲーションにカレント（class=”current”）をつける方法をご紹介しました。
WordPressを利用している場合はWordPressの基本機能やphpを利用するとスムーズです。


関連記事