こんにちは、まちゃりさです。
今回は、WordPressのテーマ「Cocoon」をご使用の方向けに、ヘッダーに「グローバルメニュー」を表示させる方法をご紹介します。
「ヘッダー(header)」はサイトページの上部のこと。
「グローバルメニュー」とは、ヘッダーに表示される以下のようなメニューです。
「グローバルメニュー」を設定したいと思う方は、ぜひこの記事をご参考にしてください。
それでは、どうぞ！
グローバルメニューとは？
「グローバルメニュー」とは、次のようなメニューです。
- サイト上部に常時表示される
- ぱっと見て、サイトの内容を伝える役割をもつ
- パソコン等（768pxより大きな幅の端末）で表示される（※）
- 他にも「グローバルナビ」、「グローバルナビゲーション」、「ヘッダーメニュー」とも言われる
※768px以下の場合は、モバイル用のグローバルナビを使用します。
次からは、「グローバルメニュー」を設定する手順をご紹介します。
設定の手順は、次の3ステップで説明していきます。
- STEP1事前準備
作成イメージを決める
- STEP2グローバルメニュー作成
表示するメニューを作成する
- STEP3グローバルメニュー設定
STEP2で作成したメニューを表示させる
慣れれば簡単です！
事前準備
設定に入る前に、グローバルメニューに何を表示させたいかを決めておきましょう。
以下の項目から選んでおきます。
- 固定ページ（※１）
- 投稿記事
- カスタムリンク（※２）
- カテゴリー（※３）
※１ サイトマップや問い合わせフォームなどの固定ページを言います。
※２ 「http://」から始まる任意のURLです。
※３ カテゴリーページです。
何項目を設定すべき？
他サイトでも、大体4～6項目くらいが一般的という印象です。
項目を多く設定したい場合は、幅を変更するなどして表示を工夫するとよいです。
当サイトでは、4つの「カテゴリー」と、1つの「固定ページ」（計5項目）を表示させています。
※ 2021年7月現在は、サイトデザインを変更しています。
グローバルメニューの作成
それでは、まず最初に表示させるためのメニューを作成していきます。
ワードプレス管理画面→[外観]→[メニュー]をクリックします。
![[外観]→[メニュー]](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu3.png?resize=288%2C369&ssl=1)
「新しいメニューを作成しましょう」をクリックします。
①メニュー構造の「メニュー名」を入力し（※）、
②[メニューを作成]をクリックします。
![「メニュー名」を入力し[メニューを作成]をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_global-menu5.png?resize=1024%2C572&ssl=1)
続いて、作成したグローバルメニューに、記事やリンクをつけていきます。
メニュー項目に追加したい項目の▼を、それぞれクリックして設定していきます。
固定ページを追加する場合
＞固定ページを追加する場合
①「固定ページ」の▼をクリックし、
②表示したい項目にチェックを入れます
③[メニューに追加]をクリックします
投稿ページを追加する場合
＞投稿ページを追加する場合
①「投稿」の▼をクリックし、
②表示したい記事にチェックを入れます
③[メニューに追加]をクリックします
カスタムリンクを追加する場合
＞カスタムリンクを追加する場合
①「カスタムリンク」の▼をクリックし、
②カスタムリンク（「http://」から始まるURL）を入力します
③表示させたい文言を入力します
④[メニューに追加]をクリックします
カテゴリーリンクを追加する場合
＞カテゴリーリンクを追加する場合
①「カテゴリー」の▼をクリックし、
②表示したいカテゴリーにチェックを入れます
③[メニューに追加]をクリックします
表示順の変更
表示順は、上から順番に左→右と表示されます。
この表示順を変更することも可能です。
▼設定方法
項目を右に追加した後、カーソルを合わせると十字マークが表示されます。
並べ替えたい項目をクリックし、上下にドラックアンドドロップします。
階層を分ける
副階層をつけることも可能です。
▼設定方法
項目を右に追加した後、カーソルを合わせると十字マークが表示されます。
階層を変更したい項目をクリックし、右方向にドラックアンドドロップします。
階段のように階層ができれば、OKです。
グローバルメニューの表示方法
項目をすべて追加したら、下にスクロールします。
そして、
①「メニュー設定」項目から「ヘッダーメニュー」を選択します。
②最後に、「メニューを保存」をクリックして、完了です。
以上で終わりです！
グローバルメニューが正しく表示されているか確認してみましょう！！
グローバルメニューのカスタマイズ
グローバルメニューは、他にも次のようにカスタマイズすることもできます。
- 背景色を変更する
- 表示幅を変更する
- 表示位置を変更する
- 区切り線を入れる
- アイコンフォントを入れる
- サブキャプション機能（補足説明）を使用する
➡こちらに興味がある方は、「【Cocoon】グローバルメニューのカスタマイズ方法」をご参考に設定してみてください。
まとめ：Cocoonヘッダーにグローバルメニューを表示させる
いかがでしたか？
今回は、Cocoonユーザ向けにヘッダーにグローバルメニューを表示させる方法についてご紹介しました。
グローバルメニューは、しっかり設定しておくと、読者が見たい記事に移動することができるので、便利です。
ぜひ、本記事を活用して、すてきなサイトを作成してみてください。
それでは、今回はこの辺で終わります。
最後までお読みいただき、ありがとうございました。
おわり。
Cocoonについてのおすすめ記事
コメント