ver.2.0 WordPressとCSSで現在表示しているページのナビゲーションメニューの色を変えたりする実験 ver.2.0

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

この記事は

http://miso0nok.net/2012/04/web/wordpress-menu-current-ver1/

[WordPress][CSS]現在表示しているページのナビゲーションメニューを色変えしたり画像を変えたり実験 ver.1.0
の続編というか、自分なりのまとめ直しです。
自分で読んでも先の記事が全く理解できないとはどういうことだ…

という訳で、WordPressのカスタムメニューでカレント表示を実装する実験です。

2013年7月現在使用しているテーマ(Reddle)では既にカレント表示が実装されているのですが
それはひとまずおいといて。

カスタムメニューの構造から見ていきます。

1
「このサイトについて」のページを開いたところです。
カスタムメニュー内の「このサイトについて」のところも色が変わっています。

2
いま使っているテーマの、カスタムメニュー部分の構造です(firebug使用)。
なんだかごちゃごちゃしてよくわからないかもしれませんが、よく見ていきます。

青く選択されている部分が、カスタムメニュー内の「このサイトについて」へのリンク部分です。
そのひとつ上の段にあるliタグが、今回装飾をかけていく部分になります。

WordPressでは、自動的にCSSのクラスをつけてくれることがあります。
先ほどのliタグの中に、半角スペース区切りでたくさんのclassが並んでいますよね?
menu-item とか、page-item とかがそれです。

この自動的につけてくれるクラスの中に、実はカレント表示用のクラスもつけてくれているんです。
これがそのクラスです。(赤線をひいてあるもの)
3

この赤線を引いた、curennt-menu-item というのが、「現在表示されているページ」を表示しているときに、
カスタムメニューにつけられる特別なCSSクラスになります。(ああ分かりづらい文章だこと)

つまり、この current-menu-item に対して特別にCSSの指定をしてやれば、
「現在表示しているページのナビゲーションメニューを色変えしたり画像を変えたり」できるわけです。

具体的なCSSの例は省きますが、
構造としてはこういうことになるのかな、と思います。

以前の記事でも触れていましたね。

wp_nav_menu()は
現在アクティブになっているページ(=表示しているページ)に
current_page_item というクラスを勝手にくっつけてくれるそうなので

—[WordPress][CSS]現在表示しているページのナビゲーションメニューを色変えしたり画像を変えたり実験 ver.1.0

テーマによってつけられるカレント表示専用のCSSクラスは変わるかもしれないので、
お使いになられているテーマの構造を確認してみてください。

そんなこんなで、
いま自分が理解している範囲の構造のお話でした。
間違いがあったら教えてください。

ありがとうございました。

ver.2.0 WordPressとCSSで現在表示しているページのナビゲーションメニューの色を変えたりする実験 ver.2.0” への1件のフィードバック

  1. RT @miso0nok: ブログを書きました。以前書いたものが意味不明だったので自分でもわかるようにまとめたつもり。→ [WordPress][CSS]現在表示しているページのナビゲーションメニューの色を変えたりする実験 ver.2.0 http://t.co/ykU97SR…

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。