wordpress

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

投稿日:




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

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

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

header.phpを編集

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

 

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

CSSはこちら。

 

 

ナビ画像はこんな感じ。

gnav01 gnav02 gnav03 gnav04 gnav05

 

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

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

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







-wordpress

Copyright© フリーランス航海日誌 , 2019 All Rights Reserved.