Lightning用新モバイルナビゲーション「VK Mobile Nav」が利用可能になりました

Lightning用のモバイルナビゲーションが新しくなりました。
従来のモバイルナビゲーションも当面は利用できますが、基本的にはサポートを終了し新ナビゲーション「VK Mobile Nav」での改善に移行します。

VK Mobile Nav の特徴

簡単な動作デモ動画がありますのでまずはご覧ください。
※設定には若干クセがありますので、ページ下部の設定方法を必ずご覧ください。

下階層が開閉式になりました

従来のモバイルメニューでは、下階層のメニューも全て表示されていたため、メニュー項目が多いと非常に長いメニューとなっていましたが、VK Mobile Navでは下階層の項目がある場合は自動的に畳まれ、右側のメニュー展開のアイコンをクリックすると表示されるようになります。
これは、更に下の階層の項目でも同じです。

メニュー上下のウィジェットエリアで自由なアピールが可能

モバイル用のメニューなので、メニュー項目は当然ありますが、その上下にウィジェットエリアがあります。

従来はモバイルメニューの上には検索が強制的に表示されていましたが、今回はウィジェットエリア化した事で、メニューの上下に好みに応じて要素を設置する事ができます。

主に検索ウィジェットや、お問い合わせのボタン、バナー、カスタムメニューを置く事を想定しています。

※カスタムメニューで設置した項目は過階層は開閉式にはなりません。

今後の拡張予定

現在最低限の機能としてリリースしましたが、有料スキン利用者など向けに以下の機能拡張を予定しています。

  • メニューボタンの位置の左右切り替え機能
  • モバイルメニューの背景色の変更機能(特定の有料スキン利用者向け)
  • ページ下部固定のモバイルアイコンメニュー(何かしらの有料オプション)
  • 画面幅の広いタブレットでの閲覧時にPC版に近いUIになるよう改善

※あくまで予定につき実装時期などは未定です。

新モバイルメニュー開発の背景

そもそも今回のメニュー開発においては、以下の理由によります。

メニュー構造の問題

システムが複雑すぎる

従来版のスライドメニューでは、モバイル時のメニューを特に何も設定しなくてもヘッダーメニューとして登録されたメニューが普通に表示されるようにするため、JavaScriptを用いた特殊な処理をしていました。

モバイルメニューを開閉する度にHTML要素が可変していたのですが、おかげで利用端末によって挙動が不安定になる事がし、構造が複雑な故に原因の特定・改善が困難でした。

ページ内リンクが設定出来なかった

従来のメニューシステム(横スライドメニュー)では、構造上の問題があり、メニューのカスタムリンクでページ内リンクを設定して、その項目をタップしても、メニューを閉じた瞬間にページトップに戻ってしまうという欠陥があり、1ページ内に複数のコンテンツを積み上げるタイプのページ需要が高い昨今では問題がありました。

モバイルメニューのカスタマイズが難しい

JavaScriptで複雑な制御をしていたために、余程スキルの高い人でない限りモバイル時のメニューのカスタマイズが非常に困難でした。それを今回はモバイルメニュー内にウィジェットエリアを設ける事で、ソースコードを特別触らなくても誰でも簡単にカスタマイズしやすくなっています。

ページ下部固定のアイコン表示のメニューの重要性

こちらはまだ実装していませんが、ハンバーガーメニューはそもそもタップされない事が多いため、お問い合わせやサービス紹介など主要なページへのリンクは、ページ下部にわかりやすいアイコンとともに常に固定で表示しておくユーザーインターフェイスの需要が非常に高くなっています。そういったものを実装するには、現状のナビゲーションとは根本的に異なる構造にした方が実装・テスト・利用者の移行がおこないやすかったという背景があります。

設定方法

1. Lightning Advanced Unit のバージョンアップ

新モバイルナビゲーション「VK Mobile Nav」は Lightning Advanced Unit に実装してあります。Lightning Advanced Unit を3.0.1 以上にバージョンアップしてください。

※拡張プラグイン Variety / JPNSTYLE / Origin Pro をご利用の方は各プラグインをバージョンアップをしてください。

2. VK Mobile Nav への切り替え

まずは「外観 > カスタマイズ」画面を開き、「Lightningデザイン設定」パネルを開きます。その中の「メニュータイプ(モバイル端末時)」の項目で「VK Mobile Nav」を選択してください。

この際、既に「VK Mobile Nav」が選択されていた方は、一度他のラジオボタンを選択した上でもう一度「VK Mobile Nav」を選択して、設定を保存してください。

そして、設定を保存したら、一度ブラウザの更新ボタンを押して画面を再読込してください。画面を再読込みしないとメニューは切り替わりません。

3. メニューの設定

メニュータイプを「VK Mobile Nav」に切り替えたら、モバイル用のメニューを設定する必要があります。

PC版のヘッダーメニューなど既存のメニューと同じで良い場合は、「外観 > カスタマイズ」画面の「メニュー」パネルの中の「メニューの位置」の「全ての位置を表示」からメニューを設定する事ができます。

4. ウィジェットの設定

メニューの上下のエリアにウィジェットを設定する事ができます。「外観 > カスタマイズ」画面の「ウィジェット」パネルの中の「モバイルナビ上部」「モバイルナビ下部」にお好みに応じてウィジェットを設定ください。

設定ガイド

プラグインやウィジェットの使い方がわからない場合、まずは設定ガイドのページをご確認ください。

Lightning用新モバイルナビゲーション「VK Mobile Nav」が利用可能になりました” に対して 12 件のコメントがあります

  1. 木下義高 より:

    「VK Mobile Nav」を設置しましたが、不具合があるようです。
    削除したはずのウィジェットが表示され続けています。

    1. モバイルナビ上部に「メニュー」を設置
    2. 削除して代わりに「検索」を設置
    3. モバイルナビ下部に「メニュー」を設置

    削除しためにゅーが上部に表示され続けています。
    ご確認ください。

    1. 石川栄和 より:

      記載の手順にて今確認した限りでは発生しませんでした。

      ただ、開発途中でメニューの切り替えがカスタマイズ画面から出来ずに「あー、これはWordPressの仕様上仕方ないな〜。」と思った場面はあったような気がするので、再度発生する手順をご確認ください。

      もしかしたら、下書き保存されているだけで本番公開されてないとか、そのあたりもご確認ください。

      1. 木下義高 より:

        原因が分かりました。

        VK Mobile Navを有効にする前には、「メニュー設定」「メニューの位置」で

        「Mobile Navigation」にチェックが入っていました。
        スマフォでもメニューを表示するためです。

        VK Mobile Navを有効にしたあとは、このチェックを外さないと二重にメニューが表示されるのですね。

        このチェックを外してやれば、正常に表示されるようになりました。

        1. 石川栄和 より:

          「Mobile Navigation」にチェックが入っていてメニューが2重に表示されるという事は、モバイルナビ上部あるいは下部のウィジェットエリアにカスタムメニューウィジェットで配置している状態でしょうか?
          メニューの下階層がアコーディオンで開閉式になるのは「Mobile Navigation」の部分だけですので、下階層のメニュー開閉式にしたい場合は「Mobile Navigation」にチェックを入れて、ウィジェットには同じナビゲーションはカスタムメニューで配置しない設定が推奨となります。
          ご参考まで。

  2. 中村 より:

    お世話になります。
    「外観」「カスタマイズ」「Lightningデザイン設定」から「メニュータイプ(モバイル端末時)」 「VK Mobile Nav(推奨)」にチェックを入れて、「公開」ボタンを押したのですが、その後、「外観」「カスタマイズ」「メニュー」「メニューの位置」「すべての位置を表示」としても、一番上が、「Header Top Navigation」のままです。で、「外観」「カスタマイズ」「Lightningデザイン設定」から「メニュータイプ(モバイル端末時)」に戻ると、「 Side Slide(非推奨)」に戻ってしまっています。

    よろしくお願いいたします。

    1. 石川栄和 より:

      拡張デザインスキンをご利用ではないでしょうか?
      拡張デザインスキンをご利用の場合はお手数ですがDLmarketより最新版をダウンロードしてご確認ください。
      以上よろしくお願いいたします。

      1. ヒロ より:

        横から失礼します。

        自分も同じ現象でしたが、拡張デザインスキンを更新しましたら改善しました。

        ありがとうございます。

      2. 中村 より:

        ありがとうございます。

        最新版をダウンロードし、インストールし直したところ、うまくいきました。

        取り急ぎ、お礼まで。

        1. 石川栄和 より:

          無事反映できたとの事なによりです。
          今後ともLightningをよろしくお願いいたします。

  3. ゆり より:

    いつもお世話になっております。
    メニューを設定してスマホで表示してみたところ、
    『ここはウィジェットエリアです。…*このメッセージは編集権限のあるユーザーにのみ表示されています。』
    というものがどの他人の端末からでも表示されて見られてしまっています。

    何か設定が必要でしたでしょうか?

    1. 石川栄和 より:

      ご報告ありがとうございました。
      大変失礼しました。修正アップいたしましたのでプラグイン頁より更新してください。

      1. ゆり より:

        さっそくのご対応、ありがとうございました。

コメントを残す

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