メニューのロールオーバーイメージで、現在観覧しているページはロールオーバー後の画像のままにしたい。

1月 25th, 2012 by berry | Filed under wordpress.

さっと口で説明するのが難しいですが、例えば会社概要のページにいるときは、メニューの会社概要の部分はロールオーバー後の画像のままというやつです。利点はユーザーがどのページを観覧しているのか一目でわかりやすいという事です。「ダイナミックハイライト」と言われているものですね。

ゴリ押しでページごとに違うメニューを準備するという手もありますが、できれば「header.php」1つで全てやりたいわけです。

例えばメニューの<li>タグの中に条件分岐で

トップページを表示してる時はid=”top_here”
そうでないときはid=”top”を表示

とできればあとはcssをいじるだけでいけそうですね。

条件分岐タグはコチラを参考

こういうメニューがあったとして

<li id=”top”><a href=”#”>トップページ</a></li>
<li id=”company”><a href=”#”>会社案内</a></li>
<li id=”inqury”><a href=”#”>お問合せ</a></li>

こんな感じにしてみます。

<li <?php if (is_front_page()){ echo ‘id=”top_here”‘;} else { echo ‘id=”top”‘;} ?> ><a href=”#”>トップページ</a></li>
<li <?php if (is_page(‘ページID’)){ echo ‘id=”company_here”‘;} else { echo ‘id=”company”‘;} ?> ><a href=”#”>会社案内</a></li>
<li <?php if (is_page(array(‘ページID’,'ページID’,'ページID’))){ echo ‘id=”inqury_here”‘;} else { echo ‘id=”inqury”‘;} ?> ><a href=”#”>お問合せ</a></li>

1行目:固定ページをトップページにしているので「is_front_page() 」を使いました。これでトップページにいるときは「id=”top_here”」を表示し、そうでないページのときは「id=”top”」が表示されるようにまります。
2行目: 「is_page(‘ページID’)」で固定ページIDが”??”の時だけということになります。
3行目: 「is_page(array(‘ページID’,'ページID’,'ページID’)」で複数の固定ページを指定できます。固定ページに下層ページがある場合などに使えます。

これでうまくIDが分岐表示されたら、あとはCSSに要素を追加するだけです。


2 Responses to “メニューのロールオーバーイメージで、現在観覧しているページはロールオーバー後の画像のままにしたい。”

  1. ふぶき より:

    助かりました!ありがとうございます!

Leave a Reply