- 1. まずはメニュー機能の基本的な使い方
- 2. アクティブ時とポイント時のスタイルを変える
- 3. 画像メニューにする場合
- 4. あとがき – wp_nav_menu()ではメニューをPHPの値として取得できるらしいが…
1. まずはメニュー機能の基本的な使い方
メニュー機能をオンにする
> テーマフォルダ/functions.php
add_theme_support('menus');
カスタムメニューの作成
管理画面 > 外観 > メニュー
メニューの名前: global-navi
リンク先: 固定ページ
テンプレートタグを記述
テンプレートタグ wp_nav_menu() を使います。
> テンプレート
<?php wp_nav_menu(array('menu' => 'global-navi')); ?>
↓
生成されるHTMLは以下のような構造になっています。
※実際はもっとたくさんのclassやidが付きますが、わかりやすいように省略しています。
<div class="menu-global-navi-container"> <ul id="menu-global-navi" class="menu"> <li class="menu-item"> <a href="http://xxx">ページ1</a> </li> <li class="menu-item"> <a href="http://xxx">ページ2</a> </li> <li class="menu-item"> <a href="http://xxx">ページ3</a> </li> </ul> </div>
さらに、WordPress内の固定ページや投稿記事へのリンクメニューの場合、アクティブなメニューには、current-menu-item というclassが自動的に追加されます。
CSSでスタイル指定
構造が分かったら、あとはcssでスタイルを指定すればOKですね。
.menu {} /* メニューを構成するul */ .menu-item {} /* メニュー */ .current-menu-item {} /* アクティブなメニュー */
2. アクティブ時とポイント時のスタイルを変える
メニューに背景画像を設定して、アクティブ時とポイント時のスタイルを変えてみます。
背景画像の作成
> global-navi.png
※ディフォルト、アクティブ、ポイント時の背景画像はひとつの画像ファイルで用意して、CSS の background-position で制御します。
CSSで制御する
.menu { overflow: hidden; } .menu-item { width: 200px; height: 36px; float: left; text-align: center; } .menu-item a { background-image: url(./images/global-navi.png); display: block; line-height: 36px; color: white; text-decoration: none; } .current-menu-item a { background-position: 0 -36px; } .menu-item a:hover { background-position: 0 -72px; }
↓
ポイント
a タグに「display: block; line-height: 36px;」と指定することで、幅と高さを持たせることができます。
3. 画像メニューにする場合
メニューにclassをつける
管理画面 > 外観 > メニュー
表示オプションの「CSSクラス」にチェック
各メニューにclassをつけます
これで、wp_nav_menu() で生成されるHTML構造は以下のようになります。
<div class="menu-global-navi-container"> <ul id="menu-global-navi" class="menu"> <li class="menu_1 menu-item"> <a href="http://xxx">ページ1</a> </li> <li class="menu_2 menu-item"> <a href="http://xxx">ページ2</a> </li> <li class="menu_3 menu-item"> <a href="http://xxx">ページ3</a> </li> </ul> </div>
画像を用意する
> global-navi.png
CSSで制御する
.menu { overflow: hidden; } .menu-item { width: 200px; height: 36px; float: left; text-align: center; } .menu-item a { background-image: url(./images/global-navi.png); display: block; position: relative; line-height: 36px; color: white; text-decoration: none; text-indent: -9999px; } .menu_1 a { background-position: 0 0; } .menu_2 a { background-position: -200px 0; } .menu_3 a { background-position: -400px 0; } .menu_1.current-menu-item a { background-position: 0 -36px; } .menu_2.current-menu-item a { background-position: -200px -36px; } .menu_3.current-menu-item a { background-position: -400px -36px; } .menu_1 a:hover { background-position: 0 -72px; } .menu_2 a:hover { background-position: -200px -72px; } .menu_3 a:hover { background-position: -400px -72px; }
どや↓
ポイント1
画像メニューではリンクのラベルは不要なのですが、wp_nav_menu() ではラベルを非表示にすることができません。
なので、「text-indent: -9999px;」を指定してラベルを飛ばしてしまいます。
ポイント2
「.menu_1.current-menu-item {}」とセレクタを指定することで、複合クラスの要素を指定することができます。
(これ知らない人多い
あとがき – wp_nav_menu()ではメニューをPHPの値として取得できるらしいが…
画像メニューにしようとした時、ラベルを除外して取得できるパラメーターがないものかと思いました。
そしたら、メニューをPHPの値で返してくれる echo というパラメーターがありました。
PHPの値で返してくれるということは、きっとこんな風に取得できるのではないか?
> 想像
array( 'label' => array( 'メニュー1', 'メニュー2', 'メニュー3', ), 'url' => array( 'http://xxx', 'http://xxx', 'http://xxx', ), 'class' => array( 'menu_1', 'menu_2', 'menu_3', ), );
これなら自由自在にいろいろできそうですよね。
では、さっそく。
<?php $header_navi = wp_nav_menu(array('menu' => '-navi','echo' => false)); print_r($header_navi); ?>
↓
普通に出力されてしまいました。
まさかとは思いましたが…検証
<?php $header_navi = wp_nav_menu(array('menu' => 'header-navi', 'echo' => false)); echo $header_navi[0]; echo $header_navi[1]; echo $header_navi[2]; echo $header_navi[3]; ?>
↓
<div
なんてこと!!
メニューを生成するHTMLタグの文字列を取得するだけだったとわ!
なんだこのパラメーター。使えねぇ〜
Comments
[…] →WordPress メニュー機能を操る ~画像メニューにする方法など […]
初心者にも大変わかりやすく参考になります。
メニューを画像にすることが出来たのですが、メニューの数を増やすと2段になってしまい困っています。
ご教授頂けると大変助かります。
宜しくお願い致します。
yuuki
“2段になる”とは具体的にどういうことでしょうか?
メニューが2段に折り返されてしまうということでしたらCSSを見直してみてください。親要素の幅が小さくはありませんか?