[Cocoon] グローバルメニューの設定方法

グローバルメニューは、以下のような（赤枠）の、ブログ全体のメニューです。

(上の画面は最新ではないため、現在のメニューとは異なります。サンプルということで。）

大切 メニュー項目には、以下のような種類があります。

・カテゴリーメニュー（記事をカテゴリーごとに整頓できる。）

・固定ページメニュー（Topページやサイトマップ、コンタクトフォームなど、固定ページをそのままメニューにできる。）

・投稿ページメニュー（記事をメニュー化できる。クリックで該当記事が開きます。）

カテゴリーメニューの作成

ざっくり分けると２ステップあります。

１．「カテゴリー」を作成する。

２．設定した「カテゴリー」をメニューとしてブログに表示させる。

カテゴリーの作成

１．WordPress画面の[投稿]メニューで[カテゴリー]をクリックします。

２．[名前]、[スラッグ]、[親カテゴリー]を入力します。入力欄の下に説明がありますね。

　例えば、当ブログの[編集]メニューを作成したときに入力した内容は以下です。

　　[説明]には何も入力しませんでした。

　　ここで設定した[スラッグ]は、カテゴリーページのURLの最後に使用されます。

　　例：[編集]カテゴリーのURLです。(メニュー名を変更したため、現在は無効です。)

　　[親カテゴリー]で[なし]を設定すると、そのカテゴリーが親カテゴリーになります。

３．[新規カテゴリーを追加]をクリック。表示させたいメニュー分、１～３を繰り返します。

　　これだけだとまだ、ブログ上で表示されません。ただ、カテゴリーを作成した状態です。

　　カテゴリーを作成すると、以下のような画面になりました。（「未分類」は元々あります。）

メニューにカテゴリーを表示

１．WordPress画面の[外観]メニューで[メニュー]をクリックします。

２．メニュー名を設定して、[メニューを作成]をクリックします。

　　この[メニュー名]は、ブログ上には表示されません。

　　グローバルメニューを設定するときの便宜上の名前です。

　　私は「あぁ、ブログのメニュー」というメニュー名にしました。

３．[メニュー項目を追加]で、[カテゴリー]をクリック。

４．[すべて表示]をクリックして、ブログに表示させたいカテゴリーを選択します。そして[メニューに追加]をクリック。

５．以下の画面の順番で、メニューがブログに表示されます。表示順を変えたい場合はドラッグして順番を変えます。（▼を押すと、[移動]オプションがあり、クリックでも順番を変えられます。）

５－１．[固定ページを自動追加]を選択しておくと、固定ページを公開したとき、そのリンクが自動でメニューに追加されます。[固定ページ]とは、プロフィールや問い合わせフォームに使用されます。

５－２．[メニューの位置]で、メニューを表示させる場所を選びます。ヘッダーとフッターの両方にメニューを表示させたい場合は、すべて選択します。

６．[メニューを保存]をクリック。

フッターはこんな感じ。

フッターのメニュー設定は以下でまとめています。

固定/投稿ページメニューの作成

メニューにしたい固定ページ・投稿ページができていることが前提条件です。

以下の手順は「固定ページ用」の画像・説明になります。

投稿ページも方法は同じです。以下の画像・手順の「固定」を「投稿」と読み替えてください。

１．同じ画面で、[固定ページ]をクリックします。（[外観]＞[メニュー] > [メニュー項目を追加]、画像は前セクションの１－３番と同じ。）

２．[すべて表示]タブを選ぶと、作成してある固定ページが表示されます。[ホーム]は初期設定で用意されています。

３．表示させたい固定ページを選択して[メニューに追加]をクリック。

４．[メニューを保存]をクリックすれば、ブログに表示されます！

私は、初期設定の「ホーム」を「Top」に変更しました。他のメニューも同様に、表示テキストを変更できます。（カテゴリー名と表示名は同じにしておくほうが分かりやすいとは思いますが。）

メニューで階層を作りたい

[外観] > [メニュー] > [メニュー構造]画面で、入れたいメニューを、親にしたいメニューのところに重ねるようにドラッグするだけです。

以下のようにクリック操作でもできます。

[外観] > [メニュー] > [メニュー構造]画面で、各メニューの▼をクリックして広げて、[移動]の[ひとつ上へ]・[ひとつ下へ]・[○○下の階層]・[先頭へ]などを選んで場所を移動させます。

下の例では、[当ブログについて]を[Top]メニューの下に入れようとしています。

[当ブログについて]の▼を押して、下のほうにある[Top下の階層]をクリックします。

いずれの方法でも、ブログ上では以下の赤枠で囲んだマークがでて、メニューが階層化されます。

影みたいな説明をつけたい

以下の緑の枠にあるような、説明をつける方法です。無くてもいいのですが、実際のラベルより少し詳しい説明をつけられたりして便利です。

１．[外観] > [メニュー] 画面の一番上を見てください。

トップバーの下にある[表示オプション]の▼マークをクリック。

２．[詳細メニュー設定を表示]で[説明]をクリック。

３．同じ画面（[外観] > [メニュー] > [メニュー構造]）で、説明を加えたいカテゴリーの▼をクリックします。

[説明]欄に任意の説明を入れて（もちろん日本語も可）、[メニューを保存]をクリックすればできあがりです！

おわりに

その原因は

・「カテゴリーの作成」を別画面ですることに気が付かなかった。

・「メニュー名」がブログ上に表示されるものだと誤解した。（実際は便宜上の名前。）

そして更に・・・。

・グローバルメニューの表示フォントを、なぜか「白」に設定してしまっていた・・・。（背景も白だったので、非表示状態に。）

やっとのことでメニューが表示されたときは一人で盛り上がりました！

あまりワクワクできる作業ではないのに時間がかかってしまって、イラ～ッとしたりガッカリしたりしたので、分かりやすい手順を書こうと決心していました。

グローバルメニューの変更手順を簡単に以下にまとめました。（スクショは無しですが、流れを書いています。）

フッター設定はおすみですか？よろしければ、こちらに記事になっています。