wordpress WordPress でのカスタムメニューの利用

2013年5月19日

カスタムメニューを使うと複数の投稿タイプを組み合わせたり、表示する順番を変更したり、階層関係をつけたりと、柔軟にメニューが作成できる。

カスタムメニューを利用する方法

カスタムメニューの機能を有効にするには以下の3つの方法がある。

  1. register_nav_menus() でカスタムメニューの機能を有効にし、メニューを表示するロケーションを作成する方法。functions.php に以下を記述。

    パラメータのキー:半角英数字のロケーション名 (カスタムメニューの識別名)
    パラメータの値:管理画面に表示するロケーション名(日本語可)→カスタムメニューの設定画面の「テーマの場所」に表示される名前

    register_nav_menus(array(
        'topnav' => 'トップナビゲーション',
        'sidenav' => 'サイドナビゲーション'
    ));

    上記を記述すると、管理画面「外観」→「メニュー」が追加され、「テーマの場所」に登録したカスタムメニュー(ロケーション名)が表示されるので、カスタムメニューの設定画面「外観」→「メニュー」でメニューを作成。

    この場合、メニューを表示(出力)するには、wp_nav_menu()のパラメータのキーに、「theme_location」を指定し、パラメータの値にregister_nav_menus()で指定したロケーション名を指定する。

    wp_nav_menu(array('theme_location' => 'topnav'));

    この方法でカスタムメニューを作成した場合、テンプレートファイルを書き換えなくても、管理画面の「外観」→「メニュー」の「テーマの場所」に登録したメニューを切り替えることで、メニューを変更することができる。

    これに対して、add_theme_support(‘menus’) でカスタムメニューを作成した場合、メニューを変更するには、テンプレートファイルに出力するカスタムメニューを直接指定しているので、テンプレートファイルを書き換える必要がある。

  2. add_theme_support(‘menus’) でカスタムメニューの機能を有効にする方法
    functions.phpに以下を記述。

    add_theme_support('menus');

    カスタムメニューの設定画面「外観」→「メニュー」でメニューを作成。

    出力するには wp_nav_menu() のパラメータのキーに ‘menu’ を、パラメータの値に出力するメニューの名前を指定する。

    「メニューの名前」を「globalnavi」として作成している場合以下のように記述する。

    wp_nav_menu(array('menu' => 'globalnavi」'));
  3. register_sidebar() でウィジェット機能を有効にする方法
    • ウィジェットの設定画面「外観」→「ウィジェット」で「利用できるウィジェット」の中から「カスタムメニー」を「サイドバー1」にドラッグ&ドロップ
    • 「メニューはまだ作成されていません。作成する」と表示されるので「作成する」をクリック
    • カスタムメニューの設定画面(「外観」→「メニュー」)にジャンプするのでメニューを作成
    • dynamic_sidebar() を使ってサイドバーにカスタムメニューを出力する

カスタムメニューを出力する wp_nav_menu 関数

wp_nav_menu(パラメータの配列)
戻り値:通常はなし(パラメータとして「'echo'=>false」を指定した場合は結果の HTML)
wp_nav_menu 関数 のパラメータ
キー デフォルト値 内容
menu 文字列 なし 出力するメニューの名前(管理画面「外観」→「メニュー」の設定ページの「メニューの名前」欄で設定した名前)
theme_location 文字列 なし 出力するメニューの種類(register_nav_menus 関数で登録した名前)
container 文字列 div メニューの ul 要素を囲む要素のタグ名。標準では「div」か「nav」(HTML5)のどちらかを指定
container_id 文字列 なし メニューの ul 要素を囲む要素に割り当てる ID
container_class 文字列 menu-{menu slug}-container メニューの ul 要素を囲む要素に割り当てる クラス名
menu_id 文字列 menu-slug(順に増加) メニューの ul 要素に割り当てる ID
menu_class 文字列 menu メニューの ul 要素に割り当てる クラス名
before 文字列 なし リンクの前に出力する文字列
after 文字列 なし リンクの後に出力する文字列
link_before 文字列 なし リンク対象文字列の前に出力する文字列
link_after 文字列 なし リンク対象文字列の後に出力する文字列
depth 整数 0 出力するメニューの階層の上限。0 を指定すると全階層を出力
fallback_cb 文字列 wp_page_menu メニューが存在しないときに実行する関数名
echo true/false true false にすると、結果のHTMLを出力せずに、戻り値として返す

メニューの作成

カスタムメニューの設定画面「外観」→「メニュー」でナビゲーションバーに表示するメニューを作成する。

  • 「メニューの名前」を指定して「メニューを作成」をクリック。
  • 「メニューの名前」は ID やクラス名として使用されるので、半角英数字で指定する。
  • 作成したメニューのタブが追加されるので、そこにリンクを追加していく。
  • メニューに追加する項目(リンク)は左側にある、「カスタムメニュー」「固定ページ」「カテゴリー」などから選択する。
  • 目的の項目が見つからない場合は「表示オプション」の設定を確認
  • 表示したい項目にチェックを入れて、「メニューに追加」をクリック
  • 追加されたリンクはそれぞれ、右端の矢印(▼)をクリックして詳細設定(下記参照)を表示し、「ナビゲーションラベル」などを指定・変更できる。
  • リンクの表示順はドラッグ&ドロップで並べ替えられる。
  • 階層構造をつくるには、追加したリンクを右側にドラッグする。
  • 「メニューを保存」をクリック
  • register_nav_menus() で登録した場合は、作成したロケーションが「テーマの場所」に追加されているので、プルダウンメニューから「mainmenu」を選択して「保存」をクリック

リンクの詳細設定

以下の設定が可能。
表示されていない項目は「表示オプション」の設定にチェックを入れると表示される。

  • ナビゲーションラベル:リンクに表示される文字列
  • タイトルの属性: a 要素の title 属性の値(リンクにマウスオーバーすると表示される)
  • CSS クラス:li 要素の class 属性の値
  • リンクターゲット
  • 説明
  • 自分とリンク先の関係/間柄 (XFN)

wp_nav_menu で出力されるメニューの HTML の基本的な構造

wp_nav_menu 関数は、デフォルトではメニューの各項目を以下のような構造で出力する。

<div class="menu-XX-container">
 <ul id="menu-XX" class="menu">
  <li id="menu-item-YY" class="menu-item menu-item-type-ZZ menu-item-YY">
   <a href="リンク先のアドレス">メニューのラベル</a></li>
  <li id="menu-item-YY" class="menu-item menu-item-type-ZZ menu-item-YY">
    <a href="リンク先のアドレス">メニューのラベル</a></li>
  ・・・
    <ul class="sub-menu">
        <li id="menu-item-YY" class="menu-item menu-item-type-ZZ menu-item-YY">
           <a href="リンク先のアドレス">メニューのラベル</a></li>
  ・・・      
      </ul>
 </ul>
 </div>

XX :メニューの名前(管理画面「外観」→「メニュー」の「メニューの名前」欄で設定した名前)
YY :メニュー項目の ID
ZZ :リンク先の種類(post_type など)

  • 親の ul 要素には「menu」の class が付く
  • 子の ul 要素には「sub-menu」の class が付く
  • 全ての li 要素には「menu-item」の class が付く
  • 現在表示されているページの li 要素には「current-menu-item」の class が付く
  • 現在表示されているページの親の li 要素には「current-menu-parent」の class が付く
  • current-menu-parent:記事の個別ページへのリンクがメニューに含まれている場合に、そのメニュー内での親階層のリンクに指定される。また、メニューの階層構造に関係なく、記事が属するカテゴリーのリンクの li 要素にも指定される。
  • 現在表示されているページの最も上の li 要素には「current-menu-ancestor」の class が付く
  • current-post-parent:記事が属するカテゴリーのリンクの li 要素に指定される。
  • current-post-ancestor:記事が属するカテゴリーのリンクの li 要素とその親のカテゴリーのリンクの li 要素に指定される
  • カスタムリンクとして作成されたリンクの li 要素には「menu-item-type-custom」の class が付く
  • 出力される HTML の li 要素のクラスを確認するとどのようなクラスが付けられるのかがわかる。
  • カスタムメニューの作成時に CSS クラスの指定するとそのリンクの li 要素に、指定したクラスが付加される。
  • 「タイトル属性」を指定すると「タイトル属性」に指定した内容が a 要素の title 属性の値となり、リンクにマウスオーバーするとその内容が表示される。

カスタムメニューのリンクを画像で表示する方法

画像を用意してテーマフォルダ内の「images」フォルダにアップロードしておき、管理画面「外観」→「メニュー」で表示するメニューを作成する。

  • register_nav_menus() でメニューを表示するロケーションを作成
  • 新しいメニューを追加(作成)
  • メニューの名前を指定して「メニューを作成」をクリックしてリンクを追加
  • 追加したリンクの右側の矢印(▼)をクリックして、リンクのオプション設定を表示する
  • 「ナビゲーションラベル」にリンクに使う画像のファイル名を指定する(例:wood.jpg)
  • 「タイトル属性」を指定する。(「タイトル属性」に指定した内容は<a>の title 属性の値として利用される)
  • 「メニューを保存」をクリック
  • register_nav_menus() に追加したロケーションが「テーマの場所」に追加されているので、プルダウンから選択して「保存」をクリック
  • 画像のファイル名を <img src=”…” /> の形で出力しリンク部分に画像を表示するため、wp_nav_menu() に ‘link_before’ と ‘link_after’ のパラメータを渡す。
<?php wp_nav_menu(array(
    'theme_location' => 'topcontent',
    'link_before' => '<img src="' . get_template_directory_uri() . '/images/',
    'link_after' => '" alt="*" />'
)); ?>

出力される <li> 要素などの ID またはクラスを確認して、画像のレイアウトを指定する。