Alex Ruben
Wixで複数のメニューを作成する方法：ステップバイステップのチュートリアル
複数のメニューを備えたウェブサイトを作成すると、訪問者のナビゲーションがスムーズになり、サイトがより整理された印象になります。しかし正直なところ、Wixのインターフェースは複数のメニューを追加する際には直感的とは言えず、少し操作を工夫する必要があるように感じます。メニューが思った場所に表示されなかったり、期待通りに動作しなかったりすることもあります。そのような状況に陥った方、あるいはより複雑なナビゲーションを実現したい方は、このガイドで実践的な手順をご案内しています。多少の試行錯誤は覚悟の上ですが、これらの修正方法は実際に現場で効果があった方法に基づいています。
Wixで複数のメニューを追加する際の修正方法
方法1: カスタムメニューフォルダシステムを使用する
これは一種の回避策ですが、特に異なるスタイルやセクションを使いたい場合に役立ちます。基本的に、複数のメニューを個別のエンティティとして追加する代わりに（Wixはネイティブではうまく処理できません）、複数のメニューをシミュレートするフォルダまたはページ構造を作成できます。つまり、異なるメニュー要素を手動で設定し、必要な場所に配置するということです。これは、デフォルトメニューの動作がおかしい場合や、ヘッダーにメニューが1つしか配置できない場合に有効です。
- Wix エディタ editor.wix.comにアクセスします。
- セクションの代わりに、ボタン要素またはリッチ メニューを追加して、カスタム サイドバーまたはフッター メニューを構築することを検討してください。
- メニューの管理オプションを使用して、カスタム メニューにページを割り当てます。
これらは手動で配置する必要があるため、レイアウトの微調整が必要になる場合があります。設定によっては、メニューが重なったり、整列しなかったりする場合もあるため、多少の調整が必要になることをご承知おきください。ただし、複数の独立したナビゲーションエリアが必要な場合は、この方法でも問題ありません。
方法2: カスタムコードで「セカンダリ」メニューを追加する
これは少し技術的な話になりますが、いわば秘訣と言えるでしょう。Wixは標準では複数メニューを公式にサポートしていないため、コードスニペットを使ってカスタムメニューを埋め込んだり、サードパーティ製のアプリを使用したりすることができます。よくある方法としては、Bootstrapなどのフレームワークで作成したカスタムメニューなど、別の場所から2つ目のメニューを読み込むHTMLコードを挿入する方法があります。
- Wix App Market の埋め込み & コードウィジェットまたはHTML iframe要素を使用します。
- このウィジェット内に、カスタム メニュー コード (たとえば、Bootstrap ナビゲーション バーや別のプラットフォームで作成されたメニューなど) を貼り付けます。
- 2 番目のナビゲーション バーとして、ページ上の任意の場所に配置します。
これはかなりうまく機能しますが、Wix がアップデートされたり、コーディングに慣れていない場合など、少し不安定な点に注意してください。また、モバイルでは扱いが難しい場合があるので、厳密にテストしてください。
方法3：Wix Corvid（Velo）を使ってダイナミックメニューを作成する
これはより高度ですが、非常に柔軟性に優れています。Wix Corvid（現在はVeloと呼ばれています）を使い慣れている方は、複数のメニューを動的に生成するスクリプトを作成できます。基本的には、バックエンドでメニューデータを作成し、小さなコードスニペットを使って、ロジックやレイアウトに基づいて異なるメニューを表示します。
- Wix エディターで開発モードを開きます(方法はこちら)。
- メニュー項目のデータ コレクションを作成します。
- カスタム コードを使用してメニュー要素を生成し、さまざまなページ セクションに挿入します。
非常に速い方法ではありませんが、メニューが複雑な場合は、この方法が最も柔軟に制御できます。ただし、これは一時的な切り替えではなく、恒久的な解決策であることにご注意ください。特定の設定では、スクリプトが正しく読み込まれていない場合、メニューが異常な動作をすることがありますので、十分にテストしてください。
最後のヒント: モバイルとデスクトップでサイトを確認する
どの方法を選ぶにせよ、必ずデバイス間でサイトを切り替えて確認しましょう。Wixは細かい設定が細かいので、デスクトップでは綺麗に見えても、モバイルではサイズ調整やレイアウト調整をしないと全く崩れてしまうことがあります。追加メニューが表示されなかったり、壊れているように見えるのは、おそらくこれが原因でしょう。
信じてください、セクションのサイズを変更したり、余白を調整したり、モバイルでは非表示にする設定をオフにしたりするだけで、多くの問題が解決できる場合があります。もちろん、Wix は必要以上に難しくしているからです。
まとめ
- Wixのメニューが制限されている場合は、カスタムセクションと埋め込み要素を使用します。
- より細かく制御するためにコード埋め込みを試してください。ただし、徹底的にテストしてください。
- 動的でスケーラブルなメニューには Velo を使用します (コーディングに慣れている場合)
- レイアウトの不具合を見逃さないよう、常にモバイルでプレビューしましょう
まとめ
Wixで複数のメニューを追加するのは簡単ではありません。少し奇妙に感じるかもしれませんが、回避策とカスタムコードを組み合わせることで、大抵はうまくいきます。少し面倒ではありますが、少しいじってテストを続ければ、サイトのナビゲーションが改善されるはずです。場合によっては、簡単な配置変更やCSSのちょっとした変更で解決できることもあります。ただし、Wixのインターフェースはこのような状況を想定して作られていないので、忍耐と少しの創造的思考が鍵となることを覚えておいてください。この記事が、誰かが頭を悩ませるのを防いでくれることを願っています。