【プラグイン無し】【オリジナル(自作)テーマ制作】WordPressで開いているメニューの色を変える方法

wordpressプログラミング備忘録
yumeyumeさんによる写真ACからの写真
スポンサーリンク

WordPressで開いているメニューの色を変える方法を知っていますか?

どうも、ちゃんカマです。

WordPressのオリジナルの自作テーマの制作で、開いているページのメニューに色をつけたり、下線を引いたりしてみたくなりました。
配布されているテーマならデフォルトでついている機能かと思うのですが、オリジナルテーマではそうはいかないですよね。

そこで、今回は自分がやってみた方法を説明していきます。

改善前のナビゲーションメニュー
改善前のナビゲーションメニュー
<!-- 改善前のナビゲーションメニューのコード -->

<ul>
  <li><a href="<?php echo esc_url(home_url('/')); ?>">HOME</a></li>
  <li><a href="<?php echo esc_url(home_url('/profile/')); ?>">施設概要</a></li>
  <li><a href="<?php echo esc_url(home_url('/service/')); ?>">サービス内容</a></li>
  <li><a href="<?php echo esc_url(home_url('/blog/')); ?>">ブログ</a></li>
  <li><a href="<?php echo esc_url(home_url('/employment/')); ?>">採用情報</a></li>
  <li><a href="<?php echo esc_url(home_url('/contact/')); ?>">お問い合わせ</a></li>
</ul>

上の画像は現在のナビゲーションメニューの状態と、そのコードになります。
今は【施設概要】のページを開いているのですが、メニューに色がついたり、下線が引かれるわけでもないので、どこのページを開いているのか分かりにくいですよね。

HTMLとCSSでやってみる

  <!-- currentクラス付与前のコード -->

  <li><a href="<?php echo esc_url(home_url('/profile/')); ?>">施設概要</a></li>

まず、HTMLの【施設概要】の<li>タグにcurrentというクラス名を与えます。

  <!-- currentクラス付与後のコード -->

  <li class="current"><a href="<?php echo esc_url(home_url('/profile/')); ?>">施設概要</a></li>

次に、currentクラスにCSSを追加。今回は、メニューの文字に白い下線が引かれるようにします。

/* currentクラスに追加するCSS */

.current {
  border-bottom: 5px solid #fff;
}

これで【施設概要】のページに下線が引かれました。

施設概要に下線が引かれている
施設概要に下線が引かれている

しかし、これだと問題があります。
試しに、【サービス内容】のページを開いてみます。

サービス内容のページを開いても、下線は施設概要に引かれたまま
サービス内容のページを開いても、下線は施設概要に引かれたまま

このように【サービス内容】のページを開いても、下線は【施設概要】に引かれたままになるんですね。
これは、先程currentクラスを与えたのは【施設概要】の<li>タグでなので、【サービス内容】に下線を引きたい場合は、またHTMLを書き換える必要があります。
ページが開かれるたびに、HTMLを書き換える必要があるわけですね。

<!-- このように、今度はサービス内容の<li>にcurrentクラスを付与する必要がある -->

<li class="current"><a href="<?php echo esc_url(home_url('/service/')); ?>">サービス内容</a></li>

当然ですが、これは人の手で出来ることではありません。ですので、開いたページの<li>タグに、自動でcurrentクラスを付与するプログラムが必要になります。

テンプレートタグと条件分岐を使う

そのプログラムを実現するためには、WordPressのテンプレートタグとPHPによる条件分岐を使います。
先程の、<li class=”current”> の箇所を以下のように書き換えます。

<!-- テンプレートタグとPHPを追加 -->

<ul>
  <li class="<?php if ( is_front_page() ) { echo 'current'; } ?>"><a href="<?php echo esc_url(home_url('/')); ?>">HOME</a></li>
  <li class="<?php if ( is_page('profile') ) { echo 'current'; } ?>"><a href="<?php echo esc_url(home_url('/profile/')); ?>">施設概要</a></li>
  <li class="<?php if ( is_page('service') ) { echo 'current'; } ?>"><a href="<?php echo esc_url(home_url('/service/')); ?>">サービス内容</a></li>
  <li class="
    <?php 
      if ( is_home() ) { 
        echo 'current'; 
      } elseif ( is_archive() ) {
        echo 'current';
      } elseif ( is_single() ) {
        echo 'current';
      }
    ?>
  "><a href="<?php echo esc_url(home_url('/blog/')); ?>">ブログ</a></li>
  <li class="<?php if ( is_page('employment') ) { echo 'current'; } ?>"><a href="<?php echo esc_url(home_url('/employment/')); ?>">採用情報</a></li>
  <li class="<?php if ( is_page('contact') ) { echo 'current'; } ?>"><a href="<?php echo esc_url(home_url('/contact/')); ?>">お問い合わせ</a></li>
</ul>

if(is_page(‘ページのスラッグ’))で「そのスラッグのページなら」という意味になります。そして、{echo ‘current’;}でcurrentという文字を出力します。
その結果、例えばスラッグがprofile(施設概要)のページを開いている時は、施設概要のメニューのHTMLが<li class=”current”>に自動で書き換えられます。

注意点として、’ / ’(HOME)のページにはis_pageは使用しません。スラッグが ’ / ’ のページはWebサイトのフロントページ(最初に開くことになるページ)になります。フロントページにはis_front_pageを使用します。これで「フロントページなら」という意味になります。

また、blog(ブログ)のページには条件を3つ書いています。ブログのページは投稿ページになります。投稿ページにはis_pageでは無く、is_homeを使用します。これで、「投稿ページなら」という意味になります。
さらに、ブログのカテゴリーごとのアーカイブページに対してはis_archiveを、ブログの投稿ごとの個別ページにはis_singleを使用します。これでブログのページだけで無く、アーカイブページや個別ページを開いている時でも、<li class=”current”>のHTMLが出力されるようになります。

どのページを開いても・・・
どのページを開いても・・・
メニューに下線が引かれている
メニューに下線が引かれている

ちなみに、デベロッパーツールを見てみると、きちんとcurrentクラスが付与されていることが確認出来ます。

サービス内容のページを開いた時
サービス内容のページを開いた時
これはブログのページを開いた時
これはブログのページを開いた時

まとめ

WordPressのテンプレートタグとPHPの条件分岐を使うことで、実現出来ることがわかりました。今回は下線を引く形にしましたが、CSSを書き換えれば、もっといろいろな装飾が出来ますね。

今回はWordPressでオリジナルの自作テーマを制作する際、開いているページのメニューに下線を引く方法を説明しました。もっと良い方法があるかもしれませんが、参考になれば幸いです。

以上、ちゃんカマでした。

コメント

タイトルとURLをコピーしました