ウェブサイトの場合、トップページを最初に見たときの視覚効果はヘッダーで決まり、全体の閲覧を終えたときの印象はフッターで決まる。使用方法 ウッドマート テーマでは、ヘッダーとフッターを適切にレイアウトすることで、サイトのプロフェッショナルな雰囲気を高め、商品カテゴリの閲覧、Eメールの購読、カスタマーサービスへの問い合わせなど、重要なアクションを訪問者に案内することができます。
![画像 [1] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714093003333-hfsseedprodfooterpreview.png)
この記事では、ウッドマートのテーマであるヘッダーとフッターカスタマイズの方法と実践的なエクササイズを組み合わせることで、ブランドのスタイルに合ったページ構成を素早く作成することができます。
I. ヘッダービルダー機能を有効にする
WoodMartには、強力なヘッダービルダーツールが組み込まれており、テーマをインストールするとデフォルトで有効になります。バックエンドのメニューからアクセスしてください:
ウッドマート → ヘッダービルダー
![画像 [2] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714094025944-image.png)
ここでは、あらかじめ設定されたテンプレートから選択することも、一から自分好みの構造を構築することもできる:
- 左右のロゴとメニューの組み合わせ
- 中央ナビゲーション+検索バー
- トップ通知バー(プロモーション情報や連絡先情報に対応)
- ユーザーログインポータル、ショッピングカートアイコン、カスタムボタンなど
![画像 [3] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714095545216-image.png)
各要素はドラッグ&ドロップが可能で、表示はデスクトップ、タブレット、モバイル用に別々に設定され、異なるデバイスとの互換性を確保している。
![画像 [4] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714105642613-image.png)
ヘッダー構造のカスタマイズ提案
より明確なナビゲーションとスムーズなインタラクションのために、以下の構造スキームを参照してください:
- 左側ロゴ+メインメニュー
- 右側検索、ユーザーセンター、ショッピングカートアイコン
- トップバー(オプション):アナウンス、電話、ソーシャルリンク
![画像 [5] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714095622588-image.png)
セッティング方法:
- ヘッダービルダーで任意のモジュールをクリックする。
- アライメントの調整、アライメント
- 色、間隔、フォントサイズなどの視覚的なプロパティを設定します。
![画像 [6] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714101329868-image.png)
また、各モジュールごとにモバイルで非表示にするかどうかを設定し、コンテンツが過負荷にならないよう簡潔にすることもできます。
![画像 [7] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714101405773-image.png)
III.動的コンテンツの追加(言語切り替え、ログインボタンなど)
ウッドマートでは、ヘッダーモジュールにショートコードを挿入することができます。例えば、右上にログイン/登録ボタンを追加したい場合、以下のショートコードを使用することができます:
[ウッドマート_ログイン]
![画像 [8] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714101809466-image.png)
同様に、あなたのサイトがポリグロットステーション WPML もしかしたら ポリラン プラグイン)、言語スイッチャーモジュールをヘッダーに追加し、訪問者が希望するバージョンを素早く切り替えられるようにすることができます。
フッターレイアウトのカスタマイズ
フッターセクションは テーマ設定 → フッター 設定は
WoodMartには2つのセットアップ方法があります:
- デフォルトのフッターレイアウトを使用する(素早く)
- カスタムフッターブロックの作成(より柔軟に)
![画像 [9] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714102527785-image.png)
デフォルトのレイアウト調整ステップ:
- テーマオプション > フッター
- レイアウトスタイルの選択(1カラム、2カラム、3カラム、4カラム)
![画像 [10] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714102219336-image.png)
- ある外観 → ウィジェット各カラムのコンテンツ(メニュー、テキスト、ウィジェット、ソーシャルアイコンなど)を設定します。
![画像 [11] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714103214410-image.png)
カスタムフッターブロックの作成(推奨)
手順は以下の通り:
- 新しいページを作成し、Elementor(またはWPBakery)を使ってエディタでフッターコンテンツをデザインする。
![画像 [12] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714104754139-image.png)
- 公開後、WoodMartに戻る → テーマ設定 → フッター
- カスタムフッターブロックを開き、先ほど作成したブロックページを選択します。
![画像 [13] - カスタムWoodMartヘッダーとフッターレイアウトガイド](https://www.361sale.com/wp-content/uploads/2025/07/20250714105011680-image.png)
このアプローチは、グラフィックモジュール、コンタクトフォーム、共同ブランドのロゴ、その他のコンテンツを追加するなど、よりブランド化されたウェブサイトに適している。
V. よくある間違いを避ける
- フッター要素が多すぎると、モバイルでは混乱を招く可能性があるため、モバイルでは副次的なコンテンツを非表示にすることを推奨する。
- フッターは、少なくとも著作権情報、連絡先情報、トップに戻るボタンを残しておくことを提案する。
- を使用する場合キャッシュプラグインヘッダーとフッターを修正した後はキャッシュをクリアしてください。そうしないとフロントエンドがリアルタイムで更新されない可能性があります。
結語
ウッドマートには、完全で柔軟なヘッダーとフッターのカスタマイズEコマース、ブログ、ブランド・プレゼンテーションなど、ターゲットとするスタイルに構造を簡単に合わせることができる。
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:info@361sale.com | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |
この記事へのリンクhttps://www.361sale.com/ja/67131この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。






















![絵文字[wozuimei]-Photonflux.com|プロのWordPress修理サービス、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 専門WordPress修復サービス、全世界対応、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

コメントなし