ヘッダーは「サイトのロゴや名前、どんなぺージがあるのか（メニュー）」を示す部分です。「ヘッダーメッセージ」はお知らせ告知におすすめの機能です。
設定できる内容
| ヘッダーメッセージ | サイトの最上部にメッセージを表示します。 |
| ヘッダーバー | メニューと別に「ヘッダーボタン」や「検索フォーム」を表示します。 |
| ドロワーメニュー | モバイル端末で右上の「≡」で表示されるメニューの設定です。 |
| メガメニュー | 画像スライダー式のメニューの設定です。 |
設定箇所
ダッシュボード内のTCDテーマ > ヘッダーで設定します。
ヘッダーメッセージ
サイト内の最上部に表示され、タイムリーなお知らせやLPへの導線などに使えます。固定ページLPではページごとに内容を設定できます。
設定項目はこちら。簡単に設定・更新できるのでぜひ活用してください。
- 表示/非表示
- メッセージ
- リンク先URL
- 文字色
- 背景色
ヘッダーバー
テーマオプションではこのような設定項目が用意されています。
| ロゴ | テーマオプションの「基本設定」> 「ロゴ」 > ヘッダーロゴ設定で設定されたロゴを表示します。 |
| メニュー | 外観 > メニューの「グローバルメニュー」を表示 >> メニューの設定方法 |
| 検索フォーム |
検索フォームの表示/非表示を設定します。 検索対象はTCDテーマ > 基本設定 > 404・検索結果ページ > 検索結果ページで選択できます。 ※「WooCommerce」を有効化時は、検索対象は商品のみになります。 |
| お気に入り |
WooCommerceのお気に入りページを表示するか、任意のURLを設定できます（非表示も可）。 |
| マイページ |
WooCommerceのマイページを表示するか、任意のURLを設定できます（非表示も可）。 |
| カート |
WooCommerceのカードページを表示するか、任意のURLを設定できます（非表示も可）。 |
設定画面はこのような感じで、反映される箇所がわかりやすくなっています。
ドロワーメニュー
スマホで見たときのドロワーメニューの設定です。イメージ画像を見ながら設定してみてください。メニュー2、メニュー3の設定は必須ではありません。メニュー項目が多くなる場合にご活用ください。
メガメニュー
3種類のメガメニューを用意しました。
まず最初に、「アクセントカラー」「ホワイト」からカラーを選択します。サブメニューにも適用される仕様です。もちろん後から変更も可能です。
通常のテキストのみのメニューより、多くの情報をわかりやすく表示できます。たとえば、画像が表示することでリンク先の内容を視覚的に表現できます。
| 投稿スライダー | 投稿記事をスライダー形式で表示する（デモサイト「MANUAL」に設定） |
| バナースライダー1 | 画像とテキストをスライダー形式で表示、マイクロコピーを下部に表示（デモサイト「MENU」に設定） |
| バナースライダー2 | 画像とテキストをスライダー形式で表示、マイクロコピーを上部に表示（デモサイト「SHOP」に設定） |
各メガメニューで設定できる内容
それぞれのメガメニューでは次の設定が可能です。
| 投稿スライダー | ・記事のタイプ（すべての記事/カテゴリー指定/ID指定） ・記事の並び順（新着順/ランダム） |
| バナースライダー1、２ | 以下を設定できるアイテムを任意の数だけ追加可能。 ・タイトル ・画像 ・マイクロコピー ・リンク先 |
任意のメニューをメガメニュー化する
メガメニューを設定できたら、外観 > メニューから「グローバルメニュー」を開き、メガメニュー化したい項目の「メニュータイプ」を変更します。
設定が済んだら、必ずPC・スマホそれぞれで表示を確認しましょう。
- メニューは適切な数・ラベルになっている？
- メガメニューに表示されている記事は意図通り？
- メガメニュー「バナースライダー1、2」のリンク先は正しい？
以下の記事では、ヘッダーを美しくするための改善案を紹介しています。ドロワーメニューでも同じポイントを意識するといいでしょう。
