header.phpはWordPressで制作するウェブサイトのヘッダー部分を定義するために使われます。一般的にはHTMLの<head>部分や<header>部分となります。ほとんどのウェブサイトではサイト全体の共通部分となります。
header.phpの基本構成
HTMLの開始タグと<head>セクション
HTMLの文書型宣言
<!DOCTYPE html>言語属性
<html <?php language_attributes(); ?>>HTMLタグに言語属性を追加します。language_attributes();関数を使用すると、WordPressサイトの言語設定に基づいて適切な属性が出力されます。日本語の場合、この関数は以下のように出力します。
<html lang="ja" dir="ltr">lang="ja"：サイトの言語を日本語に設定します。jaは日本語を示すISO 639-1言語コードです。dir="ltr"：テキストの方向を左から右（Left-to-Right）に設定します。日本語は左から右へのテキスト方向を持つ言語です。
サイトの言語の確認方法
サイトが日本語に設定されているかどうかを確認するためには、WordPress管理画面の「設定」→「一般」メニューで「サイトの言語」が「日本語」に設定されているかで確認できます。この設定に基づいて、language_attributes();関数は適切な言語属性を出力します。
文字エンコーディング設定
<meta charset="<?php bloginfo( 'charset' ); ?>">bloginfo( 'charset' );関数は、WordPressサイトの文字エンコーディングを出力します。これは、サイトが使用する文字セットを指定するために使われます。以下のように出力されます。
<meta charset="UTF-8">UTF-8は、Unicode文字エンコーディングの一つで、広く使用されています。日本語はもちろんその他の多くの言語をサポートしています。
文字エンコーディングの確認方法
bloginfo('charset');関数が出力する文字セットは、WordPress管理画面の「設定」→「一般」メニューで「サイトの文字セット」設定に基づきます。通常はUTF-8がデフォルト設定されています。
レスポンシブデザイン対応
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="viewport">タグは、HTMLドキュメントのビューポート（表示領域）の設定を行うために使用されます。特に、レスポンシブデザインを実現するために重要です。ビューポートの設定を適切に行うことで、さまざまなデバイス（デスクトップ、タブレット、モバイルなど）でウェブページが正しく表示されるようになります。一般的には上記のように記述します。上記のほかにオプションの記述もありますが、一般的なウェブサイトでは上記のように記述すればよいのでこのまま記述すればOKです。
Internet Explorerに対してのレンダリングモード
<meta http-equiv="X-UA-Compatible" content="IE=edge">上の記述は、主にInternet Explorer（IE）に対して特定のレンダリングモードを使用するよう指示するために使用されます。このタグは、ウェブページが最新のレンダリングエンジンを使用して正しく表示されるようにするためのものです。一般的なウェブサイトでは上記のように記述すればよいのでこのまま記述すればOKです。
wp_head()フック
<?php wp_head(); ?>この記述をすることでプラグインやテーマが追加のスクリプトやスタイルをヘッダーに挿入できるようにします。
<body>セクション
<body <?php body_class(); ?>>ここからページのコンテンツの始まりです。ボディタグにクラス属性を追加してテーマやプラグインが特定のクラスを追加できます。一般的にfooter.phpに</body>のタグでボディタグの終了の記述をします。
ヘッダーセクション
サイトのロゴやタイトル、サイトのヘッダーナビゲーションを記述します。
ヘッダーの開始
<header id="masthead" class="site-header">サイトのロゴや名前を表示
<div class="site-branding">
<?php
if ( has_custom_logo() ) {
the_custom_logo();
} else {
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
<?php
}
?>
</div><!-- .site-branding -->has_custom_logo()：カスタムロゴが設定されているかチェック。the_custom_logo()：カスタムロゴを表示。<?php bloginfo( 'name' ); ?>：サイト名を表示。
ナビゲーション
<nav id="site-navigation" class="main-navigation">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation --><nav id="site-navigation" class="main-navigation">：ナビゲーションメニューの開始。wp_nav_menu()：WordPressのメニュー機能を使用してメニューを表示。
