motoyamayuki.com

Blog

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;}
 

てな感じで一括指定できます。

ページナビゲーションはユーザビリティに大きく影響する部分ですので、
なるべく分かりやすく表示させたいでものです。

  • このブログをはてなブックマークに追加

Contact

お仕事のご依頼、面白いことのお誘い、一度お話してみたい!などなど、鬼頭祐毅へのお問い合わせは、下記のフォームよりお願いします。送信後、 info@motoyamayuki.com より確認のメールが届きます。

お問い合わせフォーム

    お名前

    メールアドレス

    内容

    Treble