明日は少し暖かいらしいですね。
外歩いていても、梅に混じって桜も咲いてますよね。
さて今日も『よく使う』シリーズ。というか、これはもうだいたい設定しちゃうパターンのやつです。
ナビゲーションをクリックして、ページ遷移した時に『今このページだよ！』と教えてあげるのは、非常に親切な設計ですよね。
HTMLに直接書いたり、Javascriptを用いたりするとできそうですが、WordPressであれば条件分岐を使ってやっちゃいましょう。
目次
基本のナビゲーション
まずは基本のナビゲーションです。
<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;
}
ただの横並びのシンプルなナビゲーションですね。
自分で作っておいてなんですが、こんだけのメニューって、一体何のサイトなんでしょうね。
今このページだよ！を表す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;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”を表示しなさい』という意味になります。
まとめ
ナビゲーション部分が、ちょっと長くなってしまいますが、この条件分岐の仕方を覚えておくと、いろいろと応用が効くので便利ですよ。
あとこの方法はカテゴリーにも使えるので、だいたいのナビゲーションに使えるんじゃないかと思います。
というか、僕はほとんどこの書き方。
その他にも条件分岐を使っていくといろいろなことができますが、あんまりやり過ぎると条件分岐するよりも、テンプレートわけたりするほうが楽だったりするので、そのあたりの加減も大事ですよね。
そいぎ～。
