メニュの追加方法は下記でご紹介しましたが、
これだけですと、ただ横に並ぶだけですね。
今回は、階層構造表示やアイコンをつけるといったカスタマイズ方法をご紹介します。
表示順序変更
現在以下5つのメニュー項目が、以下順番で表示されています。
これを以下のように順序を変更したいと思います。
カテゴリーのメニュー表示手順
①管理画面から「外観」＞「メニュー」をクリックする。
②メニュー構造内の「Gallery」をマウスでつかみ、「Blog」の下にドラッグ＆ドロップする。
③「メニューを保存」をクリックする。
④サイトのトップページを再表示すると、画面上部のメニューの表示順序が変更になったことが確認できる。
※すでにサイトを開いている場合は、F5キーをクリックする。
階層構造表示
PC版では、メニューを階層構造で表示させることも可能です。
現在以下5つのメニュー項目が表示されています。
これを以下のように階層構造表示をさせたいと思います。
∟Gallery
以下手順でカスタマイズします。
階層メニュー表示手順
①管理画面から「外観」＞「メニュー」をクリックする。
②メニュー構造内の「Gallery」をマウスでつかみ、右側へドラッグ＆ドロップする。
③項目が1段落下がり、「副項目」と表示されたことを確認し、「メニューを保存」をクリックする。
④サイトのトップページを再表示すると、画面上部のメニューが変更されたことが確認できる。
※すでにサイトを開いている場合は、F5キーをクリックする。
⑤階層の親でマウスオーバーすると、子のメニューが表示される。
階層構造表示（親は表示のみ）
先ほどご紹介した階層構造では、親メニューも子メニューともにクリックし、それぞれの項目を表示させることができます。
では、親メニューはラベルだけで、子メニューは詳細を表示させたいといった場合はどうすればいいでしょうか？
例えば以下のように階層構造表示をさせたいと思います。
∟Gallery ∟日記
∟テスト
以下手順でカスタマイズします。
階層メニュー（親は表示のみ）表示手順
①管理画面から「外観」＞「メニュー」をクリックする。
②「メニュー項目を追加」＞「カスタムリンク」に以下のように入力し、「メニューに追加」をクリックする。
| 項目 | 入力値 |
|---|---|
| URL | # |
| リンク文字列 | メニューに表示させるラベル名 |
※今回の例では、リンク文字列に「親」と入れています。
③メニュー構造に追加した外部サイトのリンク文字列、種類が「カスタムリンク」で表示されたことを確認する。
子メニューにしたい項目を親メニューの下にドラッグ＆ドロップする。
④子項目に「副項目」と表示されたことを確認し、「メニューを保存」をクリックする。
⑤サイトのトップページを再表示すると、メニューが更新されたことが確認できる。
※すでにサイトを開いている場合は、F5キーをクリックする。
一部メニュー削除
追加したメニューが不要になった場合、その項目を削除したいですね。
以下の手順で削除してください。
※ここでは、googleのリンクを削除したいと思います。
階層メニュー（親は表示のみ）表示手順
①管理画面から「外観」＞「メニュー」をクリックする。
②メニュー構造から、削除したい項目の右側の▼をクリックする。
③下部の「削除」をクリックする。
④メニュー構造から項目が消えたことを確認し、「メニューを保存」をクリックする。
⑤サイトのトップページを再表示すると、メニューが更新されたことが確認できる。
※すでにサイトを開いている場合は、F5キーをクリックする。
メニュー前にアイコンを入れる
以下のようにメニュー文言の前にアイコンを入れたいと思います。
この場合、Font Awesomeを使います。
最新のバージョンは5ですが、
このサイトでは使えていないので、バージョン4を使っています。
アイコンは以下サイトで検索できます。
では、メニューでの使い方をご紹介します。
今回は、Blogの前にのマークを入れたいと思います。
アイコン入力手順
①管理画面から「外観」＞「メニュー」をクリックする。
②メニュー構造から、アイコンを追加したい項目の右側の▼をクリックする。
③ナビゲーションラベルに以下のように入力し、「メニューを保存」をクリックする。
※他のアイコンにしたい場合、上記の赤文字部分を変更する。
④サイトのトップページを再表示すると、メニューが更新されたことが確認できる。
※すでにサイトを開いている場合は、F5キーをクリックする。
サブメニュータイトル
例えばメニューを英単語で書き、日本語でもメニューを書きたいと言ったとき、
「/」でつなぐこともできますが、項目が多かったり、文字数が長い場合は横に長いメニューになってしまいます。
ですので、サブメニュータイトルとして、英単語の下に日本語でメニューを書きたいと思います。
サブメニュータイトル設定手順
①管理画面から「外観」＞「メニュー」をクリックする。
②メニュー構造から、アイコンを追加したい項目の右側の▼をクリックする。
③「説明」欄に設定したいサブタイトルを入力し、「メニューを保存」をクリックする。
④サイトのトップページを再表示すると、メニューが更新されたことが確認できる。
※すでにサイトを開いている場合は、F5キーをクリックする。
まとめ
いかがでしたか？
メニュー1つでも、だいぶ印象が変わると思います。
素敵なサイトになりますように✨
