これからテンプレートを何枚も作りますが、ヘッダー（ロゴとナビ）とフッターは全ページ共通です。毎回コピペしていたら、直すとき全ファイル修正になってしまう——そこでWordPressには、共通部品を別ファイルに切り出す仕組みがあります。header.phpとfooter.phpです。
部品化のしくみ
テーマフォルダにheader.phpを置くと、どのテンプレートからもget_header()の1行で呼び出せます。フッターも同様です。
テンプレート（index.phpなど）
┌────────────────────┐
│ <?php get_header(); ?> │ ← header.phpの中身がここに入る
│ │
│ このページ固有の中身 │
│ │
│ <?php get_footer(); ?> │ ← footer.phpの中身がここに入る
└────────────────────┘「共通の上下を部品にして、各ページは中身だけ書く」——CSSで共通クラスを作ったのと同じ、くり返しを消す発想です。
header.phpを作る
いまのindex.phpの上半分を切り取って、header.phpにします。シマエナガ堂のヘッダー（ロゴ＋ナビ）もここで組みましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body>
<header class="site-header">
<a class="site-title" href="<?php echo home_url(); ?>">
<?php bloginfo('name'); ?>
</a>
<nav class="site-nav">
<a href="<?php echo home_url(); ?>">ホーム</a>
<a href="#">会社案内</a>
<a href="#">お知らせ</a>
</nav>
</header>見慣れない点が2つあります。
<?php wp_head(); ?>——「WordPressや各プラグインが、headに入れたいものを差しこむための穴」。テーマ必須のおまじないで、これが無いとプラグインの多くが動きません。閉じる直前の</head>の上に必ず置きます<title>タグが無い——タイトルはWordPressに任せるのが現代の作法です（次の章のfunctions.phpで有効化します）。いまはまだタブの表示が素っ気なくてもOK
ナビのリンク先が#なのも今は仮でOK。管理画面から編集できる本物のメニューに、あとの章で差し替えます。
footer.phpを作る
同じく下半分をfooter.phpへ。
<footer class="site-footer">
<p>© 2026 <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>こちらの必須おまじないはwp_footer()。管理バー（ログイン中に上に出る黒いバー）やプラグインのJavaScriptは、この穴から差しこまれます。</body>の直前が定位置です。
index.phpは「中身だけ」に
部品化が済むと、index.phpはこんなにすっきりします。
<?php get_header(); ?>
<main class="section">
<h1><?php bloginfo('name'); ?></h1>
<p>テーマが動きました！</p>
</main>
<?php get_footer(); ?>このレッスンのまとめ
- 共通部品は
header.php／footer.phpに切り出し、各テンプレートからget_header()／get_footer()で呼ぶ wp_head()（/headの直前）とwp_footer()（/bodyの直前）は必須のおまじない——プラグインやWordPress本体の差しこみ口- 部品化すると、各テンプレートは「そのページ固有の中身」だけになる