カスタムメニューを使えるようにする

カスタムメニューとは、任意の投稿やカテゴリー、固定ページなどを選び、オリジナルのメニューをツリー構造で表示させるための機能です。

カスタムメニューは使用しているテーマによってはすでに用意されていることもあります。しかし、オリジナルテーマを作成した場合や、対応していないテーマで使いたい場合には「functions.php」で機能を追加しなければなりません。

カスタムメニューの確認と作成

利用しているテーマに、すでにカスタムメニューが用意されているかの確認は、管理メニューに「外観 ＞ メニュー」という項目があるかで確認します。外観の項目のなかに「メニュー」があれば、すでにカスタムメニューが用意されています。

管理メニューから「外観 ＞ メニュー」と進むと次のような画面が表示されるので、任意のメニュー名を入力して「メニューを作成」をクリックすると新しいメニューが作成されます。（※表示される内容は使用しているテーマやWorsPressのバージョンなどによって異なります。）

メニューを作成したら、「メニュー項目を追加」のなかから追加したい項目を選び、「メニューに追加」をクリックします。この作業を繰り返し、表示するメニューが決まったら、「メニュー設定」からメニューの位置を選び、「メニューを保存」をクリックするとメニューが作成されます。

カスタムメニューを使えるようにする

管理メニューにカスタムメニューの項目がなく、上記の設定画面が表示できない場合は「functions.php」を編集して、機能を追加する必要があります。

functions.phpには次のように記述してください。

function menu_setup() {  
  register_nav_menus( array(
    'global' => 'グローバルメニュー',
    'side'   => 'サイドメニュー',
    'footer' => 'フッターメニュー',
  ) );
}
add_action( 'after_setup_theme', 'menu_setup' );

「’global’ => ‘グローバルメニュー’,」「’side’ => ‘サイドメニュー’,」の部分は、「’識別子’=>’メニューの名前’,」で任意のメニュー名をつけることができます。また、必要な数だけいくつでも作ることができます。

functions.phpに上記の内容を記述すると、管理メニューの「外観 ＞ メニュー」からカスタムメニューの設定ができるようになります。

カスタムメニューを表示する

作成したカスタムメニューを表示するには、wp_nav_menu関数を使います。

たとえば、カスタムメニューの位置を先述のfunctions.phpで作った「サイドメニュー」にした場合には、メニューを表示したい位置に次のように記入します。

<?php
wp_nav_menu( array(
  'theme_location' => 'side', //メニュー位置の識別子を指定
));
?>

wp_nav_menu関数ではパラメータとして連想配列を渡すことで、出力内容をカスタマイズすることができます。

指定できるパラメータには、主に次のようなものがあります。

たとえば、

• グローバルメニュー（global）に対応するメニュー
• メニューを囲むコンテナは「div」
• コンテナ（div）に、クラス名「menu-container」を追加
• メニューのul要素に、クラス名「menu-ul」を追加

このような条件のときは、次のようなコードを記述します。

<?php
wp_nav_menu( array(
  'theme_location' => 'global',
  'container' => 'div',
  'container_class' => 'menu-container',
  'menu_class' => 'menu-ul',
));
?>