WordPressでナビゲーションメニューをページごとにカレント表示する

WordPressでナビゲーションメニューをページごとにカレント表示する

ナビゲーションメニューのカレント表示、静的ページだとページごとに記述を変えるのは大変ですが、PHPでやってみたら簡単でした!


こんな感じにしたい

120215-1

今いるページのナビはオレンジっぽく、下向きに▽を出して。他のページのナビは青で、下線つき。マウスオーバーで下線の色が変わる感じで。今回、閲覧対象が古いPCが多くIE6にも対応させなきゃならなかったので画像はjpgで、透過とか考えずにシンプルに作りました。

通常、hover、current画像の用意

120215-2

PhotoShopで上記のような画像を作ります。(灰色の枠は見やすくするためのガイドです。)文字と▽に1pxのドロップシャドウをうすーくかけてあります。

こんな感じのHTMLを出力したい

現在のページにclass=“current”が入ることで、CSS側で表示を変えてあげます。

PHPで書く

こちらのサイトを参考にさせて頂いています。

  • vicuna CMSのグローバルナビのカスタマイズ -tpexbloghttp://tpexweb.info/blog/wordpress/vicuna_cms_globalnavi.php

liタグの中に、特定のページならばclass=“current”が入るようになっています。

こちらは、WordPressで普通のWebサイトをつくる場合の例です。home.phpを用意してあるのでそちらがトップページになります。ブログは、blogというスラッグの固定ページを作り、blog.phpという固定ページ用のテンプレートを作ってあげます。

また、ブログは、トップページと個別投稿ページ(シングルページ)全てにカレント表示させたいので、

のように記述しています。

追記と訂正

上記の記事にも追記してありますが、もっと簡単な方法を教えてもらえました!

こちらに詳しく書きましたのでご参照ください。この方法だとトップページがis_front_page()で、ブログに設定した固定ページがis_home()で条件分岐できるので、

このように書けば良いと思います!

CSSで実装

120215-1

背景に縦48*3=114pxの画像を使い、状況によって48px又は96pxずらすという手法です。

テキストの画像じゃなくても、twitterなどのアイコンを色違いで用意しておいて、なんてこともできますね。このサイトの右上のアイコン類はそれでやっています。

120215-3

こんな感じです。

2012/9/25追記

固定ページのスラッグを取得してナビゲーションを実装するという方法も書いてみました!

公開日:2012/02/15
更新日:2014/02/13

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)