今回はWordPress管理画面のメニュー画面の設定方法〜操作方法までを解説していきたいと思います！

下記の写真の様に、”外観”を押して、”メニュー”画面が出てきます。

こちらはWordPress有料テンプレートテーマの”AFFINGER”というテーマを使用している為、元々標準機能でこちらのメニュー画面は出てきます。

ですが、独自テーマ（以後オリジナルテーマと記載）でこちらのメニュー画面を使用する場合、少しカスタムを行わないと使用する事が出来ません。

その部分について少しだけ解説します。

カスタムメニュー使用の宣言

まずはメニューを上の写真の様に”外観”項目に追加する為（WordPress管理画面より操作可能にする為）に、functions.phpに宣言コードを追記しなくてはなりません。

functions.php

function register_my_menus()
{
register_nav_menus(
array(
'global' => 'ヘッダーメニュー',
'drawer' => 'ドロワーメニュー',
'footer-nav' => 'フッターメニュー',
)
);
}
add_action('init', 'register_my_menus');

これらのコードを追記する事で、”外観”⇨”メニュー”項目が追記される様になります。

array（連想配列）で示している

array(
'global' => 'ヘッダーメニュー',　<!-- /任意で設定可能 -->
'drawer' => 'ドロワーメニュー',　<!-- /任意で設定可能 -->
'footer-nav' => 'フッターメニュー',　<!-- /任意で設定可能 -->
)

については、自分で設定可能です。
例えば下記の様に自分が分かり易い表現を行えば問題ありません。

'header' => 'ヘッダー'

そしてarrayで設定したメニュー名が下記のメニュー位置の部分に表示されます。

下記のメニュー位置は既存で設定している為、上記で設定したもの以外にも色々なカスタムが出来る様に連想配列にて設定しています。

WordPressのCodexにも詳細が記載されているのでリンクを貼り付けておきます。

カスタムメニューを表示する為の実装方法

カスタムメニューを使用しますという宣言を行った後に、カスタムメニューを動的にする必要があります。

その動的にする為に必要な実装方法を下記に記載します。

記載場所については、表示したい箇所に記載する事になります。

今回はヘッダー部分のメニューを作成したいと思うので、header.phpに記載していきたいと思います。

header.php

<header>
<nav>
<?php
wp_nav_menu(
array(
'theme_location' => 'global', //この部分を記載しないと動的になりません  
)
);
?>
</nav>
</header>

確実にすべきなのは、theme_location が上記の functions.php で指定したメニューの名称と一致するようにする、という点だけです。ここで言う「名前」とは、「ヘッダーメニュー」という日本語の部分ではなくて、globalという部分です。header-menu はコードが理解できる名前で、「ヘッダーメニュー」は管理画面で目にする人間が理解できる方のものです。　引用元　”WordPress日本語版Codex”

上記 引用文はWordPress日本語版Codexより引用したものになります。

上記のコードを記載する事で、動的に表示する事が出来る様になります。

ではこれで、動的に表示する為の準備が整ったので、”動的に表示”という事がどういう事なのかを写真を確認しながら見ていきましょう。

先ほどfunction.phpとheader.phpにカスタムメニュー使用の宣言、カスタムメニューを表示する為の実装を行いました。

それらを行う事で、上の写真のヘッダーがWordPressの管理画面より簡単に設定する事が出来ます。

設定方法

①　”新しいメニューを作成しましょう”を選択
②　メニュー名の部分にメニュー名を記載（globalメニュー等）
③　メニューのどこに表示するかチェック
　　※functions.phpに記載したメニューのみが表示されます
④　メニュー項目より、追加したいページをメニューへ追加

それでは一つずつ実施していきます！

①　”新しいメニューを作成しましょう”を選択

”新しいメニューを作成しましょう”を選択すると、メニュー項目が作成出来ます。

②　メニュー名の部分にメニュー名を記載（globalメニュー等）

メニュー名はglobalメニューとしておきましょう。

③　メニューのどこに表示するかチェック

ヘッダー部分に表示したいので、ヘッダーメニューをチェックしましょう。

④　メニュー項目より、追加したいページをメニューへ追加

下記写真の通り、追加したい項目を追加する。
今回のケースでは、固定ページより下記の項目をチェックして表示させていきます。

①お問い合わせ、プログラミング、プロフィール、ホームにチェックを入れてメニュー項目を表示させる。

②メニューに追加を選択

下の写真では固定ページ内に既に項目が追加されていますが、この部分は固定ページの新規作成が必要となります。

一応補足で下記に固定ページ作成方法も追記しておきます。

固定ページ追加方法

固定ページの新規追加を選択して固定ページを作成します。
もう既に新規追加を行い、各固定ページを作成しています。
固定ページと投稿の違いが分からない方は過去に僕がプレゼント企画でお渡しした資料を確認してみて下さい。

新規追加を行う事で、上の写真固定ページの部分に項目が追加されます。

メニューに追加を押すと、下の写真の様にメニュー構造部分にチェックした項目が反映されます。

ドラッグ&ドロップを行い、表示順番の変更も可能です。
更に固定ページでは下写真の様に親子関係を持たす事も可能なので、簡単にカスタマイズする事が出来ます。

下の写真の様に最終的に表示順番を確定させて、ヘッダーメニューにチェックを行い、メニュー保存を行う。

これらを行い、目標物としてあげていたヘッダーにCSSを修正する事で下の完成版のヘッダーへ変更する事が出来ます。

また、フッター部分にメニューを追加したい時は下記の様に記載したコードをfooter.phpの表示したい箇所に記載すれば同じ様に実装は可能です。

<?php
wp_nav_menu(
array(
'theme_location' => 'global', //この部分を記載しないと動的になりません  
)
);
?>

WordPress管理画面のメニュー画面の設定方法〜操作方法については以上となります。

ご覧いただきありがとうございました！

感想ツイートいただけると嬉しいです！

よろしくお願いします！