こんにちは、まちゃりさです。
今回は、WordPressのテーマ「Cocoon」をご使用の方向けに、ヘッダーにモバイル（スマホ・タブレット）用の「グローバルメニュー」を表示させる方法をご紹介します。
「ヘッダー(header)」はサイトページの上部のこと。
「グローバルメニュー」とは、ヘッダーに表示される以下のようなメニューです。
モバイル用のグローバルメニューは、768px以下の幅の端末で表示される仕様です。
パソコンでは表示されないので注意してください。
グローバルメニューとは？
グローバルメニューとは、このようなメニューです。
- サイト上部に常時表示される
- ぱっと見て、サイトの内容を伝える役割をもつ
- 他にも「グローバルナビ」、「グローバルナビゲーション」、「ヘッダーメニュー」とも言われる
次からは、モバイル用の「グローバルメニュー」を設定する手順をご紹介します。
設定の手順は、次の3ステップで説明していきます。
- STEP1事前準備
作成イメージを決める
- STEP2グローバルメニュー作成
表示するメニューを作成する
- STEP3グローバルメニュー設定
STEP2で作成したメニューを表示させる
慣れれば簡単にできます！
事前準備
設定に入る前に、モバイル（スマホ）用のグローバルメニューに、何を表示させたいかを決めておきましょう。
以下の項目から選んでおきます。
- 固定ページ（※１）
- 投稿記事
- カスタムリンク（※２）
- カテゴリー（※３）
※１ サイトマップや問い合わせフォームなどの固定ページを言います。
※２ 「http://」から始まる任意のURLです。
※３ カテゴリーページです。
何項目を設定すべき？
スマホなどのモバイル画面の場合、幅が小さくなります。
項目数は多くても5項目以内に抑えておくのがおすすめです。（項目はより少ない方がベター）
また、文字数が長いと見づらくなるので、長くなりすぎないよう注意します。
モバイル（スマホ）用グローバルメニューの作成
それでは、最初に表示用のメニューを作成していきます。
（※基本的なやり方は、グローバルメニュー作成のやり方と変わりません）
ワードプレス管理画面→[外観]→[メニュー]をクリックします。
![[外観]→[メニュー]](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu3.png?w=1358&ssl=1)
「新しいメニューを作成しましょう」をクリックします。
①メニュー構造の「メニュー名」を入力し（※）、
②メニュー設定の「メニューの位置」で「ヘッダーモバイルメニュー」をクリックします。
③最後に、[メニューを作成]をクリックします。
続いて、作成したグローバルメニューに、記事やリンクをつけていきます。
メニュー項目に追加したい項目の▼を、それぞれクリックして設定していきます。
＞固定ページを追加する場合
①「固定ページ」の▼をクリックし、
②表示したい項目にチェックを入れます
③[メニューに追加]をクリックします
＞投稿ページを追加する場合
①「投稿」の▼をクリックし、
②表示したい記事にチェックを入れます
③[メニューに追加]をクリックします
＞カスタムリンクを追加する場合
①「カスタムリンク」の▼をクリックし、
②カスタムリンク（「http://」から始まるURL）を入力します
③表示させたい文言を入力します
④[メニューに追加]をクリックします
＞カテゴリーリンクを追加する場合
①「カテゴリー」の▼をクリックし、
②表示したいカテゴリーにチェックを入れます
③[メニューに追加]をクリックします
作成済みのメニューを使用したい場合は・・
「位置を管理」タブを開きます。
「ヘッダーモバイルメニュー」でモバイル用のグローバルメニューを選びます。
最後に左下の「変更を保存」ボタンを押してください。
【注意】
モバイルヘッダーナビでは、ドロップダウン状のサブメニュー（副階層）は表示できません。
補足説明
下記のような補足説明の表示ができます。
作成手順です。
ワードプレス管理画面→[外観]→[メニュー]を選択し、
表示されるメニュー画面の右上「表示オプション」をクリックします。
表示オプションの設定が表示されます。
この中から「説明」にチェックをいれます。
後は、①メニュー項目の「説明」欄に表示させたい「補足文」を入力し、
②「メニューを保存」をクリックします。
参考記事は、こちらです。
グローバルメニューのカスタマイズ
グローバルメニューは、他にも次のようにカスタマイズすることもできます。
- 背景色を変更する
- 表示幅を変更する
- 表示位置を変更する
- 区切り線を入れる
- アイコンフォントを入れる
➡こちらに興味がある方は、「【Cocoon】グローバルメニューのカスタマイズ方法」をご参考に設定してみてください。
まとめ
いかがでしたか？
今回は、Cocoonユーザ向けにヘッダーにグローバルメニュー（スマホ用）を表示させる方法についてご紹介しました。
グローバルメニューは、しっかり設定しておくと、読者が見たい記事に移動することができるので、便利です。
ぜひ、本記事を活用して、すてきなサイトを作成してみてください。
それでは、今回はこの辺で終わります。
最後までお読みいただき、ありがとうございました。
参考記事
Cocoon作成者のわいひらさんの記事を参考に作成しました。
コメント