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

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

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

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

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

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

例では、グローバル、サイド、フッターという3つのメニューの位置を登録します。

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

register_nav_menus()では、メニューの位置を連想配列で登録し、カスタムメニューを有効にします。

メニューの位置を登録する連想配列のキーにはメニュー位置のスラッグ名を指定し、値にはメニュー位置の表示名を指定します。

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

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

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

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

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

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

手順内では、上記ソースコードで追加したメニューの位置「グローバル」へ、新規メニューを設定しています。

  1. 管理画面のメニュー「外観」>「メニュー」を選択し、メニュー画面へ移動します。
  2. 右カラムに新規メニューを作成する項目があるので、その項目でメニューに名前をつけ「メニューを作成」をクリックします。
    メニュー設定画面の右カラムの画像
    メニュー画面内の右カラム。メニュー名をつけて、「メニューを作成」をクリックします。
  3. 左カラムにある「固定ページ」「投稿」「カスタムリンク」「カテゴリー」の中から、それぞれ追加したいメニュー項目を選択して「メニューに追加」をクリックします。
    メニュー設定画面の左カラムの画像
    メニュー画面内の左カラム。追加するメニュー項目を選択し「メニューに追加」をクリックします。
  4. 右カラム上部にある「メニュー構造」に、追加したメニュー項目が表示されるので確認します。また、メニューの順序は、ドラッグ・アンド・ドロップで入れ替えることが可能です。
    メニュー設定画面の右カラムにあるメニュー構造画面の画像
    メニュー画面内の右カラム上部。「メニュー構造」に追加したメニューが表示されます。
  5. 右カラム下部にある「メニューの位置」から、メニューを表示する位置を選択し「メニュー保存」をクリックします。
    メニュー設定画面の右カラム下部の画像
    メニュー設定画面の右カラム下部。メニューを表示する位置を選択し「メニュー保存」をクリックします。

メニューを追加・編集・削除する場合

また、カスタムメニューを追加・編集・削除する方法については、以下のリンク先を参考にしてみてください。

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

最後に、前述の手順でメニュー位置「グローバル」に設定をしたメニューを出力します。

以下、ソースコードの例となりメニューを表示させたい箇所に記述します。

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

wp_nav_menu()では、メニューの出力をパラメータでカスタマイズし表示できます。指定できるパラメータは上記以外にもあるので、詳しくは文末の参考サイト内を参考にしてみてください。

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

カスタムメニューのid・classの値を削除・追加

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

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

参考サイトなど

コメント投稿またはTwitterで返信

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

また、コメントは承認制となります。