こんにちは! るーしーです。
今回は「WordPress(ワードプレス)のテーマLightning(ライトニング)の新しいモバイルナビ」についてです。
メニュー表示がより機能的になったとの事ですので早速使ってみました。
【参考】
⇒Lightning開発社株式会社ベクトルさんの更新情報
簡単に説明するとモバイルのメニュー表示に色々(ウィジェット)と追加や変更を加える事ができるようになったという事ですね。
早速新モバイルナビゲーション「VK Mobile Nav」の使用感をレポートしていきたいと思います。
少し長くなるので今回は「PC版のヘッダーメニューと同じ表示にする」ところまで紹介します。
従来からの変更点
１：下階層が開閉式になった
開閉するとこのようになります。
子階層メニューが多い場合は従来のモバイル表示よりかなりスッキリすると思います。
従来のモバイル表示
メニューマーク(ハンバーガーメニューというらしい)が左上にあります。
クリックする事でPCのヘッダーメニューと同じようにメニューが表示される仕組み。
余談：ハンバーガーメニュー？
最近のモバイルサイトではハンバーガーメニューが多いようです。
ハンバーガーメニューはこれ。
「ん、んーーー？」
「ま、まあ見えなくもない……かな」
Lightning(ライトニング)のモバイルメニューは比較的ハンバーガに近いフォルムですね(笑)
他に「ドロワーメニュー」とも呼ばれるようです。
２：メニュー上下にウィジェットエリアができた
設定できるウィジェットはかなり多く、fecebookやTwitter等のSNSや3PRブロック、CTA他にも多々あります。
※今回の記事ではウィジェットの設定まで触れずに「PC版のヘッダーメニューと同じ表示にする」事を目標に進めます。
※画像の青いバックの個所は「編集権限のあるユーザー」のみ表示されますので通常のユーザーさんには表示されないようです。
WordPress(ワードプレス)のユーザーとしてログインしていない状態で画面確認したところこの青い部分の表示はありませんでした。
新しい「VK Mobile Nav」を使ってみる
前提
１：WordPress(ワードプレス)のテーマはLightning(ライトニング)を使用
２：プラグイン「Lightning Advanced Unit」を使用
「VK Mobile Nav」の設定手順
１：プラグイン「Lightning Advanced Unit」を最新の状態にする
「VK Mobile Nav」は3.0.1以上に実装されている。
更新をしていない場合は最新バージョンに更新しましょう。
２：WordPress(ワードプレス)の管理画面から「外観→「カスタマイズ」をクリック
３：「Lightningデザイン設定」をクリック
４：「メニュータイプ(モバイル端末時)」の項目で「VK Mobile Nav」をクリック
最初から「VK Mobile Nav」が選択されていた場合も一度チェックを外し再度「VK Mobile Nav」を選択
【重要】
この状態で公開すると下の画像のようにモバイルのメニュー表示がおかしくなるのでここで設定を止めずに必ず以降の手順も実施してください。
５：「下書きとして保存」する
６：「×」をクリックして閉じる
７：「外観」→「カスタマイズ」→「メニュー」をクリック
８：「メニューの位置」の「すべての位置を表示」をクリック
９：「Mobile Navigation」を「メインメニュー」に設定する
最初は「-選択-」となっている。
「メインメニュー」に設定する。
１０：「下書きとして保存」する
１１：表示をモバイルに切り替える
画面下のモバイルマークをクリック。
するとモバイルの画面表示になる。
１２：メニューボタンをクリックしメニューを表示する
表示されたメニュー。
子階層が折りたたまれていますね。
１２：折りたたまれた子階層を表示する
三角マークをクリックすると子階層が表示される。
子階層が表示されました。
更にモバイルを使用して表示を確認する事は忘れずにしましょう。
表示が問題なければ公開をします。
１３：「操作」を公開に合わせ「公開」ボタンをクリック
歯車ボタンを押し「公開」に合わせて「公開」ボタンをクリックし公開する。
１４：モバイルでメニュー表示を確認する
子階層が折りたたまれていますね。
開けるかも確認します。
問題なさそうです。
以上で作業完了です。
お疲れ様でした！！
まとめ
いかがでしたか？
ひとまず今回は新しいモバイルメニューの子階層表示まで紹介しました。
上部ウィジェットと下部ウィジェットについては次回紹介したいと思います。
少し話は反れますが実はつい先日「3PRエリアを2列使う」という内容の記事を書きました。
この記事の背景にはモバイルの画面表示について考えるところがあったからです。
「モバイルはそもそもメニューを開かない事が多い」
という悩みがあり色々と考えました。
今回は画面表示自体ではなくメニューを開いた状態の改善ですが確実に従来よりも見やすく機能的になっていると思います。
良い物はどんどん取り入れ、よりユーザーさんに優しいものを作っていきたいものです。
そんな中で良い物を見つけたらこれからもどんどん紹介していきますね。
スポンサーリンク
