WordPressでナビゲーションメニューをページごとにカレント表示する

ナビゲーションメニューのカレント表示、静的ページだとページごとに記述を変えるのは大変ですが、PHPでやってみたら簡単でした！

こんな感じにしたい

今いるページのナビはオレンジっぽく、下向きに▽を出して。他のページのナビは青で、下線つき。マウスオーバーで下線の色が変わる感じで。今回、閲覧対象が古いPCが多くIE6にも対応させなきゃならなかったので画像はjpgで、透過とか考えずにシンプルに作りました。

通常、hover、current画像の用意

PhotoShopで上記のような画像を作ります。（灰色の枠は見やすくするためのガイドです。）文字と▽に1pxのドロップシャドウをうすーくかけてあります。

こんな感じのHTMLを出力したい

<ul id="navi">
    <li id="home" class="current"><a href="/">HOME</a></li>
    <li id="contents"><a href="contents/">CONTENTS</a></li>
    <li id="blog"><a href="blog/">BLOG</a></li>
</ul>

現在のページにclass=“current”が入ることで、CSS側で表示を変えてあげます。

PHPで書く

<ul id="navi">
    <li id="home"<?php if (is_home()): ?> class="current"<?php endif; ?>><a href="<?php bloginfo('url'); ?>">HOME</a></li>
    <li id="contents"<?php if (is_page('contents')): ?> class="current"<?php endif; ?>><a href="contents">CONTENTS</a></li>
    <li id="blog"<?php if (is_page('blog') or is_single()): ?> class="current"<?php endif; ?>><a href="blog">BLOG</a></li>
</ul>

こちらのサイトを参考にさせて頂いています。

• vicuna CMSのグローバルナビのカスタマイズ -tpexbloghttp://tpexweb.info/blog/wordpress/vicuna_cms_globalnavi.php

liタグの中に、特定のページならばclass=“current”が入るようになっています。

こちらは、WordPressで普通のWebサイトをつくる場合の例です。home.phpを用意してあるのでそちらがトップページになります。ブログは、blogというスラッグの固定ページを作り、blog.phpという固定ページ用のテンプレートを作ってあげます。

また、ブログは、トップページと個別投稿ページ（シングルページ）全てにカレント表示させたいので、

<?php if (is_page('blog') or is_single()): ?>

のように記述しています。

追記と訂正

上記の記事にも追記してありますが、もっと簡単な方法を教えてもらえました！

• WordPressで固定ページをブログのトップとして記事を一覧表示する方法

こちらに詳しく書きましたのでご参照ください。この方法だとトップページがis_front_page()で、ブログに設定した固定ページがis_home()で条件分岐できるので、

<ul id="navi">
    <li id="home"<?php if (is_front_page()): ?> class="current"<?php endif; ?>><a href="<?php bloginfo('url'); ?>">HOME</a></li>
    <li id="contents"<?php if (is_page('contents')): ?> class="current"<?php endif; ?>><a href="contents">CONTENTS</a></li>
    <li id="blog"<?php if (is_home() or is_single()): ?> class="current"<?php endif; ?>><a href="blog">BLOG</a></li>
</ul>

このように書けば良いと思います！

CSSで実装

ul#navi, ul#navi li, ul#navi li a{
	display:block;
	margin-top:3px;
	zoom:1;
	height:48px;
}

ul#navi li{
	float:left; /*横並びに*/
	width:90px;
	padding-left:10px;
}

ul#navi li a{
	text-indent: 100%; /*テキストを見えなくする*/
	white-space: nowrap;
	overflow: hidden;
}

/*各画像セット*/
ul#navi li#home a{background: url(images/home.jpg);}
ul#navi li#contents a{background: url(images/contents.jpg);}
ul#navi li#blog a{background: url(images/blog.jpg);}

/*マウスオーバー時*/
ul#navi li#home a:hover,
ul#navi li#contents a:hover,
ul#navi li#blog a:hover{
	background-position:0 -48px; /*真ん中の画像を出す*/
}

/*カレント表示*/
ul#navi li#home.current a,
ul#navi li#contents.current a,
ul#navi li#blog.current a{
	background-position:0 -96px; /*一番下の画像を出す*/
}

背景に縦48*3=114pxの画像を使い、状況によって48px又は96pxずらすという手法です。

テキストの画像じゃなくても、twitterなどのアイコンを色違いで用意しておいて、なんてこともできますね。このサイトの右上のアイコン類はそれでやっています。

こんな感じです。

2012/9/25追記

固定ページのスラッグを取得してナビゲーションを実装するという方法も書いてみました！

• WordPress固定ページのスラッグを取得するとナビゲーションとかに使えるかも