【WordPress】カスタムメニューを表示する位置の追加・出力をカスタマイズする方法
WordPressではサイトにあるメニューを、管理画面から設定できるカスタムメニューの機能があります。
今回は、そのカスタムメニューを表示する位置を追加して、出力をカスタマイズする方法となります。
【WordPress】カスタムメニューを表示する位置の追加・出力をカスタマイズする方法
メニューの位置を追加｜register_nav_menus()
まずは、カスタムメニュー有効にして、メニューを表示する位置を追加するために、以下のソースコードをfunctions.phpに記述します。
例では、グローバル、サイド、フッターという3つのメニューの位置を登録します。
register_nav_menus( array(
'global' => 'グローバル',
'side' => 'サイド',
'footer' => 'フッター'
) );
register_nav_menus()では、メニューの位置を連想配列で登録し、カスタムメニューを有効にします。
メニューの位置を登録する連想配列のキーにはメニュー位置のスラッグ名を指定し、値にはメニュー位置の表示名を指定します。
追加したメニューの位置を確認
すでに作成したメニューがある場合には、上記ソースコードによって登録したメニューの位置を、以下の方法でWordPress管理画面上から確認できます。
- 管理画面のメニュー「外観」>「メニュー」を選択し、メニュー画面へ移動します。
- メニュー画面内の「メニューを編集」タブ内の右カラムに「メニューの位置」が追加され、追加したメニューの位置を確認できます。
メニュー設定画面の「メニューを編集」タブ内の右カラム。register_nav_menus()によって「メニューの位置」が追加されます。
メニューをまだ作成していない場合には、以下の手順で新しくメニューを作成します。
新規メニューを作成し項目と位置を設定
以下は、新規メニューを作成し項目とメニュー位置を設定する手順となります。
手順内では、上記ソースコードで追加したメニューの位置「グローバル」へ、新規メニューを設定しています。
- 管理画面のメニュー「外観」>「メニュー」を選択し、メニュー画面へ移動します。
- 右カラムに新規メニューを作成する項目があるので、その項目でメニューに名前をつけ「メニューを作成」をクリックします。
メニュー画面内の右カラム。メニュー名をつけて、「メニューを作成」をクリックします。 - 左カラムにある「固定ページ」「投稿」「カスタムリンク」「カテゴリー」の中から、それぞれ追加したいメニュー項目を選択して「メニューに追加」をクリックします。
メニュー画面内の左カラム。追加するメニュー項目を選択し「メニューに追加」をクリックします。 - 右カラム上部にある「メニュー構造」に、追加したメニュー項目が表示されるので確認します。また、メニューの順序は、ドラッグ・アンド・ドロップで入れ替えることが可能です。
メニュー画面内の右カラム上部。「メニュー構造」に追加したメニューが表示されます。 - 右カラム下部にある「メニューの位置」から、メニューを表示する位置を選択し「メニュー保存」をクリックします。
メニュー設定画面の右カラム下部。メニューを表示する位置を選択し「メニュー保存」をクリックします。
メニューを追加・編集・削除する場合
カスタムメニューを追加・編集・削除する方法の詳細については、以下のリンク先を参考にしてみてください。
カスタムメニューを出力｜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の値を削除・追加して、シンプルにカスタマイズすることも出来ます。詳しくは以下のリンク先を参考にしてみてください。
