明日は少し暖かいらしいですね。
外歩いていても、梅に混じって桜も咲いてますよね。

さて今日も『よく使う』シリーズ。というか、これはもうだいたい設定しちゃうパターンのやつです。

ナビゲーションをクリックして、ページ遷移した時に『今このページだよ!』と教えてあげるのは、非常に親切な設計ですよね。
HTMLに直接書いたり、Javascriptを用いたりするとできそうですが、WordPressであれば条件分岐を使ってやっちゃいましょう。

目次

  1. 基本のナビゲーション
  2. 今このページだよ!を表すcurrent
  3. WordPressでやる場合
  4. まとめ

基本のナビゲーション

まずは基本のナビゲーションです。

<ul>
  <li><a href="./">HOME</a></li>
  <li><a href="./company/">会社概要</a></li>
  <li><a href="./staff/">スタッフ紹介</a></li>
  <li><a href="./inquiry/">お問い合わせ</a></li>
</ul>

cssはグラデーション入れてるんでちょっと長いですが

ul {
  margin: 0;
  padding: 0;
  width: 400px;
  list-style-type: none;
  overflow: hidden;
}
li {
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  width: 25%;
  float: left;
  background: rgba(157,202,245,1);
  background: -moz-linear-gradient(top, rgba(157,202,245,1) 0%, rgba(32,124,229,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(157,202,245,1)), color-stop(100%, rgba(32,124,229,1)));
  background: -webkit-linear-gradient(top, rgba(157,202,245,1) 0%, rgba(32,124,229,1) 100%);
  background: -o-linear-gradient(top, rgba(157,202,245,1) 0%, rgba(32,124,229,1) 100%);
  background: -ms-linear-gradient(top, rgba(157,202,245,1) 0%, rgba(32,124,229,1) 100%);
  background: linear-gradient(to bottom, rgba(157,202,245,1) 0%, rgba(32,124,229,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dcaf5', endColorstr='#207ce5', GradientType=0 );
}
li.current {
  background: #c98218; 
}
li a {
  color: #fff;
}

ただの横並びのシンプルなナビゲーションですね。
基本ナビゲーション - WordPressで今このページだよ!とナビゲーションを変更する方法

自分で作っておいてなんですが、こんだけのメニューって、一体何のサイトなんでしょうね。

今このページだよ!を表すcurrent

もうすでに上のcssには入っていますが、今いるページを示すために、class=”current”をつけることにします。
例えば、会社概要ページにいる場合、

<ul>
  <li><a href="./">HOME</a></li>
  <li class="current"><a href="./company/">会社概要</a></li>
  <li><a href="./staff/">スタッフ紹介</a></li>
  <li><a href="./inquiry/">お問い合わせ</a></li>
</ul>

という状態になります。

HTMLで作っている場合は、とりあえず1ページずつ設定してくのが簡単で早そうな気がします。

WordPressでやる場合

WordPressでcurrentを入れる場合、header.phpなどで共通パーツ化していることがほとんどですので、個別に書き出すことができません。
じゃあ、こういう時は条件分岐を使ってあげましょう。

<ul>
  <li<?php if(is_home() || is_front_page()):?> class="current"<?php endif;?>><a href="./">HOME</a></li>
  <li<?php if(is_page('company')):?> class="current"<?php endif;?>>&amp;amp;lt;a href="./company/">会社概要</a></li>
  <li<?php if(is_page('staff')):?> class="current"<?php endif;?>><a href="./staff/">スタッフ紹介</a></li>
  <li<?php if(is_page('inquiry')):?> class="current"<?php endif;?>><a href="./inquiry/">お問い合わせ</a></li>
</ul>

さっきのHTMLと違って、liのすぐ後ろにphpが書かれています。

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

これは、『もしトップページだったら、class=”current”を表示しなさい』という意味になります。

以下、同様に

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

『ページのスラッグが「company」だったら、class=”current”を表示しなさい』という意味になります。
current追加 - WordPressで今このページだよ!とナビゲーションを変更する方法

まとめ

ナビゲーション部分が、ちょっと長くなってしまいますが、この条件分岐の仕方を覚えておくと、いろいろと応用が効くので便利ですよ。

あとこの方法はカテゴリーにも使えるので、だいたいのナビゲーションに使えるんじゃないかと思います。
というか、僕はほとんどこの書き方。

その他にも条件分岐を使っていくといろいろなことができますが、あんまりやり過ぎると条件分岐するよりも、テンプレートわけたりするほうが楽だったりするので、そのあたりの加減も大事ですよね。
そいぎ~。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA