Hara Daizo WordPressのヘッダーは、テーマによって編集場所が異なります。ブロックテーマはサイトエディターのテンプレートパーツ、クラシックテーマはカスタマイザーやテーマ設定を使うのが基本です。
親テーマのheader.phpを直接変更すると更新で消えるため、最初に標準画面でできるかを確認します。この記事では、編集場所の判定、固定表示、CSS、スマホ確認まで安全性の高い順に説明します。
WordPressのヘッダーとは？編集できる範囲
ヘッダーはサイト上部の共通領域で、ロゴ、サイト名、ナビゲーション、問い合わせボタン、検索などを配置します。多くのページから使われるため、1回の変更がサイト全体へ及ぶことがあります。
編集対象は、内容と見た目に分けて考えます。ロゴ画像やリンク先は内容、背景色、高さ、余白は見た目です。ヘッダー内の大きなメイン画像は、ページ本文のカバーブロックやアイキャッチであり、共通ヘッダーとは別の場合もあります。
変更前に、PCとスマホの現在表示、使用中のテンプレート、戻し方を記録してください。
WordPressヘッダーの編集場所を確認する
外観メニューとテーマ名を確認すると、主な方法を選べます。
| 方法 | 向く変更 | 更新耐性 | 戻しやすさ |
|---|---|---|---|
| サイトエディター | ブロックテーマの構造・デザイン | 高い | リビジョンやリセットを利用しやすい |
| カスタマイザー | クラシックテーマの対応項目 | 高い | 公開前にプレビュー可能 |
| テーマ独自設定 | 固定ヘッダーなど固有機能 | 製品による | 設定値を控える必要がある |
| 追加CSS | 標準画面にない外観 | 比較的高い | CSS削除で戻せる |
| 子テーマのコード | 構造や条件分岐 | 技術次第 | バックアップと検証が必要 |
「外観」→「エディター」があればブロックテーマです。なければ「カスタマイズ」やテーマ名の設定画面を確認します。既存サイトで複数のヘッダーテンプレートがある場合は、実際のページがどれを使うかも確認してください。
ブロックテーマでヘッダーを編集する
WordPress公式では、ヘッダーやフッターなどの繰り返し領域をテンプレートパーツとして管理します。通常は次の流れで編集します。
- 「外観」→「エディター」を開く
- 「パターン」からテンプレートパーツのHeaderを選ぶ
- 必要なら複製し、用途が分かる名前を付ける
- リストビューでグループ、ロゴ、ナビゲーションなどを選ぶ
- 配置とスタイルを調整する
- 保存画面で変更対象を確認する
共通パーツを保存すると、そのパーツを参照するすべてのテンプレートに反映されます。特定ページだけ変えたい場合は、専用テンプレートと複製したパーツを組み合わせます。
サイトエディターでは、テーマが提供するブロック設定を優先します。設定にない変更だけを追加CSSへ回すと、後から管理しやすくなります。
クラシックテーマでヘッダーを編集する
クラシックテーマでは「外観」→「カスタマイズ」のサイト基本情報、ヘッダー、メニューなどを確認します。テーマ独自の管理画面にロゴ、ヘッダー高さ、追従表示、ボタンの設定がある場合もあります。
操作名はテーマごとに異なるため、公式マニュアルに記載された場所を使います。カスタマイザーで変更できないからといって、すぐheader.phpを編集しないでください。親テーマのファイルは更新で置換され、PHPの構文ミスはサイト全体を表示不能にします。
構造変更が不可欠なら、子テーマ、フック、テーマが用意するテンプレート上書きの順で検討し、検証環境で確認します。
ロゴ・メニュー・ボタンの配置を調整する
ヘッダーでは、サイト識別、主要移動、主要行動の順に情報を整理します。ロゴの代替テキストとリンク先、メニュー項目、ボタン文言が重複していないかを確認します。
ナビゲーションの作成や階層は「メニューの設定」、画像の選定とサイトロゴの登録は「ロゴの設定」で詳しく確認できます。ここではヘッダー内の配置と優先順位に絞ります。
PCで一列に収まっても、スマホではロゴとボタンがナビゲーションの開閉を押し出すことがあります。重要度の低い項目をフッターへ移し、ロゴ幅、左右余白、折り返しを調整します。
ヘッダーを固定表示にする方法
ヘッダー固定は、スクロール中も上部へ残す表示です。まずテーマのSticky HeaderやFixed Header機能を探し、次に対応プラグイン、最後にCSSを検討します。
| 方法 | 利点 | 確認すべき点 |
|---|---|---|
| テーマ機能 | レイアウトと統合されやすい | PC・スマホ別設定、管理バー |
| プラグイン | 条件を画面で設定しやすい | 対象セレクタ、更新、競合 |
| CSS | 軽量に実装できる | テーマ構造、重なり、横幅 |
固定後は本文の先頭が隠れないか、アンカーリンクの移動先が隠れないか、Cookie通知や管理バーと重ならないかを確認します。ヘッダーが高いまま固定されるとスマホ画面を圧迫するため、小さい画面では固定を解除する判断も必要です。
CSSでヘッダーをカスタマイズする
CSSは、背景、境界線、余白など標準設定で不足する部分だけに使います。次は対象へ独自クラスsite-header-customを付けた場合の例です。
.site-header-custom {
position: sticky;
top: 0;
z-index: 100;
background: #fff;
border-bottom: 1px solid #ddd;
}
@media (max-width: 782px) {
.site-header-custom {
position: static;
}
}管理バー、テーマの既存position、親要素のoverflowなどでstickyが動かない場合があります。このCSSを全テーマ共通の完成形とは考えず、開発者ツールで実際の構造を確認してください。セレクタや追加場所は「CSSでの調整」で基礎から確認できます。
スマホのヘッダー表示を確認する
スマホでは見た目だけでなく、操作できるかを確認します。
- ロゴが横にはみ出さない
- メニューボタンを押して開閉できる
- 開いたメニューが固定ヘッダーの背後へ隠れない
- 電話や問い合わせボタンを誤タップしにくい
- 横向きでも本文が見える
- キーボード操作でフォーカス位置が分かる
エディターの幅切り替えは目安です。iPhoneとAndroidの実機、横向き、ログイン状態の違いも確認します。
ヘッダーが反映されない・崩れる場合
最初に、編集したパーツと表示中ページのパーツが一致するか確認します。その後、ブラウザー、キャッシュプラグイン、サーバー、CDNの順にキャッシュを調べます。
CSSが効かない場合は、読み込み順、セレクタの詳細度、無効な構文、テーマのインラインスタイルを確認します。ログイン中だけ正常ならキャッシュ設定、特定ページだけ異なるならテンプレート条件を疑います。
変更を一度に消さず、直前の変更から小さく戻すと原因を特定しやすくなります。
よくある質問
できます。ブロックテーマでは別のテンプレートパーツを作成して専用テンプレートへ配置します。クラシックテーマではテーマの条件表示や子テーマでの分岐が必要になる場合があります。
テーマ機能またはCSSで可能です。ただし背後の画像によって文字が読めなくなるため、初期表示とスクロール後の背景・文字色をセットで設計します。
親テーマのファイルを直接変えた部分は消える可能性が高いです。サイトエディター、カスタマイザー、追加CSS、子テーマなど更新に耐える方法を使い、更新前にはバックアップを取ります。
まとめ
WordPressヘッダーの編集では、ブロックテーマ、クラシックテーマ、独自設定のどれを使うかを先に判定します。標準UI、テーマ機能、追加CSS、子テーマの順で、必要な範囲だけ変更します。
固定表示は利便性だけでなく、本文との重なりやスマホ画面の占有も確認してください。保存後は複数のページ種別と端末でロゴ、ナビゲーション、ボタンを操作し、共通パーツへの影響まで点検します。