【WordPress】カスタムメニューの作り方と使い方


カスタムメニューとは、固定ページや投稿ページなどに、自由にナビゲーションを追加できるWordPressの機能のこと。

さらに1つだけでなく、複数作成できるので、サイドバーなど、いろんな場所にメニューを追加できます。

以下でカスタムメニューの作り方と使い方をご説明します。

カスタムメニューの作り方

カスタムメニューを使うには、ある関数をfunctions.phpに記述する必要があります。

その関数とは、「register_nav_menu関数」または「register_nav_menus関数」。

カスタムメニューを1つだけ使う

まず、register_nav_menu関数から紹介します。

この関数は、テーマにカスタムメニューを1つ登録する場合に使います。

パラメータとして、「メニューの位置」と「メニューの説明」の2つを取ります。

register_nav_menu('メニューの位置','メニューの説明');
パラメータとは?

プログラミングの結果に影響を与える値のこと。引数。

メニューの位置』は、URLのスラッグのようなもの。

また、『メニューの説明』は、カスタムメニューの名前で、「メニューの設定画面」に表示されます。日本語を使うことも可能。

functions.phpに記述する

たとえば、位置が「main-menu」で、説明が「メインメニュー」のカスタムメニューを使うには、テーマのfunctions.phpに以下のコードを記述します。

// カスタムメニューを設定
function add_custom_menu(){
  register_nav_menu('main-menu','メインメニュー');
}
add_action('after_setup_theme','add_custom_menu');

register_nav_menu関数の処理を「add_custom_menu」という関数でまとめます。※「add_custom_menu」の関数名は、任意に変更可能。その場合、上記の2行目だけでなく、5行目も変更してください。

そして、add_action関数を使って、after_setup_themeアクションフックのタイミングで実行するようにします。

アクションフックとは?

アクションフックとは、プログラムが実行される「きっかけ」のこと。

上記のafter_setup_themeの場合、テーマのセットアップ時に実行されます

複数のカスタムメニューを使う

カスタムメニューを使うために記述する、もう1つの関数が「register_nav_menus関数」。

この関数は、複数のカスタムメニューをまとめて登録する場合に使います。

グローバル・ナビゲーションのほかに、サブ・ナビゲーションをサイドバーに表示する場合など、複数のカスタムメニューを使い分けたいなら、こちらの関数を使います。

関数のパラメータとして、カスタムメニューの位置と説明からなる『連想配列:array(A =>B)』を渡します。

  register_nav_menus(array(
    '位置A' => '説明A',
    '位置B' => '説明B',
    '位置C' => '説明C'
  ));

functions.phpに記述

たとえば、「メインメニュー」だけでなく、「サブメニュー」のカスタムメニューを作成したい場合は、テーマのfunctions.phpに次のようなコードを追加します。

// カスタムメニューを設定
function add_custom_menu(){
  register_nav_menus(array(
    'main-menu' => 'メインメニュー',
    'sub-menu' => 'サブメニュー'
  ));
}
add_action('after_setup_theme','add_custom_menu');

僕が追加しているのは次の5つ

僕が作成するWebサイトには、利用の可否を問わず、以下の5個のカスタムメニューを登録しています。

ナビ名 内容
グローバル・ナビ Webサイトの全てのページに共通して設置された案内リンク。
ローカル・ナビ 固定ページや投稿ページ、カテゴリーページごとの設置された案内リンク。通常、サイドバー上部に設置。
トップ・ナビ トップページのサイドバー上部などに設置する案内リンク。
ユーティリティ
・ナビ
トップページやサイトマップ、運営者紹介などのサイトの利便性を高めために設置された案内リンク。通常、ヘッダー右上に設置。
フッター・ナビ フッターのコピーライトの上に設置するナビゲーション。基本、上記のユーティリティ・ナビと同じような案内リンク。

そして、functions.phpの記述は、以下のようにしています。


// カスタムメニューを設定
function add_custom_menu(){
  register_nav_menus(array(
    'global-navi' => 'グローバルナビ',   
    'local-navi' => 'ローカルナビ',
    'top-navi' => 'トップナビ',
    'utility-navi' => 'ユーティリティナビ',
    'footer-navi' => 'フッターナビ'
));
}
add_action('after_setup_theme','add_custom_menu');
スポンサーリンク

カスタムメニューの使い方

公開しているWebサイトにカスタムメニューを表示するには、WordPressの「wp_nav_menu関数」を使います。

使い方の手順は、2つ。

  1. メニューで選択
  2. コードをテンプレートファイルに記述

①メニューで選択

WordPress編集画面の左サイドバーより、「外観>メニュー」と進むと、メニュー編集画面になります。

functions.phpに、「register_nev_menu関数」または「register_nav_menus関数」を記述すると、下の画像のようにチェック項目が出現します。下の画像は、メインメニューとサブメニューを登録した場合です。

カスタムメニューとして登録したいメニューを開いて、チェックを入れて、保存をクリック。

②コードをテンプレートファイルに記述

テンプレートファイル内で、カスタムメニューを表示させたい場所に、コードを追加します。

そして、カスタムメニューを表示させるために、使う関数が「wp_nav_menu」。

パラメータとして、連想配列(array(A => B))を渡し、メニューの表示方法等を指定します。

<?php 
wp_nav_menu(array( 
  'theme_location' => 'メニューの位置'
)); 
?>

カスタムメニューによる「HTMLの表示」

上記のように、wp_nav_menu関数を使って、出力すると、『HTML』には以下のように表示されます。

リストは、上から「固定ページ」、「投稿ページ」、「カスタムリンク」、「カテゴリー」のメニューリンクを書いています。

<div class="menu-メニュー名-container">
  <ul id="menu-メニュー名" class="menu">    
    <li class="menu-item-メニュー番号" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-メニュー番号">固定ページ</li>
    <li class="menu-item-メニュー番号" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-メニュー番号">投稿ページ</li>
    <li class="menu-item-メニュー番号" class="menu-item menu-item-type-post_type menu-item-object-custom menu-item-メニュー番号">カスタムリンク</li>
    <li class="menu-item-メニュー番号" class="menu-item menu-item-type-post_taxonomy menu-item-object-category menu-item-メニュー番号">カテゴリー</li>
  </ul>
</div>
メニュー名とは?

WordPressの編集画面の左サイドバーより、外観 > メニューと進み、メニュー画面を開きます。

そして、新規メニューを作成時に、「メニュー名」の蘭に入力したもの。日本語も可能。

それぞれの要素に、class属性やID属性が勝手に設定され、それぞれのliタグのclass属性が微妙に違うことがわかります。
※上記のliタグのクラス属性は、一例です。条件によって、class属性はさらに追加されます。

この個々のliタグに割り振られた属性を利用すれば、CSSで個々の文字色を変更できますよ。

スポンサーリンク

パラメータで出力をカスタマイズする

パラメータの連想配列に次のような要素を指定して、カスタムメニューの出力方法をカスタマイズできます。

「初期値」が設定されているパラメータは、値を指定することで、変更できます。たとえば、containerをnavに指定すると、初期値のdiv要素から、nav要素に変更されます。

パラメータキー 内容 初期値
theme_location メニューの位置の名前。この要素を指定する場合は、「menu」の要素は指定しない。 なし
container メニューを囲むコンテナの要素名を「div」か「nav」の文字列で指定。
※false(’container’ => false)を指定するとメニューを囲まない
div
container_class コンテナの要素に付けるクラス名 menu-メニュー名-container
container_id コンテナの要素に付けるID名 なし
menu_class メニューのul要素に付けるクラス名 menu
menu_id メニューのul要素に付けるID名 menu-メニュー名
before リンクテキストののテキスト なし
after リンクテキストののテキスト なし
link_before リンクののテキスト。リンク内テキストに追加されるため、ハイライトされる なし
link_after リンクののテキスト。リンク内テキストに追加されるため、ハイライトされる なし
『theme_location』のパラメータに関して、事前に register_nav_menu() で登録されている必要があります。

わかりやすく画像で説明すると、次のようになります。

もっと複雑なこともできます。以下のサイトを参照。

⇒WORDPRESS Codex『テンプレートタグ/wp nav menu』

使用例

たとえば、以下のように、メニューを出力したいとします。

  • main-menu」という『位置』に対応するメニューを出力
  • メニューをdiv要素ではなく「nav要素」で囲む
  • nav要素に「custom-navi」というクラスを付ける
  • nav要素に「main-navi」というIDを付ける
  • メニューのul要素に「custom-nav」というクラスを付ける
  • メニューのul要素に「main-nav」というIDを付ける
  • リストの前に「>」を付ける
  • リストのリンクの最後に「へ」を付ける
<?php 
wp_nav_menu(array( 
  'theme_location' => 'main-menu',
  'container' => 'nav',
  'container_class' => 'custom-navi',
  'container_id' => 'main-navi',
  'menu_class' => 'custom-nav',
  'menu_id' => 'main-nav',
  'before' => '>',
  'link_after' => 'へ'
)); 
?>

beforeに「>」、link_afterに「へ」を付けると、下のようになります。

実は、functions.phpに登録不要?

実は、functions.phpに登録しなくても、メニューを表示させることはできます。

以下のように、パラメータに『menu』を指定し、表示させたいメニューの『メニュー名』を連想配列で記述するだけでOK。

<?php 
wp_nav_menu(array( 
  'menu' => 'メニュー名'
)); 
?>
パラメータキー 内容 初期値
menu メニューを指定。通常は、メニュー名で指定が、メニューid, slugでも可能。 なし

カスタマイズの方法も上記と同じ。

パラメータに、『menu』を指定する場合、『theme_location』は指定できません。逆も同様で、どちらか一方だけしか指定できません。

たとえば、「グローバルナビ」というメニュー名で作った場合、それを出力するには、テーマのテンプレートファイルの中で、メニューを出力したい位置に、以下のようなコードを入れます。

<?php 
wp_nav_menu(array(
  'menu' => 'グローバルナビ'
)); 
?>
スポンサーリンク
ページ先頭へ