memocarilog

カテゴリーでメニューを作った場合に、現在開いてるカテゴリーのページのメニューをcssで変える事ができます。

<?php wp_list_categories(); ?>

カテゴリーメニューを表示するのに、↑のタグを使って出力しますが初期値に’__(‘Categories’)’が入っているので、このままだと自動的に”カテゴリー”というタイトルを入れてしまいます。タイトルを入れないようにするには’title_li=’を指定します。’title_li=’を指定した場合はタイトルなしで”li”のリスト部分のみの出力となります。
例えばこのブログでは下記のようにマークアップしています。

<ul id="categorynavi">
　　　<?php wp_list_categories('title_li'); ?>
</ul>

wp_list_categories(‘title_li’); を使ってカテゴリーメニューを表示させると、現在開いているカテゴリーのページには”current-cat”というクラスが付きますので、それを使ってcssの装飾を変える事ができます。
上のマークアップで表示されるコードです↓

このブログのカテゴリーメニューのcss部分です↓

/* categorynavi */
#categorynavi{
	height: 50px;
	overflow: hidden;
	zoom: 1;
}
#categorynavi li a{
	line-height: 45px;
	color: black;
	text-shadow: 0px 1px 5px white;
	height: 45px;
	float: left;
	font-size: 18px;
	padding: 10px 30px 0 0;
	display: inline;
}
#categorynavi li a:hover{
	text-decoration: none;
	text-shadow: 0px 3px 20px white;
}
#categorynavi .current-cat a{
	text-decoration: none;
	text-shadow: 0px 3px 20px white;
}

開いているカテゴリーページにいる時はホバーと同じcssにしてあります。

CMSとして使う場合なんかには”current-cat”クラスを利用してスタイルを変えるのは便利ですね。