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

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

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

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

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

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

• メニュー項(xiàng)目をドラッグして並べ替え、親子構(gòu)造を設(shè)定する

• 保存メニュー

このメニューはデフォルトではモバイルこれも手動(dòng)で割り當(dāng)てる必要がある。

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

• 外観 > テーマ設(shè)定 > ヘッダー > モバイルメニュー]に移動(dòng)する。

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

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

ヘッダービルダーを使ってモバイルヘッダー構(gòu)造を設(shè)定する

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

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

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

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

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

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

IV.メニュー展開(kāi)スタイルのカスタマイズ

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

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

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

• スタイルページでメニュー項(xiàng)目のフォント、背景色、ホバー狀態(tài)、その他のスタイルを設(shè)定する。
• メニューを追加する必要がある場(chǎng)合アイコン各メニュー?アイテムにCSSクラスを追加し、表示アイコンに合わせてちょっとしたスタイルを書(shū)くことができる。

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

WoodMart は、モバイルメニューを有効にするために、デバイスの幅を自動(dòng)的に判斷します。ただし、攜帯電話(huà)でのみ表示される要素を手動(dòng)で設(shè)定することもできます：

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

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

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

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

メニューのクリックがうまくいかない、スタイルがはみ出したり、ページが見(jiàn)えなくなったりする場(chǎng)合は、以下を試してみることをお?jiǎng)幛幛筏蓼梗?/p>

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

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

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

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

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

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

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

概要

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

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