Emanonには、階層メニューをメガメニュー化する機能があります。
Emanonのメガメニューは、「Free」以外のすべてのテーマで利用できます。
メガメニューは元々用意されている8種類の表示パターンとショートコードによる設定の「全9種類」となっています。
まずは通常のメニュー作成画面から始めていきましょう。
メインメニューを作成する
上の画面は、第一階層のメニューを8つ作成した後になります。
作成方法は「外観」→「メニュー」をクリックしてメニュー作成画面から行います。
上の例で言えば、すべてカテゴリーから第一階層のメニューを作成しています。
第一階層のメニューを作成しただけでは、メガメニューの機能は確認できず、それぞれのメニューの中に、第二階層となるメニュー項目を作成していかなければなりません。
メガメニューを作成する
例えば「犬のお話」の第一階層のメニューに、新たに第二階層のメニューを作成してみましょう。
すべて「投稿記事」をメニュー項目にしています。
この状態で、第一階層のメニューに「メガメニュー」を指定します。この場合、第一階層のメニューは「犬のお話」になりますね。
「犬のお話」を展開すると、「階層メニューのレイアウト」を指定する場所があります。
今回は「メガメニュー03」を選択してみました。
下の方にある「メニューの位置」には「ヘッダーメニュー」にチェックを入れ、「メニューを保存」をクリックします。
プレビューで画面を確認してみましょう。
サイトタイトルの下(ヘッダー部分)に今回作成したメニューが表示されます。
「犬のお話」という第一階層のメニューをクリックすると、上の画面のように第二階層のメニューが「メガメニュー」として表示されます。
表示されている画像は、記事の「アイキャッチ画像」となります。
今回の例では、メガメニューとなる第二階層はすべて「投稿記事」を設定していました。
メニューに追加できる項目は、他にもまだあります。
「固定ページ」、「カスタムリンク」、「カテゴリー」の3つがあり、これらはメガメニューで同じように「03」を設定すると、以下のようになります。
- 固定ページ(画像が表示される)
- カスタムリンク(画像が表示されない)
- カテゴリー(画像が表示されない)
「カテゴリー」は、カテゴリー設定内でEmanon専用の設定を行える箇所が豊富にあります。
その内の1つに、上の画面のようなショートコードを使ったタイトル画像の設定があります。
しかしメガメニューに「カテゴリー」を指定しても画像は表示されません。
8種類のメガメニューは以下のデモサイトで確認できます。
WordPressテーマ「Emanon」のメガメニューを設定したデモサイトです
設定値は以下のようになります。
- 犬のお話(メガメニュー03)
- 猫のお話(メガメニュー04)
- ハムスターのお話(メガメニュー05)
- うさぎのお話(メガメニュー06)
- 鳥のお話(メガメニュー01)
- モルモットのお話(メガメニュー02)
- フェレットのお話(メガメニュー07)
- 亀のお話(メガメニュー08)
メガメニューをショートコードで作成する
ここまでメガメニューを元々用意されていた[01]から[08]までの8種類で作成してみました。
ここではメガメニューを「ショートコード」で作成してみたいと思います。
そのために事前に準備が必要となるので一緒に見ていきましょう。
メニューでショートコードを使えるようにする
事前にショートコードを使える設定を行います。
まずWordPressの管理画面から「Emanon設定」を開きます。(①)
右ペインで「管理画面」タブをクリックします。(②)
「メニュー設定」で「シュートコードメニューの追加」を「有効」にします。(③)
「保存」をクリックして設定を保存しましょう。
ショートコード化されたブロックのスタイル崩れの防止
同じく「Emanon設定」から「表示速度」をクリックします。(①)
「カスタムブロックのstayle分割読み込み」を「無効」にします。(②)
表示オプションでショートコードを追加
続いて「外観＞メニュー」を開き、メニュー画面を開きます。
画面上部の「表示オプション」をクリックします。(①)
開いた一覧から「ショートコード(emanon)」をクリックしてチェックを入れます。(②)
「メニュー項目を追加」の中に「ショートコード[Emanon]」が追加されたのを確認します。(③)
ショートコードで使いたいブロック
ショートコードは「Emanonパーツ」で作成します。「Emanonパーツ」を開くと、カスタムブロックプラグインの「Emanon Blocks」には投稿一覧が用意されています。
WordPressテーマ「Emanon」は、ブロックエディタ入力が必須です。
有料プラグインの「Emanon Blocks」をインストールすると、ブロックエディタで「カスタムブロック」を入力できるようになります。
投稿一覧は、これまで作成した記事の一覧を表示できます。例えば「ある1つのカテゴリとある1つのタグだけを抽出した記事一覧」など複合的な一覧を作成できるようになっています。
しかしこのメガメニューでショートコードを使う場合には注意が必要な場合もあります。以下に記述していきましょう。
サイトのデザインとして「ヘッダーメニューを表示しよう」と考えたとします。
その際、メガメニュー[01]～[08]を設定しても問題ないでしょう。しかし、メガメニュー[ショートコード]で投稿記事[Slider]を設置する場合、表示や動作で不明な点を確認しています。
メニューにメガメニュー[ショートコード]を設定するのであれば、サイトを作成中でも動作確認をしっかり行った方がよいでしょう。
投稿記事[Info]
メガメニュー[ショートコード]に、投稿記事[Info]が入力されたEmanonパーツのショートコードを登録すると、パソコンのサイト全体の表示が崩れます。
そのため、Emanonパーツで投稿記事[Info]を設置する場合は、olを指定するようにします。
投稿記事[Emanon]
投稿記事[Emanon]は、パソコンでもスマホでも正常に表示される一方で、メニューの大きさが相当大きいのが少し気になります。
投稿記事[Slider]
Emanonパーツに投稿記事[Slider]を設置し、そのショートコードをメガメニュー[ショートコード]に設定すると、パソコンの最初の訪問時は記事が正常に横にスライドされます。しかし同じサイト内のどこか別の記事に進んでから再度メニューを開いたり、タイトルロゴをクリックしてホームに戻ったりすると、記事がスライドされなくなります。
パソコンの環境によっても表示される不具合は違うかもしれません。
また今後、Emanonのアップデートで解消されるかもしれません。
現状、上記のような点を確認しているので、メガメニュー[ショートコード]の利用には十分な動作確認をお勧めします。
メガメニューの文字色・背景色を変更する
メガメニューの文字や背景色は「外観＞カスタマイズ＞ヘッダー設定」で行います。
一覧に「ヘッダーメニュー」があるのでこれをクリックします。「ヘッダーメニュー」は、今回メガメニューを設定しているメニュー位置になります。
メガメニューの階層タイトル・サブタイトルを設定する
メガメニューには、そのメニューを説明するためのタイトルやサブタイトルを表示できます。
第一階層のメニューを展開します。ここでは「犬のお話」をクリックして展開してみました。(①)
現在「メガメニュー03」でレイアウトされているこのメニューに、「階層タイトル」と「階層サブタイトル」を指定してみました。(②)
実際の表示は、デモサイトでも確認してみてください。
階層タイトルや階層サブタイトルの文字色は、先ほどと同じように「外観＞カスタマイズ＞ヘッダー設定」の「ヘッダーメニュー」から行います。
「メガメニュー」項目に、タイトル／サブタイトルの色を変更できる箇所が用意されています。
メガメニューを設定する際の注意点
メガメニューには使う上でいくつか注意点があるので、確認していきましょう。
メガメニューを使えるメニュー位置
メガメニューを使えるメニュー位置は以下の2つだけとなります。
- ヘッダーメニュー
- ヘッダーメニュー[追従・ドロップ]
同じヘッダーメニューでも「LP」やフッターメニュー、スクロールメニュー、ドロワーメニューには利用できません。
第三階層メニュー以降は使えない
メガメニューは第二階層のメニューに対して設定でき、それ以降の階層を持つメニューに設定してしまうとサイトの表示が崩れてしまいます。
実際に第三階層までメニューを作成した第一階層のメニューにメガメニューを設定してみましょう。
「犬のお話＞ウェルシュコーギー＞男の子」とメニューを第三階層まで作成しました。
実際にデモサイトでは、以下のようにメガメニューの表示が崩れてしまいます。
(まとめ)ビジュアルで読者を引き込むメガメニュー
メガメニューを使用すると、そのサイト内で見て欲しい記事一覧を「画像付き」など特徴のあるメニュー形式で表示できます。
ヘッダーメニューのみで使用できるメガメニューを上手に利用してサイトの閲覧数アップに役立ててください。