wordpress 表示しているページを判別し、ナビゲーションの表示を変える(カレント表示) 2015年5月11日
Tag:


現在表示していページだけナビゲーションの背景や色を変えて表示する。

1.関数を利用してcssで設定したclass=”current”をナビゲーションに追加します。

例:
1900

<nav>
<ul>
<li class="navNomal<?php if ( is_page('top') ) { echo ' current'; } ?>"><a href="<?php bloginfo('url'); ?>">HOME</a></li>
<li class="navNomal<?php if ( is_category('news') or in_category('news') ) { echo ' current'; } ?>"><a href="/news/">NEWS</a></li>	//NEWSカテゴリーとNEWSのカテゴリーに属する記事		
 <li class="navNomal<?php if ( is_post_type_archive('blog') or is_singular('blog') ) { echo ' current'; } ?>"><a href="/blog/">お役立ち情報</a></li> //カスタム投稿blogとblogに属する記事
<li class="navNomal<?php if ( is_page('company') ) { echo ' current'; } ?>"><a href="/company/">会社概要</a></li> //個別ページ                
</ul>
</nav> 
#header nav ul {
	margin: 0px;
	padding:0px;
        display: table;
        table-layout: fixed;
        text-align: center;
        width: 100%;
}

#header nav ul li.navNomal {
        display: table-cell;
        vertical-align: middle;
	border-right:1px solid #cccccc;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

#header nav ul li:first-child {
	border-left:1px solid #cccccc;
}

#header nav ul li.navNomal a{
        display:block;
	padding:5px 0 5px 0;
	color:#000000;
}

#header nav ul li.current a{
	background:#78bd36;
	color:#FFFFFF;
	font-weight:bold;
}


#header nav ul li.navNomal a:hover{
	background:#78bd36;
	color:#FFFFFF;
	font-weight:bold;
}


/*カレント表示*/
#header nav ul li.current a{
	background:#78bd36;
	color:#FFFFFF;
	font-weight:bold;
	padding:5px 0 5px 0;
        display:block;
}

関連記事

New

Aechive

Tag

css Facebook facebookカスタマイズ Facebookページ facebooRSS font functions.php google NEWマーク photoshop RSS SEO single.php webツール WEBデザインツール Wordpress アイコン アーカイブ エディタ カスタムタクソノミー カスタムフィールド カスタムフィールドテンプレート カスタム投稿 カテゴリー カレンダー クリップアート サイドバー ターム テキスト テンプレートタグ パターン ブラシ プラグイン ヘッダ ページ 並び替え 人気 便利 分岐 文法チェック 月別アーカイブ 特定カテゴリー 画像 記事