ウッドマートのテーマEコマースサイトのための非常に柔軟なヘッダーデザインシステムです。ミニマリストナビゲーション、ロゴセンター、トップパススルー、検索ボックスやショッピングカートを統合した複雑なレイアウトなど、あらゆるレイアウトが可能です。このチュートリアルでは、WoodMartをインストールしたばかりの方や、サイトのトップを再構築したい方に向けて、ヘッダーレイアウトの設定からカスタマイズまでを順を追って説明します!ナビゲーションメニューのコンフィギュレーション
![图片[1]-完整设置 WoodMart 头部布局与导航菜单的方法](https://www.361sale.com/wp-content/uploads/2025/05/20250528172954568-image.png)
I. ヘッドレイアウトの入り口はどこですか?
WordPressのバックエンドに入ったら、順番にクリックしてください:
ウッドマート > ヘッダービルダー
![图片[2]-完整设置 WoodMart 头部布局与导航菜单的方法](https://www.361sale.com/wp-content/uploads/2025/05/20250528151532679-image.png)
この中でビジュアライゼーション・エディターインターフェイスを見ると、ヘッド構造全体がゾーンに分かれていることがわかる:
- トップ・バー
- ヘッダー メイン
- ヘッダー下部
各エリアには、ロゴ、メニュー、検索ボックス、ボタンなどのコンポーネントを追加することができます、アイコンその他
![图片[3]-完整设置 WoodMart 头部布局与导航菜单的方法](https://www.361sale.com/wp-content/uploads/2025/05/20250528160904871-image.png)
II.ロゴとバナーの設定
をクリックしてください。 ロゴ モジュールの左側に設定パネルがポップアップ表示されます:
![图片[4]-完整设置 WoodMart 头部布局与导航菜单的方法](https://www.361sale.com/wp-content/uploads/2025/05/20250528153814592-image.png)
- メインロゴ画像のアップロード
- Retina HDバージョンをアップロードするオプション
- ロゴの幅、余白の設定
- ロゴの下にスローガン」のテキストを設定可能(例:ブランドスローガン)
ロゴは各ページの最初に目に入る部分であり、背景の衝突を避けるために透過PNGフォーマットを使用することをお勧めします。
ナビゲーション・メニューの追加とカスタマイズ
メニューヘッダーの最も重要な機能部分であり、セットアップの手順は以下の通り:
WordPressのバックエンドに移動します:
外観 > メニュー
- メインメニュー」という名前で新しいメニューを作る。
![图片[5]-完整设置 WoodMart 头部布局与导航菜单的方法](https://www.361sale.com/wp-content/uploads/2025/05/20250528173705898-image.png)
- メニューにページ、カテゴリー、リンク、その他の項目を追加する
![图片[6]-完整设置 WoodMart 头部布局与导航菜单的方法](https://www.361sale.com/wp-content/uploads/2025/05/20250528173757956-image.png)
- ドラッグで順序を調整し、複数レベルのドロップダウンを設定することができます。
![图片[7]-完整设置 WoodMart 头部布局与导航菜单的方法](https://www.361sale.com/wp-content/uploads/2025/05/20250528174038937-image.png)
- ページ下部の "Show location "ボックスにチェックを入れる。 メインメニュー
![图片[8]-完整设置 WoodMart 头部布局与导航菜单的方法](https://www.361sale.com/wp-content/uploads/2025/05/20250528174146677-image.png)
ヘッダー・ビルダーに戻り、「メニュー・コンポーネント」をヘッダー・メイン・エリアにドラッグして、ページにメニューを表示する。
IV.モバイルメニューの設定
ウッドマートは個別設定に対応モバイルモバイルからのアクセス時にメニューをすっきりと表示するのに最適なヘッダー構造。
入り込む テーマ設定 > ヘッダービルダー > モバイルヘッダー
あなたはそれを設定することができる:
- モバイルメニューボタン(ハンバーガーアイコン)を表示するかどうか
- 拡張メニューの内容(メニュー項目、アイコン、検索など)の移動
- ロゴの中央寄せまたは左寄せ
- その他の要素の非表示・表示(ショッピングカート、言語切り替えなど)
![图片[9]-完整设置 WoodMart 头部布局与导航菜单的方法](https://www.361sale.com/wp-content/uploads/2025/05/20250528155437111-image.png)
モバイルはシンプルであることに重点を置き、あまり多くのコンテンツを積み重ねないことを推奨する。
V. 複数のヘッダーレイアウトのサポート(オプション)
また、WoodMartは、例えば、ページごとに異なるヘッダーを使用することもサポートしています:
- ホームページは白地に白のヘッダーを使用
- 製品詳細ページの使用オープン首
- 特別なアイコンを使ったイベントページのナビゲーション
概要
ウッドマート ヘッダーシステムはとても柔軟なので、コーディングなしでブランドのポジショニングに適したナビゲーションエリアを素早く構築することができます。Header Builderのモジュール式アプローチでは、ロゴ、メニュー、検索バー、ショッピングカート、言語切り替えなどのコンポーネントを自由に組み合わせることができ、デスクトップとモバイルそれぞれに最適化されています。組み合わせる ワードプレス 独自のメニュー管理システムにより、ナビゲーション構造も簡単に維持できる。
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:[email protected] | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |






















![表情[wozuimei]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

コメントなし