WordPress:カスタムメニュー(wp_nav_menu)について

  • Posted on
  • Category : WordPress
WordPress:カスタムメニュー(wp_nav_menu)について

今更すぎるんですがカスタムメニューについての備忘録です。便利なのは知りつつもほとんどテンプレートにURLを直接記述したり、見栄えも画像を使ったりが多いのであまり使うことがないんですが、久しぶりに使ってみようとしたらいろいろと忘れていたので復習を兼ねて…。

※以下で紹介している内容は、WordPress Ver3.5.1で試したものです。

いろいろとデザイン的にこだわっていると画像の方がはるかに早い場合もありますが、今は対象ブラウザによってはWebフォントだとかCSS3だとかを駆使すれば、わざわざ画像を使うこともなく意図した見栄えのナビゲーションも実現できたりします。
こういった便利な機能を用いて構築しておけば、例えば担当者がある程度の作業ができる場合に自分達だけで自由にナビゲーションの増減を行ってもらえたりもできると思います。

WordPress:カスタムメニュー(wp_nav_menu)について 目次

  1. 導入方法
  2. 基本的な使い方
  3. IDやクラスをスッキリさせる
  4. サブタイトル付きのメニューを表示する

1. 導入方法

自作テーマとかで実装されていない場合、まずカスタムメニューの機能を実装する必要があります。
カスタムメニューを実装するためには以下のコードをfunctions.phpに記述します。
テーマ内にfunctions.phpがない場合は作成してください。

functions.php

<?php add_theme_support( 'menus' ); ?>

上記を記述後に管理画面の「外観」を確認すると、新たに「メニュー」という項目が追加されています。
あとは、ここでいろいろと設定をすればカスタムメニューを表示することができます。

メニューを表示したい箇所には下記を記述することで表示されるようになります。

<?php wp_nav_menu(); ?>

上記を記述した場合はタグやクラスなどがデフォルトのもので出力されますが、それらを変更したい時などは予め幾つかのパラメータがあるので、それらを用いて変更します。
また、カスタムメニューは幾つか作成することができるのですが、「このページにはこのメニューを使いたい」という時もパラメータで指定することができます。

例えば、使用するメニューを指定し、デフォルトでulが括られているdivをなくしたい場合は下記のように記述します。

<?php wp_nav_menu( array('menu' => 'Menu Name', 'container' => '')); ?>

メニューの指定はmenuを用いて、赤文字の部分に設定したメニュー名を記述することで表示されるようになります。
また、括られているタグを変更したい場合はcontainerを用います。
今回はタグ自体をなくしたいので空にしていますが、他のタグへに変更したい場合はここに記述することで変更されます。

パラメータは他にも幾つかあり、各要素のクラス名を変更する$container_id$menu_class、リンクの前後にテキストを表示する$link_before$link_afterなどがあります。
その他のパラメータについてはCodexで確認できます。

目次へ

2. 基本的な使い方

「外観」の「メニュー」を選択すると画像のような画面が表示され、ここでいろいろと設定を行います。

カスタムメニューの基本的な使い方

左側でリンクの設定やメニューをどこへ表示したいかなどを設定し、右側ではナビゲーションのラベルや属性などの値を変更したり、ドラッグでナビの移動や入れ子の設定などを行います。
また、複数のメニューを作成している場合はメニューの名前の項目上にあるようにタブが表示されているので、ここで切り替えて別のメニューを変更(画像では「test01」と「test02」というメニューが作成されている状態)したり、新たなメニューを追加したい場合はその横の「+(プラス)」タブで新たに作成できます。

ドラッグで簡単に移動できる

メニューの順番を変えたいとか、入れ子にしたい場合はドラッグで簡単に移動して設定することができます。
入れ子にしたい場合は画像のように少し右にずらすようにすれば設定できます。

詳細を設定する

各メニューの詳細を変更したい場合は、メニュー右にある下矢印をクリックすればいろいろと項目が出てくるので、ここでラベルやタイトル属性などを変更します。
画像は全ての項目を表示させたところをキャプチャしたものですが、必要ない項目があるなら「表示オプション」の中で表示・非表示を設定できます。

ここでひと通り設定をすれば、先程<?php wp_nav_menu(); ?>を記述したところに意図した形でメニューが表示されると思います。
メニューを複数作成している場合は$menuがちゃんと指定されているかを確認してください。

目次へ

3. IDやクラスをスッキリさせる

wp_nav_menuを使うとメニュー内で使用しているタグに様々なクラスやIDがつき、例えば現在見ているページのメニューにはcurrent_page_itemがついたり、各ページスラッグが入ったmenu-item-x(xはスラッグ)など大体5つぐらい記述されています。

これらのクラスを使って各メニューの見栄えを変えたりできるので便利は便利なのですが、ここまで沢山いらない場合や出力されるソースを綺麗にしたいと思う場合は、以下をfunctions.phpに記述することでシンプルにできます。

functions.php

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
	return is_array($var) ? array_intersect($var, array( 'current-menu-item' )) : '';
}

上記を記述することで現在見ているページのメニューにcurrent-menu-itemというクラスが付加される以外は、全てのIDやクラスが消えた状態でソースが出力されるようになります。
このスニペットは以下で知りました。

目次へ

4. サブタイトル付きのメニューを表示する

よく見かける日本語は大きく表示させて、英語でサブタイトルつけるみたいなメニューを実装する方法です。
以下をfunctions.phpに記述します。

functions.php

add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);
function description_in_nav_menu($item_output, $item){
	return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<br /><span>{$item->attr_title}</span><", $item_output);
}

上記を記述後、メニュー設定で「タイトルの属性」に入力した文字がspanタグで括られて表示されるようになります。
出力されるタグなどを変更したい場合は、赤文字部分を変更してください。
「タイトルの属性」ではなくて「説明」を利用して実装したい場合は、赤文字の$item->attr_titleとなっている部分を$item->descriptionに変更すれば、「説明」に入力したものが出力されるようになります。
両方とも使いたければどちらも記述すれば出力されます。

サブタイトル付きのメニューを表示

画像はサンプルで作成したメニューのキャプチャです。
ホームやサンプル01という文字は設定時に「ナビゲーションラベル」に入力したもの、Homeやexample01という文字は「タイトルの属性」に入力したものが表示されています。

目次へ

Back to Top

WordPress:カスタムメニュー(wp_nav_menu)について

WordPress:カスタムメニュー(wp_nav_menu)について

/ WordPress

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。