プラグインなしでWordPressヘッダーを作成する
ヘッダーは、サイトを訪れるすべてのユーザーが目にする唯一の部分であり、多くのテーマが9つのオプションを並べた設定画面の裏に隠している部分でもあります。Canvasでは、ヘッダーはエディターでブロックから組み立てるレコードです。そのため本ガイドは、チェックボックスを見て回るツアーではなく、実際に組み立てる手順を説明します。
手順1：Canvasにおけるヘッダーとは
ヘッダーは、固定ページと同じようにWordPressの管理画面に一覧表示され、同じブロックエディターで編集できるレコードです。この一つの判断により、サイトの構成からヘッダープラグインが不要になります。
他のテーマは、ヘッダーを別の場所で構築しています。BlocksyとAstraはどちらも、ヘッダービルダーをカスタマイザーに置いています。カスタマイザーは、サイトの横に表示される設定パネルで、ページを書く編集画面とは別になっています。当社のBlocksyとの比較では、2つのアプローチを並べて紹介しています。
入れ子構造
ヘッダーレコードにはHeader Rootが含まれます。Header RootにはHeader Containerがあり、ヘッダーをボックス型にするか全幅にするか、あるいは特定のブレークポイントで一方、それ以外で他方にするかを決めます。Header ContainerにはHeader Zonesが含まれ、ゾーンはヘッダー行のセルです。ロゴは一つ目のゾーンに、ナビゲーションは次のゾーンに、検索アイコンとカートは最後のゾーンに配置します。
ヘッダー系のブロックは全部で22個あり、一般的なサイトで実際に使うのは4～5個ほどです。それ以外は、ショップ検索、言語リンク、角に置く営業時間のブロックなど、必要になったときのために用意されています。
これは別のエディターではありません。WordPressでページを編集できるなら、ヘッダーも編集でき、同じ元に戻す操作、ブロック設定、キーボードショートカットがそのまま使えます。
ステップ2：ヘッダーのレコードを作成
Canvasメニューの「Headers」リストを開き、新しいレコードを追加します。出発点は2つあり、どちらも現実的な選択肢です。
パターンから始める
ヘッダーパターンを挿入すると、配置済みの通常のブロックが追加され、並べ替え、名前変更、削除が自由にできます。ヘッダーは本製品で最も多いパターンカテゴリーであり、パターンは全183個あるため、ほとんどの場合、近い形のものが見つかります。最初に構築する場合は、この方法が最も速く、おすすめです。
デモから始める
88件のデモサイトの1つをインポートした場合、そのヘッダーはすでにサイト上のレコードになっています。開いて変更するか、複製してコピーで試してください。動作しているヘッダーを編集すると、空のキャンバスから始めるより早く構造を理解できます。
レコードには、用途がわかる名前を付けてください。例：「メインヘッダー」「ランディングページ用ヘッダー」。1か月以内に3つ作成することになるため、見分ける手掛かりは名前だけになります。
ステップ3：ゾーンを配置する
ゾーンがレイアウトを担当するため、配置用のクラスで苦労することはほとんどありません。
- ゾーンを端まで寄せます。 左側のゾーンにロゴ、中央のゾーンにメニュー、右側のゾーンにアクションを配置する構成が、ほとんどのサイトで最終的に採用されています。
- 関連する要素はまとめて配置しましょう。検索アイコン、カート、ボタンを1つのゾーンに置くと、まとまりとして扱われ、ひとつのグループとして間隔が揃えられます。
- ブレークポイントごとに順序を変更できます。 デスクトップで3番目にあるゾーンを、2つ目のヘッダーレコードを作ることなく、スマートフォンでは1番目に配置できます。
- ゾーンをデバイス区分で制限する。ゾーンに、表示スペースのないデバイスを除外するよう指定すれば、後からCSSで非表示にする必要はありません。
- 自作のスタイルシートからゾーンを操作したいときは、そのゾーンに独自のクラスを追加してください。
まずデスクトップ版のレイアウトを作り、パーツがすべて揃うまでそのままにしておきましょう。レイアウトの判断は、実際のコンテンツが行に配置された後の方がずっと簡単です。
ステップ 4：パーツを追加
次にゾーンを埋めていきます。ここにあるものはどれもブロックで、それぞれに、そのブロックが扱えるオプションを備えた設定パネルがあります。
- ヘッダーロゴ。 固定表示時用と暗い背景用の別ファイルでロゴを用意できるため、暗い写真の上に透明なヘッダーを重ねる場合も回避策は不要です。
- Header Navigation。ドロップダウンとメガメニューのパネルを備えたメインメニューです。WordPressのメニューを出力するため、メニュー自体の管理はいつもの場所で行えます。
- ヘッダー検索。 アイコンを押すと入力欄が開くものと、常に入力欄が表示されているもののどちらでも、デザインに合う方を選べます。
- Header Button。 通常のサイズ、スタイル、リンク設定を備えたコールトゥアクションです。説得力を持たせるなら1つ、3つはノイズになります。
- Header Cart。 商品点数とドロップダウン形式の概要を表示する、ストア向けのWooCommerceカートです。
- Header Icon Link、Header Social、Header Info。電話番号、ソーシャルプロフィールの並び、連絡先の詳細が入った小さなブロック、住所や営業時間。
リストでは足りないときのメガメニュー
メガメニューは独立したレコードで、ブロックとして構成し、Mega Menu ブロックで表示します。そのため、メニュー項目を選ぶと、列、画像、ボタンで構成された全幅のパネルが開きます。Mega Menu Column は、パネルをグリッドに沿って配置します。カテゴリに本当に構造があるときに使い、小規模サイトを忙しく見せるためには使わないでください。
ステップ 5：固定表示、透過、レイアウトプリセット
動作はプリセットから設定されます。プリセットは、ワンクリックで適用してあとから調整できるレイアウト設定のまとまりです。ほしい動作を選び、そのあとは好きな項目を自由に変更できます。
- 透明。背景がないため、ヘッダーの背後にあるものがそのまま見えます。ロゴのワードマークが読みやすいよう、ダークまたはライトのロゴバリエーションと組み合わせてください。
- 半透明。半透明の背景は、後ろの画像を見せながら文字を読みやすく保ちます。写真が込み入っている場合は、通常こちらの方が安全な選択です。
- フローティング、および半透明のフローティング、または小型のフローティング：ヘッダーがページ内に余白を取り、ウィンドウの端から離れて配置されるものです。
- 全幅の固定表示。ビューポートの幅いっぱいに広がり、ページをスクロールしても画面上部に固定されたままになります。
- スクロールアップで固定。 訪問者が下にスクロールするとヘッダーは上部から離れ、上にスクロールすると戻ります。これにより、長いページでも画面を広く使えます。
それらを支えるサイト全体の設定
ヘッダーオプションはテーマオプションの中で最大のセクションで、533項目中94項目を占めます。デフォルトのヘッダー、スティッキー動作、高さ、余白、モバイルのブレークポイントなど、どの単一のレコードも持つべきではない要素を担っています。デモをインポートするとすべてが自動で入力されるので、必要なものだけ変更してください。
手順6：スマホ用のヘッダー
アクセスの多くはスマートフォンからなので、ほかの何よりも先にこれを確認してください。うれしいことに、それは同じ記録です。
- 作り直さず、並べ替えるだけ。ロゴを中央に移動し、トグルを左、電話ボタンを右に配置します。すべてゾーンの並び順設定で行えます。
- 収まらないものは削除しましょう。 連絡先情報やソーシャルアイコンの行は、大きめの画面だけに表示するよう制限してください。スマートフォンに無理に詰め込んでも、誰の役にも立ちません。
- タップ領域は大きく保ちましょう。歩きながら人がタップしやすいのは、メニュー切り替えボタンと電話アイコンの2つです。
- ブレークポイントは意図的に設定しましょう。メニューが折りたたまれる幅は設定で変更できるため、長いメニューは短いメニューより早く折りたたまれる場合があります。
- モバイルメニューにはサイドパネルの利用をご検討ください。サイドパネルは画面の端からスライドして表示されるパネルで、本格的なメニュー、検索フィールド、ボタンを配置できます。
公開する前に、エディターで確認しましょう。Canvasは編集キャンバス上のヘッダーを、訪問者に表示されるのと同じコードで表示するため、スマートフォン表示は構築しながら確認できます。
ステップ7：サイト全体またはページごとに割り当て
レコードは、何かがそれを指し示すまで機能しません。レベルは2つあり、ヘッダーやフッターなど、サイトの共通パーツすべてで同じように動作します。
サイト全体のデフォルト設定
テーマオプションでデフォルトのヘッダーを設定すると、すべてのページがそれを使用します。トップバー、ページタイトルのデザイン、フッターも同様に設定してください。この設定により、新しいページを公開した瞬間から正しい見た目になります。
ページごとの上書き設定
どのページでも、個別の設定からこれらのいずれかを上書きできます。キャンペーンのランディングページでは透明なヘッダーを使い、トップバーは表示しません。一方、お問い合わせページでは標準のものをそのまま使えます。設定を複製する必要はなく、後から覚えておく必要もありません。上書きの設定は、影響を受けるページ自体に保存されるためです。
トップバー
上部バーは、電話番号、営業時間、言語切り替え、お知らせなどを配置できる、独自のブロックを持つ独立した要素です。Header Topbarブロックは、これをヘッダー行の上に配置します。独立しているため、休業日のお知らせなどは、ヘッダーに触れることなくサイト全体で変更できます。
出典
このガイドでCanvas以外の内容に触れる場合は、その内容を説明している公式ページを以下に掲載しています。
- 外観メニュー画面wordpress.org · WordPressメニューを作成し、テーマが提供する表示位置に割り当てる場所
- 達成基準2.5.8の理解：ターゲットのサイズ（最小）w3.org · タップターゲットの最小サイズを 24 × 24 CSS ピクセルとする理由
次のステップ
ヘッダーが大きな設計判断をなぜ左右するかを解説した2本のガイドと、ヘッダービルダーそのものです。
モバイル用に2つ目のヘッダーは必要ですか？
通常は必要ありません。1つのCanvasヘッダーレコードが、それ自体でスマートフォンに合わせて調整されるためです。ゾーンはブレークポイントごとに並び替えられ、それぞれデバイスの区分に限定できます。そのため、1つのレコードでスマートフォンのロゴを中央に配置し、連絡先情報を非表示にして、メニューをトグルの裏に移すことができます。レイアウトを修正するためではなく、本当に別のデザインにしたい場合にのみ、2つ目のレコードを作成してください。
1ページごとに異なるヘッダーを設定できますか？
はい、すべてのCanvasページは独自のヘッダーを持つことができます。ヘッダー、トップバー、ページタイトル、フッターにはそれぞれサイト全体のデフォルト設定と、ページごとの上書き設定があります。そのため、キャンペーンのランディングページでは、写真の上に透明なヘッダーを表示しつつ、それ以外のすべてのページでは標準のヘッダーのままにできます。
これはウィジェットエリアですか、それともメニューですか？
Canvas のヘッダーはそのどちらでもありません。ページと同じように、ブロックエディターで編集するレコードです。その中にあるロゴ、ナビゲーション、検索、カート、ボタンは、それぞれ独自の設定パネルを持つブロックです。WordPress のメニューは引き続き WordPress のメニューのままで、Header Navigation ブロックがそれを表示します。
ライセンスが失効すると、ヘッダーはどうなりますか？
お使いのサイトは今まで通り表示され続けます。一時停止されるのはサービスで、アップデート、デモのインポート、AI、プレミアムブロックの編集は、更新するまで停止します。ライセンス確認が弊社サーバーに接続できない場合は、14日間の猶予期間があります。
Canvasで次のウェブサイトを構築しましょう
初心者でも、フリーランサーでも、エージェンシーでも、同じブロックとデモを利用できます。まずは1つのサイトから始めて、同じライセンスで必要な数だけサイトを構築できます。