WEB制作

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

2017年4月6日

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

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

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

header.phpを編集

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

 

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

CSSはこちら。

 

 

ナビ画像はこんな感じ。

gnav01 gnav02 gnav03 gnav04 gnav05

 

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

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

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

  • この記事を書いた人

てっくぽっと

独立9年目のWEB系フリーランス。WEBと映像中心のテック系Blog「テックポット」をやっています

-WEB制作
-

Copyright© テックポット , 2020 All Rights Reserved.