ページ内には広告が含まれます広告ポリシー
WordPressのヘッダーは、サイト上部に表示されるロゴ、サイト名、メニューなどをまとめた共通部分です。クラシックテーマとブロックテーマでの編集場所、スマートフォンでの表示、変更後に確認するポイントを紹介します。
WordPressのヘッダーとは
WordPressのヘッダーは、サイトの上部に表示される共通の案内部分です。
サイトのロゴや名前、メニューなどが配置され、閲覧者が「どのサイトを見ているのか」「次にどのページへ移動できるのか」を確認できます。
ヘッダーの内容や高さ、配置できる機能は、使用しているテーマによって異なります。ロゴとメニューだけのシンプルなものもあれば、検索ボタンやお問い合わせボタンなどが表示されるものもあります。
スマートフォンでは表示できる横幅が狭いため、メニューをボタンの中へ収納したり、ロゴを小さくしたりするテーマが一般的です。
ヘッダーに表示される主な内容
ヘッダーには、サイト内を移動するときに必要な情報や機能がまとめられています。
| 項目 | 主な役割 |
|---|---|
| サイトロゴ | サイトを画像で表す |
| サイト名 | サイトの名前を表示する |
| キャッチフレーズ | サイトの内容を短く伝える |
| メニュー | 主なページへのリンクを並べる |
| 検索ボタン | サイト内の記事を検索する |
| 案内ボタン | お問い合わせや会員ページなどへ移動する |
すべてを表示する必要はありません。サイトの内容と閲覧者に必要なものを選び、ヘッダーが大きくなりすぎないように配置します。
ヘッダーは複数のページで共通して使われる
ヘッダーは、トップページ、投稿、固定ページ、カテゴリー一覧など、複数のページで繰り返し表示されます。
同じヘッダーを共通して使うことで、別の記事へ移動してもサイト名やメニューの位置が変わらず、閲覧者がサイト内を移動しやすくなります。
テーマによっては、トップページと記事ページで別のヘッダーを使ったり、特定のページだけ表示内容を変えたりすることもできます。
ヘッダーとheadタグの違い
Webサイトでは、画面上部の「ヘッダー」と、HTML内にあるheadタグが別の意味で使われます。
ヘッダーはロゴやメニューなど、サイト上で閲覧者に見える部分です。一方、headタグにはページタイトル、CSS、メタ情報などが入り、通常はページ内にそのまま表示されません。
どちらも「ヘッダー」と呼ばれることがありますが、WordPressの画面やテーマ編集でヘッダーを変更する場合は、主にサイト上部の表示部分を指します。
ヘッダーを編集する方法
ヘッダーの編集場所は、使用しているテーマがクラシックテーマか、ブロックテーマかによって異なります。
クラシックテーマの場合
クラシックテーマでは、WordPress管理画面の「外観」から「カスタマイズ」を開きます。
「サイト基本情報」などの項目から、サイトロゴ、サイト名、キャッチフレーズを変更できます。項目名や設定できる内容は、使用しているテーマによって異なります。
ヘッダーに表示するメニューは、主に「外観」の「メニュー」から設定します。テーマ独自のヘッダー設定が用意されている場合は、カスタマイザー内からレイアウトやボタンなどを変更できます。
ヘッダー全体のHTML構造は、テーマフォルダ内にあるheader.phpが担当します。
配布されているテーマのheader.phpを直接編集すると、テーマの更新時に変更が消えることがあります。コードを変更する場合は、子テーマを使う方法がおすすめです。
ブロックテーマの場合
ブロックテーマでは、WordPress管理画面の「外観」から「エディター」を開きます。
「デザイン」の「パターン」からテンプレートパーツを開き、「ヘッダー」を選択します。
ヘッダー内のロゴ、サイト名、ナビゲーションなどを選択すると、ブロックエディターと同じように、画面を見ながら配置や表示を変更できます。
新しいブロックを追加することもできます。編集が終わったら、右上の「保存」をクリックして変更を反映します。
パソコンとスマートフォンでは表示が変わる
パソコンでは、ロゴとメニューを横に並べるヘッダーがよく使われます。一方、スマートフォンでは横幅に収まらないため、表示方法が切り替わります。
スマートフォンでは、メニューが三本線などのボタンへ収納され、ボタンを押すと画面の横や上から表示される形が一般的です。
パソコンで見やすく配置できていても、スマートフォンではロゴやボタンが重なったり、ヘッダーが画面を大きく占めたりすることがあります。編集後は両方の画面で確認します。
ヘッダーへ表示する内容の決め方
ヘッダーは多くのページに表示されるため、サイト内で特に重要なものを優先して配置します。
- サイト名やロゴからトップページへ移動できるようにする
- メニューには特に見てほしいページを並べる
- 検索やお問い合わせなど、よく使う機能を配置する
- スマートフォンでも押しやすい大きさと間隔にする
項目を増やしすぎると目的のリンクを見つけにくくなります。ヘッダーだけですべてを案内しようとせず、優先度の低いリンクはフッターなどへ分ける方法もあります。
ヘッダーを変更したあとに確認すること
ヘッダーを保存したあとは、実際のサイトを開いて表示と操作を確認します。
- ロゴやサイト名が正しく表示されているか
- ロゴやメニューから正しいページへ移動できるか
- 投稿や固定ページでも同じヘッダーが表示されているか
- パソコンとスマートフォンで表示が崩れていないか
- スマートフォンのメニューボタンを開閉できるか
ヘッダーは複数のページで共通して使われるため、トップページだけでなく、投稿や固定ページも開いて確認するのがおすすめです。
まとめ
WordPressのヘッダーは、サイト上部にロゴ、サイト名、メニューなどを表示する共通部分です。
クラシックテーマでは主にカスタマイザーやメニュー画面、ブロックテーマではサイトエディターのヘッダーテンプレートパーツから編集します。
ヘッダーへ表示する項目は重要なものに絞り、変更後はパソコンとスマートフォンの両方で、表示とリンクの動作を確認するのがおすすめです。
