WEB制作

[wordpress] 現在アクティブなページを判定してナビゲーションをカレント表示させる方法【基本編】

2017年4月6日

wordpressのグローバルナビのデザイン実装について、今回の要件はこちら。

・現在アクティブなページを判定してグローバルナビをカレント表示
・マウスオーバーで画像切り替え
・ナビ画像(W200×H50)を5枚横並びにする。トータル幅=1,000px

ではさっそくやってみましょう♪

header.phpを編集

ではグローバル部分の記述はこんな感じ。

<!-- グローバルナビ -->
<div id="bg_wrapper">
 <div class="bg_container">
 <ul id="gnav">
 <li id="gnav01"<?php if (is_home()): ?> class="current"<?php endif; ?>><a href="http://hamamatsu-fsc.com/?page_id=44">ホーム</a></li>
 <li id="gnav02"<?php if (is_page('content1')): ?> class="current"<?php endif; ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>/?page_id=1">コンテンツ1</a></li>
 <li id="gnav03"<?php if (is_page('content2')): ?> class="current"<?php endif; ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>/?page_id=2">コンテンツ2</a></li>
 <li id="gnav05"<?php if (is_page('content3')): ?> class="current"<?php endif; ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>/?page_id=3">コンテンツ3</a></li>
 <li id="gnav04"<?php if (is_category('category1' )): ?> class="current"<?php endif; ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>/?cat=1">コンテンツ4</a></li>
 </ul>
 </div><!-- bg_container -->
</div><!-- bg_wrapper -->

 

コンテンツ1〜コンテンツ3までは固定ページへのリンク。コンテンツ4はカテゴリページへのリンクというケースです。適宜、スラッグとページURLを書き換えてください。

CSSはこちら。

 

<!-- CSS -->
#bg_wrapper{width: 100%; background-color: #999; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #222222;}
#bg_wrapper .bg_container{ width: 1000px; margin: auto; }

ul#gnav, ul#gnav li, ul#gnav li a{
 display:block;
 zoom:1;
 height:50px;
}
 
ul#gnav li{
 float:left; /*横並びに*/
 width:200px;
}
 
ul#gnav li a{
 text-indent: 100%; /*テキストを見えなくする*/
 white-space: nowrap;
 overflow: hidden;
}
 
/*各画像セット*/
ul#gnav li#gnav01 a{background: url('gnav01.gif');}
ul#gnav li#gnav02 a{background: url('gnav02.gif');}
ul#gnav li#gnav03 a{background: url('gnav03.gif');}
ul#gnav li#gnav04 a{background: url('gnav04.gif');}
ul#gnav li#gnav05 a{background: url('gnav05.gif');}
 
/*マウスオーバー時*/
ul#gnav li#gnav01 a:hover,
ul#gnav li#gnav02 a:hover,
ul#gnav li#gnav03 a:hover,
ul#gnav li#gnav04 a:hover,
ul#gnav li#gnav05 a:hover{
 background-position:0 -50px; /*真ん中の画像を出す*/
}
 
/*カレント表示*/
ul#gnav li#gnav01.current a,
ul#gnav li#gnav02.current a,
ul#gnav li#gnav03.current a,
ul#gnav li#gnav04.current a,
ul#gnav li#gnav05.current a{
 background-position:0 -100px; /*一番下の画像を出す*/
}

 

ナビ画像はこんな感じ。

gnav01 gnav02 gnav03 gnav04 gnav05

 

マウスオーバー(ロールオーバー)時とカレント表示は同じデザインということになります。

コードとソースをダウンロードできるようにしておきます。動作テストしていないので不具合があったら適当に修正して使ってください。

グローバルナビカレント表示

  • この記事を書いた人

おるまーで

WEB屋

-WEB制作
-

Copyright© おるまーで , 2020 All Rights Reserved.