WordPress メニュー機能を操る ~画像メニューにする方法など

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

コメントを残す