【WordPress・カスタムメニュー】表示する位置・出力をカスタマイズ

WordPressには、管理画面からメニューの項目や表示する場所を設定できるカスタムメニューの機能があります。

今回は、そのカスタムメニューの表示する位置と出力をカスタマイズするソースコードの例です。

カスタムメニューを表示する位置と出力をカスタマイズする例

メニューの位置を登録|register_nav_menus()

まずは、カスタムメニュー有効にして、メニューを表示する位置を登録するために、以下のソースコードの例をfunctions.phpに記述します。

register_nav_menus( array(
   'global' => 'グローバル',
   'side'   => 'サイド',
   'footer' => 'フッター'
) );

register_nav_menus関数では、カスタムメニュー有効にして、メニューを表示する位置を複数、登録できます。

メニューの位置を登録するには、引数にメニューの情報を連想配列で指定します。その配列の要素はメニュー位置のスラッグ名(キー)と、メニュー位置の説明(値)を指定します。

登録したメニューの位置を確認

すでに作成したメニューがある場合には、上記ソースコードによって登録したメニューの位置を、以下の方法でWordPress管理画面上から確認できます。

  1. 管理画面のメニュー「外観」内の「メニュー」を選択し、メニュー設定画面へ移動します。
    管理画面のメニュー「外観」内の「メニュー」を表示した画像
    管理画面のメニュー「外観」内の「メニュー」を選択します。
  2. 右カラムに「メニューの位置」が追加され登録したメニューの位置を確認できます。
    「メニューを編集」タブ内の右カラムの画像
    メニュー設定画面の「メニューを編集」タブ内の右カラム。register_nav_menus()によって「メニューの位置」が追加されます。

メニューをまだ作成していない場合には、以下の手順で新しくメニューを作成します。

メニューを作成し項目と位置を指定

メニューを作成し項目と位置を指定する手順は以下となります。

  1. 管理画面のメニュー「外観」内の「メニュー」を選択し、メニュー設定画面へ移動します。
  2. 右カラムで、メニューに名前をつけ「メニューを作成」をクリックします。
    メニュー設定画面の右カラムの画像
    メニュー設定画面の右カラム。メニュー名をつけて、「メニューを作成」をクリックします。
  3. 左カラムにある「固定ページ」「投稿」「カスタムリンク」「カテゴリー」の中から、それぞれ追加したいメニュー項目を選択して「メニューに追加」をクリックします。すると右カラムに追加したメニュー項目が表示されます。
    メニュー設定画面の左カラムの画像
    メニュー設定画面の左カラム。追加するメニュー項目を選択し「メニューに追加」をクリックします。
  4. 右カラムの下部にある「メニューの位置」からメニューを表示する位置を選択し「メニュー保存」をクリックします。
    メニュー設定画面の右カラム下部の画像
    メニュー設定画面の右カラム下部。メニューを表示する位置を選択し「メニュー保存」をクリックします。
 

メニューの位置の管理

メニュー設定画面でメニューを作成すると、「位置の管理」タブが追加されます。そのタブ内では、「作成したメニュー」と「登録したメニューの位置」の組み合わせを変更することができます。

「メニュー」設定画面内の「位置の管理」タブ画面
「メニュー」設定画面内の「位置の管理」タブ画面。「作成したメニュー」と「登録したメニューの位置」の組み合わせを変更できます。

カスタムメニューを出力し表示|wp_nav_menu()

カスタムメニューを出力し表示させるには、wp_nav_menu関数を使用します。

以下は、上記で設定したメニュー位置の「グローバル」を出力する例となり、メニューを表示させたい場所に記述します。

<?php
// メニューの設定を配列で指定
$args = array(
	// register_nav_menu関数で、登録したメニューのスラッグ名を指定。初期値はなし
	'theme_location' => 'global',
	// ul要素を囲むかどうか。使えるタグはdiv、nav。囲まない場合はfalseを指定。初期値はdiv
	'container'      => false,
	// メニューのリンク前に表示するテキスト。初期値はなし
	'link_before'    => '<span>',
	// メニューのリンク後に表示するテキスト。初期値はなし
	'link_after'     => '</span>',
	// メニュー項目を囲むタグ。メニュー項目を囲むタグをなしにする場合でも、パラメータとして %3$s の記述は必須。
	'items_wrap'     =>'<ul>%3$s</ul>'
 );
// 登録されたメニューがあれば表示
if ( has_nav_menu( 'global' )){
	wp_nav_menu( $args ); 
}; 
?>

wp_nav_menu関数では、メニューの出力をパラメータでカスタマイズできます。指定できるパラメータは他にもありますので、詳しくは以下のリンクを参考にしてみてください。

テンプレートタグ/wp nav menu - WordPress Codex 日本語版

以上がカスタムメニューを表示する位置と、出力をカスタマイズする例となります。

また、作成したカスタムメニューのliタグには、id・classの値がデフォルトでいくつか指定してありますが、その値が多いと感じる場合があるかもしれません。

そのような場合に、id・classの値を削除・追加して、シンプルにカスタマイズすることも出来ます。詳しくは以下のリンク先を参考にしてみてください。

参照サイト・書籍

コメントまたはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。Twitterで返信する場合はコチラから。