【Cocoon】ヘッダーにグローバルメニュー(ナビゲーションメニュー)を追加する方法

【Cocoon】ヘッダーにグローバルメニュー(ナビゲーションメニュー)を追加する方法 Cocoonカスタマイズ
記事内に広告を含みます
PR
Advertisements

ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード(コピペ可)をまとめています。

今回は、WordPressのCocoonテーマで、ヘッダーにグローバルメニューを追加する方法を紹介します。

PR
Advertisements

グローバルメニュー(ナビゲーションメニュー)とは?

グローバルメニュー(ナビゲーションメニュー)とは、ブログの案内メニューのことです。

グローバルメニューがあることで、サイト内の回遊率をあげるメリットがあります。

グローバルメニューはヘッダーやサイドバーなどサイトの様々な位置に設置されます。

特にヘッダーに設置されることが多いので、今回はヘッダーにグローバルメニューを追加する方法を紹介します。

ヘッダーにあるグローバルメニューの位置を変えることもできるの?

メニューの位置はCocoon設定で簡単に変更できるよ!

ヘッダーにグローバルメニューを追加する方法

ヘッダーにメニューを追加する方法を紹介します。

  • メニュー項目を作成する(カテゴリー・固定ページなど)
  • ヘッダーメニューを作成する
    • Font Awesomeアイコンを追加する
    • サブ項目を追加する

メニュー項目を作成する(カテゴリー・固定ページなど)

まず、グローバルメニューに並べる項目を考えて、カテゴリーや固定ページを作成しておきましょう。

カテゴリーの作成については「【Cocoon】カテゴリー・タグの作成とカスタマイズ|分け方のコツ」の記事にまとめています。

グローバルメニューには以下のような項目がおすすめです。

  • カテゴリー
  • プロフィール(固定ページ)
  • はじめに(固定ページ)

ヘッダーメニューを作成する

【外観】→【メニュー】の【メニュー構造】に「メニュー名」を入力します。

【メニューの位置】の「ヘッダーメニュー」にチェックを入れて「メニュー作成」をクリックします。

すでに別のメニューを作成している場合

すでに別のメニューを作成している場合は、「新しいメニューを作成しましょう」をクリックして新しいメニューを作成します。

左にある【メニュー項目を追加】でグローバルメニューに追加する項目のチェックボックスにチェックを入れます。

それぞれのアコーディオンで「メニューに追加」を必ずクリックしましょう。

項目を追加すると、右の【メニュー構造】に項目が現れます。

項目をドラッグして順番を入れかえられます。

グローバルメニューを追加できました!

Font Awesomeアイコンを追加する

なんかリンゴマークがついてるけど!?

メニューには、Font Awesomeアイコンを追加することができます。

Font Awesomeアイコンを追加する方法については「【Cocoon】Font Awesomeアイコンの使い方|表示されない理由とカスタマイズ」の記事でまとめています。

サブ項目を追加する

必要であれば、メイン項目をホバーしたときにあらわれるサブ項目を設定できます。

方法は、順番を入れかえるときと同じようにメニュー構造の項目をドラッグします。

メイン項目の右下あたりにドラッグするとサブ項目に設定できます。

必要だったらでOK!

まとめ:ヘッダーメニューを追加してサイト内の回遊率をあげよう

ヘッダーメニューは簡単に追加することができます。

ヘッダーメニューを追加してサイト内の回遊率をあげてみましょう。