Web Design Leaves

★最新の情報は以下のページをご覧ください。
WordPress ナビゲーションメニュー（カスタムメニュー）
2019年3月31日

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

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

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

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() でウィジェット機能を有効にする方法
   • ウィジェットの設定画面「外観」→「ウィジェット」で「利用できるウィジェット」の中から「カスタムメニー」を「サイドバー１」にドラッグ＆ドロップ
   • 「メニューはまだ作成されていません。作成する」と表示されるので「作成する」をクリック
   • カスタムメニューの設定画面（「外観」→「メニュー」）にジャンプするのでメニューを作成
   • dynamic_sidebar() を使ってサイドバーにカスタムメニューを出力する

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

wp_nav_menu(パラメータの配列)

戻り値：通常はなし（パラメータとして「'echo'=>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 またはクラスを確認して、画像のレイアウトを指定する。