今開いてるカテゴリーメニューの装飾を変える

今開いてるカテゴリーメニューの装飾を変える

カテゴリーでメニューを作った場合に、現在開いてるカテゴリーのページのメニューを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の装飾を変える事ができます。
上のマークアップで表示されるコードです↓
current-catというクラスが付く

このブログのカテゴリーメニューの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にしてあります。
current-catのCSS適応表示

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

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能