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

WordPressでカレント表示実験 ver.1.0 アイキャッチ画像
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

———- 20130723 追記ここから ———-
自分なりにまとめ直した、新しいバージョン(2.0)の記事を書きました!
よろしければこちらもごらんください。

http://miso0nok.net/2013/07/web/wordpress-menu-current-ver2/
[WordPress][CSS]現在表示しているページのナビゲーションメニューの色を変えたりする実験 ver.2.0
———- 20130723 追記ここまで ———-

———- 20130314 追記ここから ———-
さすがにメモとはいえ自分で読み返して訳が分からないので、
この記事を実験 ver.1.0とします。
いまやっている方法をまとめて新しいバージョンとし、また記事にする予定です。
———- 20130314 追記ここまで ———-

ウェブサイトのナビゲーションメニューで
現在表示されているページのところだけメニューの色が変わったりするやつ。
カレント表示とかダイナミックハイライトっていうんですね。知らなかった。

WordPressでやることになったのでゼロから調べていじってたけど
とりあえずCSSだけでどうにかなったので自分用にメモする!

<前提>
WordPressのナビゲーションメニューを使う(wp_nav_menu)
リンクは画像に置き換える(CSSスプライト)
置き換える画像は width:150px 、 height:90px
(メニューで表示させるエリアは width:150px 、height:30px)

まずナビゲーションメニューをつくる。
WordPress ダッシュボード>外観>メニューからごねごねする。

つくったナビゲーションメニューをCSSで画像置換。
画像置換で text-indent:-9999emとか-9999px を使うのはどうかなーと常々思っていたので
コリスさんのこちらのテクニックでごねごね。

http://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html

[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック|コリス

コード抜粋

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;

ごねごねって手こずってる感じがしていいな。

で、
wp_nav_menu()は
現在アクティブになっているページ(=表示しているページ)に current_page_item というクラスを勝手にくっつけてくれるそうなので
これをうまく使えばできるかな!という気持ちになりましたので
CSSをごねごねしました。

current_page_item というクラスを知ったのはこちらのエントリーから。
ほんとなんにも知らないなわたしは。

http://hijiriworld.com/web/wordpress%E3%82%92cms%E3%81%A8%E3%81%97%E3%81%A6%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AAweb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B/

WordPressをCMSとして基本的なWebサイトを構築する|hijiriworld Web

ごねごねしたCSSはこんな感じに。
すごく汚いコードだしもっとすっきりまとめられる気がするけどとりあえず動いたので!やっつけだけど!


/* ダイナミックハイライト:カレント表示テスト */
div#nav, div#nav ul, div#nav ul li, div#nav ul li a {
	display: block;
	height: 30px; /* 置き換える画像の横幅 */
	margin-bottom: 10px; /* メニューの下に隙間 */
}

div#nav ul li {
	float: left; /* 横に並べる */
	width: 150px; /* 置き換える画像の横幅 */
}

div#nav ul li a { /* text-indent:-9999em; を使わない画像置換 */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* リンク先ごとの設定  リンク先はpage_id=00のページとする*/
div#nav .page-item-00 a { 
	background-image: url("nav_00.gif"); /* 150*90pxの背景画像 */
	background-position: left top;
	background-repeat: no-repeat;
}

div#nav .page-item-00 a:link,
div#nav .page-item-00 a:visited {
	background-position: left top; 
}

/* ダイナミックハイライト */
div#nav .page-item-00.current_page_item a {
	background-position: 0 -60px; /* current_page_item というクラスが付加された時、背景画像を60px上にずらして画像を表示 */
}

div#nav .page-item-00 a:hover,
div#nav .page-item-00 a:active {
	background-position: 0 -30px;
}

CSSはこちらのエントリーを参考にさせていただきました。

http://weble.org/2012/01/05/wordpress-pagelist-class

WordPress で wp_list_pages() 及び wp_nav_menu() で現在のページ並びに子孫のページで付加される class について|ウェブル

http://ateitexe.com/wordpress/php-navigation-menu-current/

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

とりあえず自分がわかればいい感じのまとめ。
あとで実際に画像をつけて追記するかもしれないし、しないかもしれない。

ところでウェブルさんのこのレシピが美味しそうなので今日帰りにさつまいも買って帰ろうと思う。

http://weble.org/2012/04/25/sweet-potato-fries

食物繊維たっぷりでお通じも良くなる「さつまいもを使ったフライドポテト」のレシピ|ウェブル

——— 20120427 追記 ————-
SyntaxHighlighter Evolved プラグインを入れました。

——— 20130306 ————-
「Browser Shots」用にタグ書き換えと修正

コメントを残す

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

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