【Cocoon】ヘッダーにメニューとサブメニューを表示させる方法【WordPress】

WordPress

ヘッダーにメニューを追加したいと思ったことありませんか?
WordPressでは簡単にメニューを追加したり削除することが可能です。

今回は当ブログでお世話になっているテンプレートcocoonでのお話になりますが、他テーマにも通ずる部分もありますのでもしよければご一読ください。

ヘッダーメニューを追加する

まずは外観メニューをクリック。

メニューの作成

メニュー名を入力し、掲載したい位置にチェックを入れて「メニューを保存」をクリック。

すると左の「メニュー項目を追加」の内容が表示されるようになりますので、追加したいメニュー名にチェックを入れて「メニューに追加」をクリック。

すると、右のメニュー構造に先程チェックした項目が表示されます。

追加したいページが表示されない場合は「全て表示」タブをクリックしてください。

右のメニュー構造に先程チェックした項目が表示されます。
問題なければ、「メニューを保存」をクリックすればOK!

たったこれだけで、メニューが表示されるようになります。

メニューの編集

作成したメニューを編集する場合は 外観 > メニューから編集したいメニューを選択してください。

項目の追加

項目を追加する場合は「メニュー項目を追加」より追加したい項目を選択し、「メニューを追加」をクリックしてください。

項目の編集と削除

項目を削除したい場合は、削除したい項目の「」をクリックすると項目の内容が展開されます。

  • ナビゲーションラベルを変更したい場合は該当枠内の文言を修正してください。
  • 移動したい場合は移動から該当内容をクリックしてください。
  • 削除したい場合は削除をクリックしてください。

項目の移動

「項目の編集と削除」でも紹介しましたが、展開されたメニューからでも移動出来ますが、ドラッグ&ドロップでも移動は可能です。
やり方は簡単で、移動したい項目をドラッグし移動したい先にドロップするのみです。

編集後は必ず「メニューを保存」をクリックしてください。

上記画像の用にカーソルがメニューに重なったときにサブメニューが展開できるようにするには項目を副項目にする必要があります。

副項目にするには簡単で、これもドラッグ&ドロップですることが出来ます。
副項目」にしたい項目をメイン項目の右下あたりにドラッグ& ドロップ

メイン項目の右下にズレているように表示されていればOKです。
下記画像の用に項目にもしっかりと「副項目」の文字が追加されているかと思います。

これでマウスオーバーでサブメニューが表示されるようになりました!簡単ですね!

編集後は必ず「メニューを保存」をクリックしてください。

まとめ

メニューに関しては他のテンプレートでも通ずる部分があります。
ただし設定やテーマの違いで表示されない場合もございますが、まだメニューを作成していない方は一度チャレンジしてみては如何でしょうか?

ちなみにですが、WordPressインストール時に用意されているテーマでもどのように表示されるかテストしてみましたので下記の画像を参考にしていただければ幸いです。

テーマによっては上記のように「お使いのテーマはナビゲーションメニューやウィジェットに対応していません。」と表示されますのでご注意ください。

Twenty Twenty-One

Twenty Twenty

今回はここまでとさせていただきます。
お疲れさまでした。
また次回!

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