WordPress

【WordPress】ナビゲーションメニューをカレント表示する方法

※ 当サイトではアフィリエイト広告を利用しています

ヘッダーのナビゲーションメニューだけど、開いているページのメニューだけ色を変えたり出来る?

例えば以下のようなメニューがあったとします。

カレント表示でのナビゲーションメニューの例

カレント表示でのナビゲーションメニューの例

これを見ると『ABOUTページを開いているんだな』と分かりますよね?

このように現在のページを示す表示方法を『カレント表示』と呼びます。

カレントを直訳すると『現在』となります。

今回はこのカレント表示をWordPressで実装する方法を解説していきます。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

ナビゲーションメニューをカレント表示する方法

まずは今回の基本となるHTMLを見てみます。

<nav>
  <ul>
    <li>
      <a href="https://○○/" class="">TOP</a>
    </li>
    <li>
      <a href="https://○○/about/" class="">ABOUT</a>
    </li>
    <li>
      <a href="https://○○/works/" class="">WORKS</a>
    </li>
  </ul>
</nav>

ちょっと省略していますが、冒頭のメニューを元にしています。

そしてこれをWordPress化するとこのようになります。

<nav>
  <ul>
    <li>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="">TOP</a>
    </li>
    <li>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>about" class="">ABOUT</a>
    </li>
    <li>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>works" class="">WORKS</a>
    </li>
    </li>
  </ul>
</nav>

そしてこれをカレント表示させる為には、条件分岐を使います。

例えばABOUTページを開いている場合、手順は以下のようになります。

  1. メニューの『ABOUT』に対して『.current』というclassを付与
  2. 『.current』に対してスタイルをあてる

簡単に書けばこれだけです。

つまり現在開いているページのメニュー名に.currentというclassを付与し、専用のスタイル(色を変えるなど)をあてるだけです(上記のまんまですが)

具体的には以下のように書きます。

<nav>
  <ul>
    <li>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>" <?php if( is_front_page() ): ?>class="current"
        <?php endif; ?>>TOP</a>
    </li>
    <li>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>about" <?php if( is_page("about") ): ?>class="current"
        <?php endif; ?>>ABOUT</a>
    </li>
    <li>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>works" <?php if( is_page("works") ): ?>class="current"
        <?php endif; ?>>WORKS</a>
    </li>
  </ul>
</nav>

あとはCSSでスタイルをあてるだけです。

/* メニュー名を赤くする */
.current {
  color: red;
}

これで現在開いているページのメニュー名は赤く表示されるようになりました。

そして先ほどと異なるのはclassの出力方法になります。

classだけ見てみるとこのようになります。

<!-- カレント表示なし -->
<a class="">TOP</a>
<a class="">ABOUT</a>
<a class="">WORKS</a>

<!-- カレント表示あり -->
<a <?php if( is_front_page() ): ?>class="current" <?php endif; ?>>TOP</a>
<a <?php if( is_page("about") ): ?>class="current" <?php endif; ?>>ABOUT</a>
<a <?php if( is_page("works") ): ?>class="current" <?php endif; ?>>WORKS</a>

何やら難しそうに見えますが、やっている事は至ってシンプルです。

ここでは『トップページ』と『固定ページ』の条件分岐を使っています。

条件分岐については以下の記事で詳しく解説していますが、今回使う内容に関してこれから解説します。

あわせて読みたい
【コピペOK!】よく使うWordPress条件分岐タグまとめ
【コピペOK!】よく使うWordPress条件分岐タグまとめ

続きを見る

 

トップページに.currentを付与する方法

トップページの条件分岐はこちらになります。

<?php if ( is_front_page() ) : ?>
  トップページのみの処理
<?php else: ?>
  トップページ以外の処理
<?php endif; ?>

ただしトップページ以外の処理がない場合は省略可能なので、以下のように出来ます。

<?php if ( is_front_page() ) : ?>
  トップページのみの処理
<?php endif; ?>

そして今回は『トップページが表示されている時のみ.currentを付与する』なので、このようになります。

<?php if( is_front_page() ): ?>
class="current"
<?php endif; ?>

ポイント

他のサイトでは<?php if ( is_home() || is_front_page() ) : ?>という書き方で紹介されている事も多いですが、当ブログのWordPressオリジナルテーマ解説では、
・トップページ → front-page.php
・記事一覧 → home.php
としていて、上記の場合だと『トップページまたは記事一覧ページ』となる為『is_front_page()』 だけにしています。

※ ご自身のトップページの作り方に合わせて変更して下さい。

 

指定した固定ページに.currentを付与する方法

指定した固定ページの条件分岐はこちらになります。

<?php if ( is_page( "『ページID』または『固定ページのスラッグ』" ) ) : ?>
  固定ページのみの処理
<?php else: ?>
  固定ページ以外の処理
<?php endif; ?>

ただし指定した固定ページ以外の処理がない場合は省略可能なので、以下のように出来ます。

<?php if ( is_page( "『ページID』または『固定ページのスラッグ』" ) ) : ?>
  固定ページのみの処理
<?php endif; ?>

ページIDは固定ページ名にカーソルを載せると左下に表示されます。

固定ページIDの確認

固定ページIDの確認

固定ページのスラッグはこちらのパーマリンクで確認できます。

固定ページのスラッグ確認方法

固定ページのスラッグ確認方法

そして今回は『ABOUTページが表示されている時のみ.currentを付与する』なので、このようになります。

<?php if ( is_page( "about" ) ) : ?>
class="current"
<?php endif; ?>

以上になります。

他にも『アーカイブページ』『カスタム投稿一覧ページ』など、色々と指定することが出来るので、繰り返しになりますが以下の条件分岐の記事を見て実装してみて下さい。

あわせて読みたい
【コピペOK!】よく使うWordPress条件分岐タグまとめ
【コピペOK!】よく使うWordPress条件分岐タグまとめ

続きを見る

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-WordPress