TopWordPressカスタムメニュー > 2012年2月
2012年2月17日

WordPress カスタムメニューの使い方(その2:wp_nav_menuとregister_nav_menuによるカスタマイズ)

February 17,2012 1:55 AM
Tag:[]
Permalink

WordPressのカスタムメニューのカスタマイズ方法について解説します。

カスタムメニューを利用すれば、サイドメニューだけでなく、ナビゲーションを任意の場所に設置することもできるようになります。本エントリーでは、フッタに次のようなナビゲーションを追加してみます。

カスタムメニュー

WordPressのバージョンは3.3.1を使っています。カスタマイズにはTwentyElevenテーマを使います。また、フッタナビゲーションはヘッダナビゲーションのスタイルをそのまま流用しているので、id属性値が重複しています。予めご了承ください。

管理画面上でカスタムメニューを利用する方法は割愛していますので、「WordPress カスタムメニューの使い方(その1:基本)」を参照してください。

1.wp_nav_menuを使ってカスタムメニューを表示する

フッタにナビゲーションを表示するための準備として、footer.phpに赤色の内容を追加します。

<footer id="colophon" role="contentinfo">
  <nav id="access" role="navigation">
    <?php wp_nav_menu( array( 'menu' => 'Project Nav' ) ); ?>
  </nav>
  …後略…

メニューを表示するのはwp_nav_menu()です。パラメータに、「menu => 'Project Nav'」という内容を与えておきます。これは「Project Nav」という名前のカスタムメニューをここに表示する、という意味です。

次に管理画面で「Project Nav」という名前のカスタムメニューをつくり、リンクを追加します。

管理画面

カスタムメニューを保存すれば、冒頭のようなフッタナビゲーションが表示されます。

2.register_nav_menuを使ってカスタムメニューを選択できるようにする

1項では、メニュー画面で作成したカスタムメニューをfooter.phpに記述したwp_nav_menuの位置に直接関連づける方法を紹介しました。2項ではカスタムメニューを柔軟に選択できる方法を解説します。

1項のfooter.phpに設定したwp_nav_menu()のパラメータを、赤色のように「theme_location => 'Project Nav'」に変更します。theme_locationパラメータは、テーマ内で使用する場所を示すIDです。

<footer id="colophon" role="contentinfo">
  <nav id="access" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'Project Nav' ) ); ?>
  </nav>
  …後略…

次に、テーマのfunctions.phpに以下の内容を記述します。

register_nav_menu( 'Project Nav', __( 'Hoge Menu', 'twentyeleven' ) );

register_nav_menu()は第1パラメータに指定した名前(ID)に対応するtheme_locationを、メニュー画面の「テーマの位置」に表示するための関数です。第2パラメータは「テーマの位置」に表示する名称です。

この例では、さきほどwp_nav_menu()のtheme_locationパラメータで指定した「Project Nav」をregister_nav_menu()の第1パラメータに指定しています。

この設定を行うことでメニュー画面の「テーマの選択」に、次のように「Hoge Menu」が表示されるようになります。

メニュー画面

このようにしておけば、「Hoge Menu」とカスタムメニューの関連づけを管理画面上で設定できます。

register_nav_menu()のローカライズ部分、「__( 'Hoge Menu', 'twentyeleven' )」はイメージなので、「テーマの選択」にきちんと日本語を表示したい場合は適正なローカライズを行ってください。

この状態で任意の名称でカスタムメニューを作成・保存します。

カスタムメニュー

作成したカスタムメニューを、「テーマの場所」の「Hoge Menu」に関連づけます。

テーマの場所

関連づけを保存すれば、冒頭のようなフッタナビゲーションが表示されます。

3.「テーマの選択」を行っていない場合の振る舞い

2項の「テーマの選択」に表示された「Hoge Menu」にカスタムメニューを何も関連づけていない場合、表示するメニューがない状態になっていますが、実際には次のようなデフォルトメニューが表示されるようになっています。

デフォルトメニュー

仕組みは、wp_nav_menu()で用意されているfallback_cbパラメータ(表示するカスタムメニューが存在しない場合に起動する関数を定義)の設定にしたがって動作するようになっています。fallback_cbパラメータの設定を行っていない場合、WordPressのデフォルト動作でwp-includes/post-template.phpのwp_page_menu()を起動するようになっています。

wp_page_menu()ではwp_page_menu_argsフィルタを実行します。TwentyElevenテーマではこのフィルタを使って、functions.phpの以下の関数を起動するようになっています。

/**
 * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
 */
function twentyeleven_page_menu_args( $args ) {
	$args['show_home'] = true;
	return $args;
}
add_filter( 'wp_page_menu_args', 'twentyeleven_page_menu_args' );

上のソースコードだけでは分かりにくいのですが「show_home」にtrueを設定することで、先述のスクリーンショットのようなメニューを表示する仕組みになっています。

メニューを何も表示させたくない場合は、次の赤色部分のようにfallback_cbパラメータを追加し、起動関数を指定します。

<footer id="colophon" role="contentinfo">
  <nav id="access" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'Project Nav', 'fallback_cb' => 'no_menu' ) ); ?>
  </nav>
  …後略…

起動関数no_menu()は、functions.phpの最後に記述しておきます。

function no_menu(){
    echo "No menu";
}

このように設定しておけば、「テーマの場所」を選択していない場合、メニュー部分に「No menu」を表示します。

「テーマの場所」を選択していない場合

注:上のスクリーンショットの「No Menu」のスタイルは白に変更しています。

4.wp_nav_menuに設定可能なパラメータ

wp_nav_menuに設定可能なパラメータは次のとおりです。メニューにスタイルを付与したい場合にご利用ください。

パラメータ 意味初期値
$menu対応するメニュー名なし
$containerコンテナをラップする要素div
$container_classコンテナに適用するクラス名menu-{menu slug}-container
$container_idコンテナに適用するIDなし
$menu_classメニューを構成するul要素に適用するCSSクラス名。menu
$menu_idメニューを構成するul要素に適用するID。menu slug(順に増加)
$echoメニューをHTML出力する(true)か、PHPの値で返す(false)かtrue
$fallback_cbメニューが存在しない場合にコールバック関数を呼び出すwp_page_menu
$beforeリンクテキストの前のテキストなし
$afterリンクテキストの後のテキストなし
$link_beforeリンクの前のテキストなし
$link_afterリンクの後のテキストなし
$depth何階層まで表示するか。0 は全階層。0
$walkerCustom walker to useなし
$theme_locatonテーマ内で使用する場所。ユーザーが選択できるようにするには、register_nav_menu() で登録する。なし

5.参考サイト

テンプレートタグ/wp nav menu
Comments [2] | Trackbacks [0]
2012年2月16日

WordPress カスタムメニューの使い方(その1:基本)

February 16,2012 1:55 AM
Tag:[]
Permalink

WordPressのカスタムメニューの使い方について解説します。

カスタムメニュー機能で作ったメニュー
カスタムメニュー

今回はTwentyElevenテーマを使った、管理画面でのカスタムメニューの作成方法について解説します。functions.phpの設定が必要なカスタマイズなどについては別エントリーで紹介したいと思います。

WordPressのバージョンは3.3.1を使っています。

1.カスタムメニューとは

カスタムメニューとは文字通り、独自のメニューをカスタマイズする機能です。

カスタムメニューを利用すれば、固定ページ・カテゴリー・投稿・タグのリンクやカスタムリンク(管理画面上で作ったリンク)などを表示させることができます。またそれぞれのリンクを1つのメニューに混在表示させることも可能です。メニューの順序や階層表示も自由にカスタマイズ可能です。

2.メニューの作成

まず、ページに表示するカスタムメニューの元となる「メニュー」を作ります。管理画面の「外観」→「メニュー」をクリック。

管理画面

メニューの管理画面に移動するので、「メニューの名前」に任意の名称を入力して「メニューを作成」をクリック。ここで入力した名称はそのままページに表示されるわけではありません。この名称が何に使われるかは4項を先に読んでいただいた方が分かりやすいかもしれません。

メニュー

「メニューを作成」をクリックすると、このように表示が変わります。「メニューの名前」に別の名称を入力して「メニューを保存」をクリックすればメニュー名を変更できます。赤色の「メニューを削除」をクリックすれば、作成したメニューを削除します(クリックすれば確認のダイアログが表示されます)。「トップレベルのページを自動的に追加する」をチェックしておけば、最上位階層のページを作成したときに、そのページを自動的にメニューに追加します。

メニューを作成

「+」タブをクリックすれば新しいメニューを複数作成することができます。

新しいメニューを作成

ここでは次の「てすと1」「てすと2」という2つのメニューをサンプルに話を進めます。「てすと2」は使いませんが、複数のメニューがないと説明しにくい部分があるので(笑)。

サンプル

3.メニューにリンクの追加

左側に「テーマの場所」「カスタムリンク」「固定ページ」「カテゴリ」が表示されます。メニューに追加したいリンクは、これらのメニューを操作します。「投稿」「タグ」の表示については5項を参照してください。

メニュー

「テーマの場所」は、メニューにリンクを追加するものではなく、作成したメニューをどこに表示させたいかを決めるものです。プルダウンメニューには先程作成したメニュー名が選択できるようになっています。この項目は利用しているテーマによって表示が変わります。TwentyElevenテーマでは次のように「メインメニュー」がデフォルトで表示されます。

テーマの場所

このプルダウンを選択することで、これから作成するカスタムメニューの内容をナビゲーションに反映させることができます。

カスタムメニュー

「カスタムリンク」は好きなリンクを作ることができます。「URL」と「ラベル」を入力して「メニューに追加」をクリック。

カスタムリンク

このように追加されます。

カスタムリンクで追加

追加したリンクを編集するには、右側の▼マークをクリック。

追加したリンクを編集

編集画面が表示されます。赤色の「除外」をクリックすれば、メニューからこのリンクを削除できます。「キャンセル」をクリックすれば編集内容を元の状態に戻します。「タイトルの属性」にはtitle属性の値を設定します。編集した内容を保存する場合は、「メニューを保存」をクリックします。

編集画面

「固定ページ」は予め作成している固定ページのタイトルが表示されます。ここでは「サンプルページ」がある状態なので、これをメニューに追加します。チェックボックスをチェックして「メニューに追加」をクリック。

固定ページ

このように追加されます。

固定ページを追加

メニューはドラッグできるので、順番を入れ替えることができます。

順番を入れ替え

また、少し右にずらせば入れ子にすることもできます。

入れ子

「カテゴリー」はブログに登録しているカテゴリを表示します。ここではすべてのカテゴリーを選択してみます。

カテゴリー

このようになりました。カテゴリーの親子関係とは関係なく、それぞれのカテゴリーを好きな位置に移動することができます。

カテゴリーを好きな位置に移動

最後に「メニューを保存」をクリックして、作成したメニューを保存します。

4.メニューの表示

「外観」→「ウィジェット」をクリック。

管理画面

一覧にある「カスタムメニュー」を「メインサイドバー」にドラッグします。

カスタムメニュー

「タイトル」に任意のタイトル、「メニューを選択」から先程作成した「てすと1」を選択します。この操作でお分かりになったと思いますが、カスタムメニューで作成したメニューはひとつの独立したウィジェットとなるのではなく、「カスタムメニュー」ウィジェットをまずドラッグして、それから表示したいメニューを選択する操作となります。

ウィジェットの編集

これでページに表示されました。

ウェブサイト

5.オプションの表示

4項まででデフォルト状態の表示項目について解説しました。表示項目を追加するには、「外観」→「メニュー」の管理画面右上にある「表示オプション」をクリック。

表示オプション

表示オプションが表示されます。「投稿」「タグ」や詳細メニューが追加可能です。

表示オプション

「投稿」の項目です。投稿した記事をここから選択できます。

投稿

「タグ」の項目です。登録したタグをここから選択できます。

タグ

詳細メニューを追加すると、メニューの編集画面が次のようになります。

メニューの編集画面

ここでの解説は割愛しますが、カスタム投稿タイプやカスタム分類の表示も可能です。

6.参考サイト

管理画面/外観/メニュー
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3