WordPressの固定ページ以外にカテゴリのナビゲーションを追加する

妙に、カテゴリ一覧への誘導が弱い気がしてきました。ヘッダーあたりに持ってきてかつ、そんなに強調しすぎないようにどうにかならないかなーと思って画像を使って実装してみました。

完成図

素材に合わせてメモっぽくと思って作りました。

ちなみに、こういう画像を使ってスプライト形式にしています！（表示用にちょっと縮小しています）

実装

カスタムメニューを使えばもっと楽々できるの…かな？実は私カスタムメニュー使ったことがなくて、手動実装みたいなものなんですけど…！

header.php

<?php if(!is_page()): ?>
	<?php if(is_single()||is_category()):
		/* 現在のカテゴリ－の取得 */
		$cat_now = get_the_category();
		$cat_now = $cat_now[0];
		$add_class = ' class="'.$cat_now->slug.'"'; /*スラッグ名*/
	endif; ?>
	<div id="navi-cat">
		<ul<?php echo $add_class ?>>
			<li class="web"><a href="<?php bloginfo('url'); ?>/category/web/">Web関係</a></li>
			<li class="wordpress"><a href="<?php bloginfo('url'); ?>/category/wordpress/">WordPress</a></li>
			<li class="excelvba"><a href="<?php bloginfo('url'); ?>/category/excelvba/">Excel/VBA</a></li>
			<li class="child"><a href="<?php bloginfo('url'); ?>/category/child/">子供のこと</a></li>
			<li class="notes"><a href="<?php bloginfo('url'); ?>/category/notes/">雑記</a></li>
		</ul>
	</div>
	
<?php endif; ?>

※リンク先URLは設定によって違うと思いますのでお確かめください！

まずは1,18行目の条件分けによって、固定ページ以外の場合のみ適用させます。固定ページにもナビがあっても良い方はここは要りません。

2～7行目で、単一記事とカテゴリ一覧ページのみ$add_classという変数に「 class="カテゴリスラッグ"」という文字列を入れてあげます。（頭に半角スペースも入ってます）

8～17行目が実際htmlに出力される部分です。9行目のulタグ直後に先程の$add_classを置くことで、

<!-- 単一記事・カテゴリ一覧のとき -->
<nav id="navi-cat">
	<ul class="web">
		<li class="web"><a href=#">Web関係</a></li>
		(略)
	</ul>
</nav>

<!-- それ以外（トップページなど）のとき -->
<nav id="navi-cat">
	<ul>
		<li class="web"><a href=#">Web関係</a></li>
		(略)
	</ul>
</nav>

このように、カテゴリに属しているページのときだけulにクラスが追加され、それ以外のページはクラスなしのulタグを出力できます。あとはcssによって出力画像を調整します。

style.css

#navi-cat ul{
	overflow:hidden;
	zoom:1;
	width:570px;
	height:20px;
}
#navi-cat ul li{
	display:inline;
	zoom:1;
}
#navi-cat ul li a{
	display: block;
	text-indent: 100%;
	overflow: hidden;
	height:0;
	padding:20px 0 0 0;
	float:left;
	background:url(images/navi-cat.png) no-repeat;
	zoom:1;
}
#navi-cat ul li.web a{background-position:0 0; width:114px;}
#navi-cat ul li.wordpress a{background-position:-114px 0; width:114px;}
#navi-cat ul li.excelvba a{background-position:-228px 0; width:114px;}
#navi-cat ul li.child a{background-position:-342px 0; width:114px;}
#navi-cat ul li.notes a{background-position:-456px 0; width:114px;}

#navi-cat ul li.web a:hover{background-position:0 -20px;}
#navi-cat ul li.wordpress a:hover{background-position:-114px -20px;}
#navi-cat ul li.excelvba a:hover{background-position:-228px -20px;}
#navi-cat ul li.child a:hover{background-position:-342px -20px;}
#navi-cat ul li.notes a:hover{background-position:-456px -20px;}

#navi-cat ul.web li.web a{background-position:0 -40px;}
#navi-cat ul.wordpress li.wordpress a{background-position:-114px -40px;}
#navi-cat ul.excelvba li.excelvba a{background-position:-228px -40px;}
#navi-cat ul.child li.child a{background-position:-342px -40px;}
#navi-cat ul.notes li.notes a{background-position:-456px -40px;}

マウスオーバーで2段目（ボーダーなし）、カレント（カテゴリに属したページ）のときは3段目（赤線）が表示されるようになっています。

私の用意した画像は横114*5=570px、縦20*3=60pxでしたのでこのようなcssになっていますが、用意される画像のサイズによって調節してくださいね。

いかがでしたでしょうか？どなたかの参考になれば幸いです！