【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた

LINEで送る
Pocket

タイトル

こんにちは! るーしーです。

今回は「WordPress(ワードプレス)のテーマLightning(ライトニング)の新しいモバイルナビ」についてです。

 

メニュー表示がより機能的になったとの事ですので早速使ってみました。

【参考】
Lightning開発社株式会社ベクトルさんの更新情報

簡単に説明するとモバイルのメニュー表示に色々(ウィジェット)と追加や変更を加える事ができるようになったという事ですね。

早速新モバイルナビゲーション「VK Mobile Nav」の使用感をレポートしていきたいと思います。

少し長くなるので今回は「PC版のヘッダーメニューと同じ表示にする」ところまで紹介します。

スポンサーリンク

 

従来からの変更点

1:下階層が開閉式になった

開閉前

開閉するとこのようになります。

開閉後

子階層メニューが多い場合は従来のモバイル表示よりかなりスッキリすると思います。

従来のモバイル表示

モバイルメニュー

メニューマーク(ハンバーガーメニューというらしい)が左上にあります。

クリックする事でPCのヘッダーメニューと同じようにメニューが表示される仕組み。

従来の表示

余談:ハンバーガーメニュー?

ハンバーガー

最近のモバイルサイトではハンバーガーメニューが多いようです。

ハンバーガーメニューはこれ。

ハンバーガー

「ん、んーーー?」

ハンバーガーメニューボタン

ハンバーガー

「ま、まあ見えなくもない……かな」

Lightning(ライトニング)のモバイルメニューは比較的ハンバーガに近いフォルムですね(笑)

他に「ドロワーメニュー」とも呼ばれるようです。

2:メニュー上下にウィジェットエリアができた

ウィジェット追加可能

設定できるウィジェットはかなり多く、fecebookやTwitter等のSNSや3PRブロック、CTA他にも多々あります。
※今回の記事ではウィジェットの設定まで触れずに「PC版のヘッダーメニューと同じ表示にする」事を目標に進めます。

※画像の青いバックの個所は「編集権限のあるユーザー」のみ表示されますので通常のユーザーさんには表示されないようです。

WordPress(ワードプレス)のユーザーとしてログインしていない状態で画面確認したところこの青い部分の表示はありませんでした。

スポンサーリンク

新しい「VK Mobile Nav」を使ってみる

従来

前提

1:WordPress(ワードプレス)のテーマはLightning(ライトニング)を使用

2:プラグイン「Lightning Advanced Unit」を使用

1:プラグイン「Lightning Advanced Unit」を最新の状態にする

「VK Mobile Nav」は3.0.1以上に実装されている。

更新をしていない場合は最新バージョンに更新しましょう。

2:WordPress(ワードプレス)の管理画面から「外観→「カスタマイズ」をクリック

外観

3:「Lightningデザイン設定」をクリック

Lightnng設定確認

4:「メニュータイプ(モバイル端末時)」の項目で「VK Mobile Nav」をクリック

モバイルナビ選択

ポイント

最初から「VK Mobile Nav」が選択されていた場合も一度チェックを外し再度「VK Mobile Nav」を選択

【重要】
この状態で公開すると下の画像のようにモバイルのメニュー表示がおかしくなるのでここで設定を止めずに必ず以降の手順も実施してください。
途中の状態

5:「下書きとして保存」する

下書き選択

保存

6:「×」をクリックして閉じる

閉じる

7:「外観」→「カスタマイズ」→「メニュー」をクリック

「外観」→「カスタマイズ」→「メニュー」

8:「メニューの位置」の「すべての位置を表示」をクリック

全ての位置を表示

9:「Mobile Navigation」を「メインメニュー」に設定する

最初は「-選択-」となっている。

選択

「メインメニュー」に設定する。

メニュー選択

10:「下書きとして保存」する

下書きとして保存

11:表示をモバイルに切り替える

画面下のモバイルマークをクリック。

表示切替

するとモバイルの画面表示になる。

切り替わった表示

12:メニューボタンをクリックしメニューを表示する

クリック前

表示されたメニュー。

メニュー

子階層が折りたたまれていますね。

12:折りたたまれた子階層を表示する

子階層選択前

三角マークをクリックすると子階層が表示される。

子階層が表示されたメニュー

子階層が表示されました。

更にモバイルを使用して表示を確認する事は忘れずにしましょう。

表示が問題なければ公開をします。

13:「操作」を公開に合わせ「公開」ボタンをクリック

歯車ボタンを押し「公開」に合わせて「公開」ボタンをクリックし公開する。

公開

14:モバイルでメニュー表示を確認する

モバイル表示1

子階層が折りたたまれていますね。

開けるかも確認します。

モバイル表示2

問題なさそうです。

以上で作業完了です。

お疲れ様でした!!

まとめ

いかがでしたか?

ひとまず今回は新しいモバイルメニューの子階層表示まで紹介しました。

上部ウィジェットと下部ウィジェットについては次回紹介したいと思います。

 

少し話は反れますが実はつい先日「3PRエリアを2列使う」という内容の記事を書きました。

 

この記事の背景にはモバイルの画面表示について考えるところがあったからです。

 

「モバイルはそもそもメニューを開かない事が多い」

という悩みがあり色々と考えました。

今回は画面表示自体ではなくメニューを開いた状態の改善ですが確実に従来よりも見やすく機能的になっていると思います。

良い物はどんどん取り入れ、よりユーザーさんに優しいものを作っていきたいものです。

そんな中で良い物を見つけたらこれからもどんどん紹介していきますね。

【関連】
【ワードプレス】ライトニングの3PRエリアを2列使うと訴求力が凄い件

【ワードプレス】ライトニングの3PRエリアを2列使うと訴求力が凄い件


【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた-その2

【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた-その2

【ワードプレス×ライトニング】最適なモバイルメニュー表示について考えた

【ワードプレス×ライトニング】最適なモバイルメニュー表示について考えた

ではまた!

笑顔

スポンサーリンク
LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です