テーマLightning G3のナビゲーションメニュー比較【無料版vs有料版】

2022年11月24日

ワードプレスの人気テーマLightningのナビゲーションについて無料版と有料版を比較してみます。

ざっと表にまとめると以下の通りです。

	無料版	有料版
ヘッダーナビ	ナビゲーション 回り込み	（以下より選択可） ・ナビゲーション回り込み ・ナビゲーション回り込み＆縦書き ・中央揃え ・中央揃え＆ナビ縦書き ・タイトル中央＆ナビ貫通 ・ヘッダーコンタクトあり＆ナビ貫通 ・ヘッダーウィジェットあり＆ナビ貫通
スクロール時の ヘッダーナビ固定	固定 ナビ中央揃え	（以下より選択可） ・固定しない ・固定 中央揃え ・固定 ナビコンテナ幅 ・固定 ロゴ＆ナビ回り込み ・固定 ロゴ＆ナビ回り込み全幅
フッターナビ	左	左・中央・右　から選択可
モバイルナビ	メニューボタン：左 or 右 スライド方向（以下より選択） ・ドロップダウン ・左⇒右 ・右⇒左	メニューボタン：左 or 右 スライド方向（以下より選択） ・ドロップダウン ・左⇒右 ・右⇒左
ヘッダー上部ナビ	なし	表示可
モバイル固定ナビ	なし	表示可 （メニュー開閉と４つのボタン設定）

※以前モバイルナビについて、無料版ではボタン位置とスライド方向の設定ができない旨の表示をしていましたが、古いversionでの情報でした。2021年1月6日のアップデートで有料版と同様となっていました。大変申し訳ありません。

記事本文内では具体的に画像でナビゲーションの見映えを紹介しています。ぜひご覧ください。

ワードプレスのナビゲーションメニューの基本的な使い方は以下の記事を参照ください。

ナビゲーション以外にLightning無料版と有料版の違いを知りたい場合は次の記事がおすすめです。

無料版のナビゲーション

可能な位置設定は3種類

外観＞メニューのページでわかるように3カ所の位置設定が可能です。

Header Navigation：ヘッダー部に表示されるヘッダーナビゲーション
Footer Navigation：フッター部に表示されるフッターナビゲーション
Mobile Navigation：モバイル機器にて表示されるハンバーガーメニュー

Mobile Navigation位置を特に指定しない場合は、ヘッダーナビと同じメニュー内容がMobile Navigationに反映されます。

ヘッダーナビゲーション

ヘッダーナビゲーションは、サイトロゴの右側に回り込んで表示されます。

ページを下へスクロールを始めるとナビゲーションが画面上に固定化されます。このときサイトロゴは消えてナビゲーションが中央揃えで表示されます。

このように無料版ではヘッダーナビのレイアウトは一種類しかありませんが、カスタムCSSで調整すれば変更可能です。こちらの記事を参照ください。

フッターナビゲーション

フッター上部の左詰めでナビゲーションが表示されます。

モバイルナビゲーション

左上のハンバーガーメニューをクリックするとメニューがドロップダウンして開く仕様です。

有料版のモバイルナビと同じく、ハンバーガーメニューの位置とドロップダウンの開閉方向を選択できるようになっています。

有料版のナビゲーション

可能な位置設定は4種類+モバイル固定ナビ

外観＞メニューの画面を見ると、無料版にはなかったHeader Top Navigationというメニュー位置が設定できるのがわかります。

Header Top Navigation：ヘッダー上部の帯状エリアに表示されるナビゲーションメニュー

上の画像の場合、フッターナビと同じメニューがヘッダー上部ナビゲーションに選ばれています。

ヘッダー上部ナビゲーション

外観＞カスタマイズ＞Lightningヘッダー上部設定で、下記の2カ所にチェックが入っていない場合にヘッダー上部ナビゲーションが表示されます。

こんな感じでナビゲーションが表示されます。

ちなみに左側にある ”このサイトはデモサイトです” はこのサイトのキャッチフレーズです。

このヘッダー上部の帯状エリアには、電話番号やお問い合わせ先ボタンを表示することも可能です。

ただし表示としては小さいので、しっかりアピールするならば次のヘッダーナビゲーションのバリエーションの方が個人的には好みです。

ヘッダーナビゲーション

外観＞カスタマイズ＞Lightningヘッダー設定でヘッダーナビゲーションのレイアウトやスクロール時の固定ナビレイアウトを設定することができます。

ナビゲーションのレイアウト

次の設定が可能です。

ナビゲーション回り込み

無料版と有料版デフォルトの設定です。

ナビゲーション回り込み＆縦書き

中央揃え

サイトロゴも中央に表示されます。

中央揃え＆ナビ縦書き

タイトル中央＆ナビ貫通

ナビがコンテンツ幅いっぱいに広がって配置されます。

ヘッダーコンタクトあり＆ナビ貫通

住所や電話番号およびお問い合わせリンクボタンといったお問い合わせ情報がヘッダー内に表示されます。お問い合わせ情報はExUnitのお問い合わせ設定で入力します。

ヘッダーウィジェットあり＆ナビ貫通

ウィジェットの”ヘッダー右側エリア”に設置したコンテンツが表示されます。
（下記例では画像を配置しています）

スクロール時のナビ固定

次の設定が可能です。

”固定しない” 以外の４通りは以下の通りです。

固定 ナビ中央揃え

無料版と有料版デフォルトの設定です。

固定 ナビコンテナ幅

固定 ロゴ＆ナビ回り込み

固定 ロゴ＆ナビ回り込み全幅

フッターナビゲーション

外観＞カスタマイズ＞Lightningフッター設定　でフッター上部のナビゲーションの位置を左・中央・右の３つから選択することができます。

左表示

無料版と有料版デフォルト設定はこの左表示です。

中央表示

右表示

モバイルナビゲーション

ハンバーガーメニュー位置とメニューの開き方を変更可能です。

外観＞カスタマイズ＞Lightningモバイルナビ　で設定します。

モバイル固定ナビゲーション

有料版ではモバイル固定ナビゲーションとして、画面下部に次のようなナビゲーションを表示することができます。

デフォルト設定では、このモバイル固定ナビゲーションは非表示設定となっていますが、外観＞カスタマイズ＞Lightningモバイル固定ナビ　において表示設定します。

また、メニュー開閉ボタンの表示や各リンクボタン（最大４つまで）の設定が可能です。

上記以外にボタンの文字色・背景色・Current Colorの設定も可能です。

また、モバイル固定ナビを表示している場合、モバイル固定ナビウィジェットエリアが使用できるようになります。

まとめ

まとめとしてもう一度、無料版と有料版の比較の表を紹介しておきます。

	無料版	有料版
ヘッダーナビ	ナビゲーション 回り込み	（以下より選択可） ・ナビゲーション回り込み ・ナビゲーション回り込み＆縦書き ・中央揃え ・中央揃え＆ナビ縦書き ・タイトル中央＆ナビ貫通 ・ヘッダーコンタクトあり＆ナビ貫通 ・ヘッダーウィジェットあり＆ナビ貫通
スクロール時の ヘッダーナビ固定	固定 ナビ中央揃え	（以下より選択可） ・固定しない ・固定 中央揃え ・固定 ナビコンテナ幅 ・固定 ロゴ＆ナビ回り込み ・固定 ロゴ＆ナビ回り込み全幅
フッターナビ	左	左・中央・右　から選択可
モバイルナビ	メニューボタン：左 or 右 スライド方向（以下より選択） ・ドロップダウン ・左⇒右 ・右⇒左	メニューボタン：左 or 右 スライド方向（以下より選択） ・ドロップダウン ・左⇒右 ・右⇒左
ヘッダー上部ナビ	なし	表示可
モバイル固定ナビ	なし	表示可 （メニュー開閉と４つのボタン設定）

有料版ではかなりメニュー機能が豊富なのがわかりますね。

ナビゲーションメニュー１つでサイトの回遊率が大きく向上させることができます。有料版をぜひ検討してみてはいかがでしょうか？