11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

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

グローバルメニュー

グローバルメニューは、こんな感じ↓(赤枠)の、ブログ全体のメニューです。

(追記:8/24にグローバルメニューを変更したので、画面が最新ではありません。以下の手順は、上の画面のように設定するとき、と仮定してお読みください。)

いくみ
いくみ

カテゴリー別に、記事をスッキリ整頓できます。

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

1.「カテゴリー」を設定する。

2.設定した「カテゴリー」や「固定ページ」をメニューとしてブログに表示させる。

アイキャッチ画像は

PrawnyによるPixabayからの画像

カテゴリーの設定手順

1.WordPress画面の投稿アイコンから[カテゴリー]をクリックします。

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

 例えば、当ブログの[編集]メニューをカテゴリー登録するときに入力した内容はこちら↓。

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

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

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

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

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

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

  私の場合、カテゴリーを4つ登録していて、以下のように見えています。(「未分類」は元々あります。)

グローバルメニューにカテゴリーを表示させる

いくみ
いくみ

あとは表示させるだけ!

1.WordPress画面の外観アイコンから[メニュー]をクリックします。

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

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

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

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

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

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

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

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

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

5-3.[メニューを保存]をクリック。

いくみ
いくみ

こんな感じ↓になっています!

フッターはこんな感じ↓。

グローバルメニューに固定ページを表示させる

[メニュー項目を追加]で([外観]>[メニュー]で表示)、[固定ページ]をクリックします。

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

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

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

ブログ上で表示されるメニュー名は、以下の[ナビゲーションラベル]で変更できます。

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

グローバルメニューで階層を作りたい場合

いくみ
いくみ

[メニュー構造]画面で([外観]>[メニュー]で表示)、ドラッグするだけでできちゃいます!

入れたいメニューを、親になるメニューのところに重ねるようにドラッグするだけです。

いくみ
いくみ

移動させた後、[メニューを保存]のクリックはお忘れなく!!

ドラッグが苦手な場合は、以下のようにクリックでもできます。

[メニュー構造]で([外観]>[メニュー]で表示)、階層関係を作りたいメニューが上下になるように並べます。(各メニューを広げて、[移動]の[ひとつ上へ][ひとつ下へ][先頭へ]などをクリックして場所を移動させます。)

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

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

いくみ
いくみ

[メニューを保存]をクリックすれば、できあがりです!

できあがると、以下の赤枠のようなマークがでて、メニューが階層化されています。

影みたいな説明をつけるには?

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

[メニュー構造]画面で([外観]>[メニュー]で表示)、説明を加えたいカテゴリーの▼をクリックします。

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

いくみの体験
いくみ
いくみ

私は、「グローバルメニュー」の設定に手間取りました。

その原因は

・「カテゴリーの登録」というステップに気が付かなかった。

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

そして更に・・・。

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

いくみ
いくみ

3つ目の失敗をするのは私くらいだとは思いますが、一応シェアしておきます★。

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

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

いくみ
いくみ

分かりづらい部分や読みにくい部分がありましたら、ぜひご連絡ください。

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


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

コメント

タイトルとURLをコピーしました