WordPress でメニューを作成してみよう！

WordPress にデフォルトで用意されているメニュー機能を使用し実際にメニューを作成してみましょう。

当テーマであるスクラッチを例に出し説明をしていきます。

新規メニューの作成

まず管理画面の「外観」から「メニュー」にすすみましょう。

まだひとつも作成していない場合は上のように、あっさりとした画面になっているはずです。「新規メニューを作成」というリンクがありますが、それは無視して「メニュー名」を書き込んでください。

名前はなんでも結構です。メニュー名はサイト上に表示されるわけではないので、ご自身の覚えやすいものでいいでしょう。

特に思いつかないのであれば「グローバルナビ」と記入してください。

記述後は「メニューを作成」にすすんでください。ボタンが２つありますがクリックするのはどちらでもOKです。

メニューリンクの追加

では実際にメニューに表示するリンクを作成していきましょう。

スクリーン左側に表示されているボックスを見てください。WordPress では以下の５つの項目を用意しています。

ここからメニューに追加するリンクを選択していきます。

WordPress のメニューに表示するものは「固定ページ」で作成したページや「カテゴリー」アーカイブページなどのリンクが適切です。今回は「固定ページ」から選択してみます。チェックを入れたら「メニューに追加」ボタンを押します。

メニューを追加すると「メニュー構造」の下に選択したものが縦並びで表示されます。

このメニューはドラッグ＆ドロップ可能で、ここで順番を簡単に変更することができます。

作成したメニューの表示場所を設定

当テーマであるスクラッチにはメニュー表示箇所として以下の２つを用意しました。

単純に言ってしまうと「Global Menu」はサイト上部、「Footer Menu」はサイト下部のメニューです。

ここでは Global Menu に設定してみましょう。設定後は「メニューを保存」で変更を保存してください。

では実際に作成したメニューを見てみましょう。サイトのトップページに移動してください。

ヘッダー上にナビゲーションメニューが作成されているはずです。これがスクラッチの Global Menu です。

ちなみにデザイン上の観点からメニュー数は最大でも５つほどにしておくことを推奨します。

ちょっとしたデザインの追加

出来上がったメニューはものすごくシンプルですが、ここでちょっとしたデザインを加えてみましょう。メニュー画面に戻ってください。

画面右上の「表示オプション」を開き、その中にある「詳細メニュー設定を表示」の「説明」にチェックを入れます。

そして「メニュー構造」に表示されている設定したメニューリンクの右側にある「▼」ボタンを押してメニューを開きます。

するとそこに「説明」という項目があるはずです。スクラッチではここに記述した文字列をサブメニュー名として表示します。

メニュー名をアルファベットなどで書き込んでみましょう。

ここでは例として以下のように記入してみました。

• お問い合わせ => Contact
• 当サイトについて => About the site
• 固定ページサンプル => Sample

作成後は「メニューを保存」ボタンを押し、変更を保存することを忘れないようにしましょう。

ではトップページを再び見てみましょう。

すると以上のように、書き込んだ「説明」がサブメニュー名として小さく表示されているはずです。

単なるデザインですが、これがあるだけで少しサイトがオシャレに見えるので設定しておくようにしましょう。

サブメニューの追加

次にメニューの下に表示するサブメニューを作成してみます。

上で個々のメニューバーのドラッグ＆ドロップで順序が変更できることを説明しましたが、この際にドラッグ中のメニューを少し右にズラしてからドロップしてみましょう。

サブメニューの作成方法はこれで完了です。とても簡単です。

例として以上のような形で作成してみました。

「お問い合わせ」の下に「当サイトについて」と「サブページ」を置き、「サブページ」の下にはさらに「サブページ2」を配置するという形です。

ではトップページで見てみます。

サブメニューを持つメニューにマウスを移動すると、サブメニューが表示されます。これで完成です。

ちなみにサブメニューには「説明」を記入しても、なにも表示されません。

トップページのリンクをメニューに追加

これまでの説明では「固定ページ」を使用しましたが、今度はサイトのトップページのリンクをメニューに追加してみましょう。

方法はいたって簡単です。

左側のリンク作成ボックスの「カスタムリンク」を開き、そこにサイトの URL とメニュー名を記入するだけです。

当サイトであれば https://wp-scratch.com/ を「URL」に書き込みます。「リンク文字列」は例として”ホーム”にしておきます。

そして「メニューに追加」ボタンを押し、追加後に「メニューを保存」で設定を保存します。

出来上がったのが以上です。

Footer Menu の作成

スクラッチには Global Menu の他に Footer Menu を用意しています。

こちらのメニューにはサブメニューという概念がないので注意してください。作成手順は上で説明した方法と同じです。

サイトの一番左下に表示されます。

「お問い合わせ」や「免責事項」を記したページのリンクなどを２～３つほど設定することを想定しています。