WordPressのカスタムメニューを管理画面のメニューで設定する場合はどのような手順で設定していけばいいのか説明します。
メニュー項目を追加したり、メニューの並び替えや階層を持たせたり、メニューの位置を設定したりすることができるメニュー設定は、サイトに表示するメニューパターンをセットしておくことができるWordPressのテーマ機能として活躍します。
WordPressのカスタムメニューを設定する手順は人それぞれ異なりますが、私がいつもカスタムメニューを設定する手順を紹介しようと思います。
WordPressのカスタムメニューを設定する手順
一番はじめにWordPressの「カスタムメニュー」を設定する大まかな手順を説明するので、概要のような感覚で全体像を把握してください。
- WordPressの管理画面のメニューでメニュー設定を開く
- メニュー設定の表示オプションを把握する
- メニュー名を決める
- メニュー項目を設定する
- メニュー項目をメニュー構造に追加する
- 表示するメニュー位置を決める
上記の流れが、これから私たちがWordPressのカスタムメニューの設定をするための大まかな手順です。
使用テーマに複数のメニュー構造を設定したい場合でも、例えば「グローバルメニュー」「サイドメニュー」「フッターメニュー」「任意の場所のメニュー」など、メニュー構造を必要な数だけカスタムメニュー設定の手順を繰り返すことでWordPressのカスタムメニューを表示できます。
メニュー管理画面の表示オプションで設定項目を追加
WordPressでカスタムメニューの設定をする上で、まず覚えておきたいのがメニュー設定にある「表示オプション」で設定項目の追加ができるということです。
WordPressの外観からメニューを開くと、カスタムメニューの設定ができる「メニュー」画面が開きます。
開いたメニュー設定画面上に「表示オプション」があるので開いてみてください。
ボックス
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリー
- タグ
表示オプションのボックスは、カスタムメニューの設定でメニュー項目を追加するためのオプションです。
デフォルトでは、固定ページ、投稿、カスタムリンク、カテゴリーにチェックが入っているので、チェックがついた状態にしておきます。
チェックしていないとメニュー項目を追加する設定のときに必要なメニューが非表示になってしまい、「メニューが作れない」原因になってしまうので表示オプションの存在を覚えておいてください。
詳細メニュー設定を表示
- リンクターゲット
- タイトル属性
- CSSクラス
- 自分とリンク先の関係／間柄(FXN)
- 説明
カスタムメニュー設定の表示オプションで「詳細メニュー設定を表示」は、メニュー構造をカスタムする場合に必要な設定ボックスの追加ができる表示オプションです。
WordPressのカスタムメニューで設定するメニューのリンクを別タブで開くようにするメニューにしたい場合には、「リンクターゲット」にチェックを入れて追加しおきます。
CSSの知識がある方の場合は「CSSクラス」のオプションにもチェックを入れて追加おくといいです。
「CSSクラス」のオプションはカスタムメニューの設定をしたメニューリストをマークアップするliタグにclass属性を任意で追加することができます。
カスタムメニューの構造と項目を設定する
WordPressのメニュー設定画面でカスタムメニューの構造と項目を設定します。
サイトに表示するメニューを自分でWordPressのテーマ機能を使用してカスタムしながら設定ができるのですが、設定手順としてはメニューの構造を設定して、その構造の中にメニュー項目を設定する流れです。
これらを一つのカスタムメニューを設定する流れとして説明します。
メニュー構造でメニュー名を設定
メニュー設定画面で「メニュー構造」の下に「メニュー名」を入力するボックスがあるのでメニュー名を入力し「メニューを作成」で保存します。
ここで設定するメニュー名は、カスタムメニューの設定で複数のメニュー作成することを想定して、どのメニューが、サイトのどの位置に表示して使用するメニュー構造なのかを判断しやすくしておくと良いです。
また、メニューをすでに一つ以上作成してる場合は、作成済みのメニュー構造が表示しています。新しいメニュー構造を作りたい場合は、「新しいメニューを作成しましょう」をクリックして新規メニューでメニュー名を設定します。
メニュー項目の作成
メニュー名を設定した次は、WordPressのカスタムメニューの設定で「メニュー項目の作成」をします。
WordPressのカスタムメニュー設定画面の「メニュー項目を追加」の項目に以下の表示がされています。
- 固定ページ
- 投稿
- カテゴリー
- カスタムリンク
上の4項目を展開するとメニュー項目が表示されます。表示されない場合は、「固定ページ」「投稿ページ」「カテゴリー」それぞれのページを作成することでメニュー設定の「メニュー項目を追加」にメニュー項目として表示できます。
「カスタムリンク」は、カスタムリンクのセクションを開いて、 URL とリンク文字列を入力することでメニュー構造に追加する項目の作成ができます。
このとき表示オプションで「タグ」にチェックを入れるとメニュー項目の選択欄にタグも追加できます。
メニュー項目をメニュー構造に追加
メニュー項目の作成をしたことで、作成したメニュー項目を選んでメニュー構造に追加する設定ができるようになります。
メニュー項目をメニュー構造に追加していくには、「メニュー項目を追加」のセクションに表示されている固定ページ、投稿、カテゴリー、カスタムリンク、タグの中から、メニュー名を設定したメニュー構造に使用したいメニュー項目を展開します。
展開したメニュー項目がずらっと表示されます。表示されたメニュー項目にチェックを入れてから「メニューに追加」をクリックします。
そうすると、「メニューに追加」をクリックしたメニュー項目がメニュー構造の中に自動で移動するので「メニューを保存」で設定を更新してください。
また、メニュー項目をメニュー構造に追加するときに、例えば「投稿」からメニュー追加するとします。このとき「全て表示」に切り替えたり、投稿数が多い場合は探すのに時間がかかるので、「検索」に切り替えて絞り込んでしまった方がメニュー項目の追加する設定がスムーズに進みます。
カスタムメニューでメニュー位置の設定
メニュー項目をメニュー構造に追加できると、一つのカスタムメニュー構造がメニュー設定画面で完成します。
次の手順は完成したカスタムメニューを使用テーマに表示するために位置を設定します。
グローバルメニューにするメニュー位置を設定する手順と、サイドメニューとフッターメニューのメニュー位置を設定する手順を説明します
サイトに表示するメニュー位置と位置設定する位置名は使用してるテーマによって異なります。
その理由はテーマ作成者さんが、そのテーマでどのようにメニューを使用するかや、コンテンツの組み立て方で違うからです。
グローバルメニュー
グローバルメニューはサイトの主要なメニューになるメインメニューです。そのためサイトのヘッダー配置にすることが多く、インフォメーションセンター的なメニューにするのが望ましいです。
メニュー項目をメニュー構造に追加して作成したカスタムメニューを開いた状態で「メニュー設定」画面で表示している「メニューの位置」をみてください。
「メイン」とか「トップメニュー」、「ヘッダーメニュー」などテーマにより位置名は違いますが、だいたいこれらの位置名がグローバルメニューとしてヘッダーでメニュー表示できる設定位置です。
この位置にチェックを入れて「メニューを保存」すると、設定したカスタムメニューがヘッダー位置に配置され表示できます。
サイドメニュー
WordPressのカスタムメニューを設定したメニュー構造を、使用中のテーマのサイドに表示する設定は、ウィジェット機能を使います。
設定する手順は、WordPressの管理画面からウィジェットを開き、開いたウィジェット画面の「利用できるウィジェット」から「ナビゲーションメニュー」でサイドバーを選び追加します。
使用テーマで、もしカスタムメニュー設定の画面の「メニュー位置」にサイドバーに設定できる位置名がある場合には、メニュー位置で設定することもできます。
フッターメニュー
フッターメニューもサイドメニューと同じ手順でWordPressの管理画面からウィジェット機能を開き設定します。
「利用できるウィジェット」から「ナビゲーションメニュー」でフッターを選び追加します。
使用テーマで、もしカスタムメニュー設定の画面の「メニュー位置」にフッターに設定できる位置名がある場合には、メニュー位置で設定することができます。
カスタムメニューに階層を設定する操作
カスタムメニューの位置を設定し、使用テーマに表示することができたメニューに階層を設定する場合の操作手順も説明します。
WordPressのカスタムメニューの設定画面でメニュー項目の階層を操作できるのは、「子階層」や「孫階層」が設定できる副項目としての「サブメニュー」の設定です。
階層を下げてサブメニューの子階層を作る
カスタムメニューの設定画面で、設定したメニュー項目に子階層を作りサブメニューにするには、メイン階層を基準にマウスで少し右に移動してください。
移動して目的のメニュー項目が右にズレたら「変更を保存」で設定を反映させます。
変更を保存した階層の設定は、すぐにサイトに表示してるカスタムメニューでも反映しているので確認してみてください。
階層を二つ下げてサブメニューの孫階層を作る
設定したメニュー項目を孫階層にしてサブメニューにするには、メイン階層を基準にマウスで少し右に移動します。そしてさらにもう一回右にマウスで右に移動します。
これで階層を二つ下げることができます。
このとき、メイン階層を基準に二つ下げることはできません。一つ下げた子階層があった下で、二つ下げた孫階層のサブメニューを設定することができます。
階層の移動ができたら「変更を保存」をして設定を更新するとサイトにも反映できます。
まとめ
WordPressのカスタムメニューの設定の手順を説明してきましたが、WordPressの管理画面だけでメニューのカスタムが簡単にできるので、設定手順を覚えてしまえば、あとは必要なメニュー項目をセットしておき、入れ替えればいいだけの使い回しが可能です。
またメニュー位置の設定で配置したい場所の設定位置がない場合は、メニュー表示できるwp_nav_menuを定義して追加することもできるのですが、WordPressのカスタムメニューに使用するテンプレートタグ関係は、WordPressにカスタムメニューを表示するための機能追加方法で詳しく記事にしているので参考にしてください。
