回遊率を高めると言われているボックスナビの作成方法を紹介します。
完成イメージ
完成イメージはこんな感じです。
ボックスメニュー作成手順
ボックスメニューの作成
- ①新規メニューを作成
※「表示オプション」から「CSSクラス」と「説明」を有効にします。
- ②「メニュー項目を追加」のカテゴリーからを選択。
作成したいメニューをカテゴリーから選択します。
- ③個別メニューの設定を行う
Font Awesome5がおすすめです。
- ④メニューを保存し完成
一連の流れはこのような感じになっています。
新規メニューの作成
外観＞メニュー＞新しいメニューを作成しましょう＞表示オプション＞CSSクラスと説明をクリック
メニュー項目を追加から項目を作成
メニューの追加例がこのような感じです。各自で設定してください。
入力例がこちら。
- 「ナビゲーションラベル」にタイトルを入力してください
- 「CSS class」にアイコンフォントのクラス名を入力します。（Font Awesome5）
- 「説明」にサブメニューキャプションを入力してください
Font Awesome5の設定方法
Font Awesomeアイコンは、4でも5でも入力できます。Cocoon設定の全体タブにある「サイトアイコンフォント」の設定で変更できます。
Font Awesome5でアイコンを設定するには、アイコンページから好みのアイコンを選択してください。
CSS class（オプション）の部分に入力してください。
ウィジェットの設定
ウィジェットの設定はWordPress管理画面の「外観＞ウィジェット」から行います。
「ボックスメニュー」ウィジェットを表示したいウィジェットエリアにドラッグ＆ドロップで移動します。
最後にメニュー名をボックスナビにします。
これで完成です。
まとめ
ボックスメニューは、Wordpressのプラグインのヒートマップツールで見てみるととてもクリックされやすいメニューであることがわかります。
効果的に利用すればサイト回遊率もアップもつながる可能性があると思います。
