ホームページ上でユーザーを正しいページに誘導する為に必要不可欠なナビゲーションメニューをWordPressで設定する方法をご紹介します。

ナビゲーションメニューとは

ナビゲーションメニューとはサイト内に並んでいるユーザーを適切なページに誘導するためのメニューのことです。

具体例として当サイトの場合は2箇所使用しており、ヘッダーに1箇所、フッターに1箇所配置しております。 ※下記はヘッダー内のメニュー

具体例として当サイトの場合は2箇所使用しており、ヘッダーに1箇所、フッターに1箇所配置しております

WordPressはこういったメニューをプログラムなどを使わずに管理画面上から簡単に設定する機能が備わっています。次の文章で早速設定する方法をみて行きましょう。

WordPressでナビゲーションメニューが存在するか確認

ナビゲーションメニューの設定に入る前にまずはメニューが表示されているか確認してみましょう。

WordPressへログインし、サイドバーの外観にカーソルを置くとサブメニュー内に「メニュー」が表示されます。

WordPressへログインし、サイドバーの外観にカーソルを置くとサブメニューが表示されます。

デフォルトの場合カスタマイズ項目の下に表示されるはずです。通常であれば表示されているはずですが、自作テンプレートなどの場合は表示されない場合があります。表示されていない場合はナビゲーションメニューが登録されていないので登録しましょう。

ナビゲーションメニューを設定する方法

メニューの文字が表示されている場合はクリックしてみましょう。

メニューの文字が表示されている場合はクリックしてみましょう。

ナビゲーションメニューを設定する画面が表示されます。既にメニューが表示されているかも知れませんが、今回は練習をかねて新しく作ってみます。

新規メニューを追加

新規メニューをクリックすると新規メニューを登録する画面が表示されます。

新規メニューをクリックすると新規メニューを登録する画面が表示されます

メニュー名を決めて「メニューを作成」ボタンをクリックします。ここで注意したいのが今後メニューを複数管理する可能性があるので分かりやすい名前をつけておきましょう。似たような名前をつけてしまうと後で分からなくなってしまう可能性があります。

作成したメニューに項目を追加

早速作りたてのメニューに項目をつけて行きましょう。

早速作りたてのメニューに項目をつけて行きましょう

基本として左のメニューから表示する内容にチェックを入れて「メニューに追加」ボタンを押すことで項目を追加できます。追加した項目は右のメニュー構造に表示されるので合わせて確認を行います。

カスタムリンクとは?

固定ページや、投稿ページ、カテゴリーなどはそれぞれのページが表示されますが、その他にカスタムリンクなるものがあります。

固定ページや、投稿ページ、カテゴリーなどはそれぞれのページが表示されますが、その他にカスタムリンクなるものがあります

このカスタムリンクとは自由にリンクを作れる機能を指します。URLは表示したいページのURL、リンク文字は表示したい文字になります。

メニューの項目を削除

追加した項目で不要になった場合は項目を削除することもできます。

追加した項目で不要になった場合は項目を削除することもできます

項目の右端の矢印をクリックすると詳細内容が開閉できます。

左下に表示される「削除」リンクをクリックする項目をクリックすると項目を削除できます

左下に表示される「削除」リンクをクリックする項目をクリックすると項目を削除できます。削除をキャンセルしたい場合はキャンセルを押すことでキャンセルもできます。

メニューの設定

最後にメニューの設定を行います。

最後にメニューの設定を行います

設定する項目は2箇所でまずは「固定ページを自動追加」の項目ですが、これはチェックを入れることで固定ページを追加した際、この画面でメニューの追加を行わなくても自動的にメニューに項目を追加するという機能です。必要な場合はチェックを入れましょう。

次に「メニューの位置」です。こちらに関してはテーマ内のプログラムで設定されている場所にメニューを表示します。プログラムの話が入ってくるので少し難しい話になりますが、最初の方に紹介した「ナビゲーションメニューが存在してるか確認」の項目で少し触れた、ナビゲーションメニューを登録するプログラムを書く際に表示する場所の名前を定義します。その定義した名前がこのメニューの位置に表示されているということになります。

メニューを保存

メニューの設定が終わったらメニューを保存しましょう。「メニューを保存」ボタンをクリックすることで保存できます。

メニューの設定が終わったらメニューを保存しましょう

保存が終わると緑色の見出しが表示されます。表示されるまでは保存中なので画面を更新しても表示されない可能性があります。

保存が終わると緑色の見出しが表示されます。

項目を追加してもこの保存ボタンを押さないと反映されないので注意しましょう。

メニューを確認

メニューを保存したら早速自分のページで表示の確認を行いましょう。保存が終わっても反映されない場合はメニューの位置が間違っている場合が多いので見直してみましょう。

番外編:メニュー項目の入れ子(ネスト)

メニューの項目追加に慣れてきて必要ならばメニューの入れ子にも挑戦してみましょう。

メニューの項目追加に慣れてきて必要ならばメニューの入れ子にも挑戦してみましょう

項目を右にドラッグドロップすることで入れ子関係を簡単に作ることができます。

まとめ

WordPressでナビゲーションメニューを設定する方法をご紹介しました。簡単にメニューを作ることができるので是非この機械に使い方をマスターして使ってみましょう。