カスタムメニューを使えるようにする
カスタムメニューとは、任意の投稿やカテゴリー、固定ページなどを選び、オリジナルのメニューをツリー構造で表示させるための機能です。
カスタムメニューは使用しているテーマによってはすでに用意されていることもあります。しかし、オリジナルテーマを作成した場合や、対応していないテーマで使いたい場合には「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関数ではパラメータとして連想配列を渡すことで、出力内容をカスタマイズすることができます。
指定できるパラメータには、主に次のようなものがあります。
キー | 内容 |
---|---|
theme_location | メニュー位置の名前 |
menu_class | メニューを構成するul要素に付けるクラス名 |
menu_ id | メニューを構成するul要素に付けるID |
container | メニューを囲むコンテナの要素名(「div」か「nav」またはfalseを指定)※falseの場合は、メニューをコンテナで囲まない |
container_class | コンテナ要素に付けるクラス名 |
container_id | コンテナ要素に付けるID |
before | リンクテキストの前に挿入するテキスト |
after | リンクテキストの後に挿入するテキスト |
たとえば、
- グローバルメニュー(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',
));
?>