WoodMart レスポンシブモバイルメニュー＆ヘッダーナビゲーション解説

もしウッドマートのテーマまた、モバイルでのメニューとヘッダーの表示は、実は別々に設定することができます。これは、閲覧効率やモバイルアクセス体験を向上させるために非常に重要です。ここでは、モバイルメニューをわかりやすく、見栄えよく表示するための各ステップの設定方法を詳しく解説します。

I. モバイル専用メニューを作る

まず、WordPressバックエンドのメニュー管理画面にアクセスします。

左メニューバーの[外観 > メニュー]をクリックします。
ページ上部の「新しいメニューを作成」をクリック。

このメニューに「モバイルメニュー」などの名前をつける。

左側で、ページ、カテゴリー、商品リンクなど、メニューに入れたいコンテンツを選択し、「メニューに追加」をクリックします。

メニュー項目をドラッグして並べ替え、親子構造を設定する

保存メニュー

このメニューはデフォルトではモバイルこれも手動で割り当てる必要がある。

II.モバイルメニューの位置をバインドする

外観 > テーマ設定 > ヘッダー > モバイルメニュー]に移動する。

ドロップダウンリストより、先ほど作成した「モバイルメニュー」を選択します。
設定の保存

そうすれば、携帯電話でハンバーガーのアイコンをタップすると、今設定したものが表示される。

ヘッダービルダーを使ってモバイルヘッダー構造を設定する

WoodMart は、ビジュアルなヘッダービルダーを提供しています。モバイル・デザイン・ヘッダー構造。

バックエンドの[WoodMart > Header Builder]にアクセスします。

モジュールをドラッグ＆ドロップしてモバイルヘッダーを構築する：
- 左のロゴ。
- 中央を空にするか、検索アイコンを追加する
- 右側にはメニューアイコンとカート

ページ上部にデスクトップ、タブレット、携帯電話の3つのデバイスアイコンがあり、「モバイル」アイコンをクリックするとモバイル表示に切り替わります。

各モジュールをクリックすると、モバイルで有効かどうか、スティッキーエフェクトが有効かどうかなど、表示条件を設定できる。

保存」をクリックし、ウェブサイトを更新すると結果が表示されます。

IV.メニュー展開スタイルのカスタマイズ

WoodMartは、展開方向、アイコンのスタイル、アニメーションなど、モバイルメニューの展開スタイルの最適化に対応しています。

WoodMart > Header Builder]にアクセスします。
モジュールを編集する

ショッピングカートのアイコンのオン・オフ、検索のオン・オフができます。アイコンスイッチ、アカウントエントリーなど

スタイルページでメニュー項目のフォント、背景色、ホバー状態、その他のスタイルを設定する。
メニューを追加する必要がある場合アイコン各メニュー・アイテムにCSSクラスを追加し、表示アイコンに合わせてちょっとしたスタイルを書くことができる。

V. モバイル端末でのみメニューを表示させる

WoodMart は、モバイルメニューを有効にするために、デバイスの幅を自動的に判断します。ただし、携帯電話でのみ表示される要素を手動で設定することもできます：

エディターで「レスポンシブ」設定を開き、「モバイルのみ」にチェックを入れることができます。

同様に、デスクトップ表示のみに適した特定のコンテンツは、デスクトップでのみ表示されるように設定することができます。

これにより、エレメントの積み重ねや重複が避けられ、アクセスの明瞭度が向上する。

第六に、メニューのスタイルが間違っているか、無効な解決策です。

メニューのクリックがうまくいかない、スタイルがはみ出したり、ページが見えなくなったりする場合は、以下を試してみることをお勧めします：

キャッシュを消去(テーマキャッシュ、プラグインキャッシュ、ブラウザキャッシュはすべてクリアされます。）
サードパーティのメニュー拡張プラグインや多言語プラグインなど、メニュー構造に影響を与えるプラグインがインストールされていないか確認する。
CDNが有効になっているか確認し、テストスタイルのロードを一時的に無効にしてみる。
ブラウザの "Inspect Element "を使って、スタイルの衝突があるかどうかを確認する。 モバイルナビそしてモバイルメニューそしてハンバーガーアイコン にめい

高度な遊び：Elementorを使ってモバイルメニューエリアをカスタマイズする

を使用する場合エレメンタル・プロまた、モバイルメニューエリアを完全にカスタマイズすることもできます。

セクション "タイプのElementorテンプレートを作成します。

画像、ボタン、ナビゲーションメニューコンポーネントの挿入、自由なレイアウト

ヘッダービルダーのカスタムブロックにショートコードでテンプレートを埋め込む
利用するレスポンシブデスクトップ表示を非表示にし、モバイルでのみこのテンプレートを表示する設定

このアプローチは、ブランドの公式サイトやeコマース・ブランドなど、スタイルへの要求が高いサイトに適している。

概要

WoodMartは、組み込みのヘッダービルダー、メニューシステム、そして独立したデザインのためのElementorにより、モバイルメニューとナビゲーションの面で実際に非常に柔軟です。また、独立したデザインも可能です。モバイルメニューデスクトップのメニューを継承」する代わりに、携帯電話上でよりすっきりとしたアクセスと集中した機能を実現する。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み