WordPressのメニューバーをcssロールオーバー+条件分岐で3パターン切り替え
2011.02.01
メニューバーの画像を全部つなげた1枚だけ作成し、ロールオーバーはcssのbackground-potisionで行う技。
↓こういう画像を用意して、動作指定はサクっとcssでやっちゃうやつです。
便利ですよね。メリットとしては
- 画像が1枚で済む
- マウスオーバーでの読み込み時に一瞬白くなるチラツキがなくなる
- jsを使わなくて済む
- htmlコードがシンプルになる
いや~良いことずくめだ。
上の画像は「通常」と「マウスオーバー」の2種類だけですが、当然のごとくわき出る要望として
「今いるページの部分だけはリンクをはずして色を変えたい」
↓こういうことですよね。
でもでも!これをWordPressで実装しようと思うと、ある問題に引っかかります。
WordPressではテーマファイル内のheader.phpにメニューバーの記述をしている場合がほとんどなので
すべてのページに同じメニューバーが表示されちゃいます。
そこで使うのが条件分岐
はい、サクッとコード書きます。
<?php if(is_home()) { ?> <p class="rollover home">HOME</p> <?php } else{ ?> <a class="rollover home" href="/">HOME</a> <?php } ?> <?php if(is_page(about)) { ?> <p class="rollover about">ABOUT</p> <?php } else{ ?> <a class="rollover about" href="/about">ABOUT</a> <?php } ?> <?php if(is_page(contact)) { ?> <p class="rollover contact">CONTACT</p> <?php } else{ ?> <a class="rollover contact" href="/contact">CONTACT</a> <?php } ?> <?php if(is_single() || is_category() || is_archive()) { ?> <p class="rollover blog">BLOG</p> <?php } else{ ?> <a class="rollover blog" href="/blog">BLOG</a> <?php } ?>
では解説を。
リンクはaタグ、今いるページのボタンはpタグを使用。
ボタンの数だけ条件分岐を記述します。分岐内容は
「今はABOUTページですか?」
Yes→pタグ
No →aタグ
ってな感じですね。
これでページ毎にhtmlコードが変化します。
最後のブログページは、シングルページ・カテゴリページ・アーカイブページ・サーチページの4つを指定しました。
条件分岐についてはWordPress Codexをご覧あれ。
次にcssです。
.rollover { height: 20px; width: 200px; background: url(images/rollover.gif); display: block; text-indent: -4000px; float: left; padding: 0; margin: 0; } a.home {background-position:0 0;} a.about {background-position:-200px 0;} a.contact {background-position:-400px 0;} a.blog {background-position:-600px 0;} a.home:hover {background-position:0 -20px;} a.about:hover {background-position:-200px -20px;} a.contact:hover {background-position:-400px -20px;} a.blog:hover {background-position:-600px -20px;} p.home {background-position:0 -40px;} p.about {background-position:-200px -40px;} p.contact {background-position:-400px -40px;} p.blog {background-position:-600px -40px;}
a.home、p.homeという形で同じclass名を使用していますので、
それぞれのボタンのwidthが違うときなどは
.home { width: 240px;} .about {width: 180px;}
てな感じで一括指定できます。
ページナビゲーションはユーザビリティに大きく影響する部分ですので、
なるべく分かりやすく表示させたいでものです。