この回はクラシックテーマのheader.php・footer.phpへの分割と、index.phpからの読み込みを扱います。
編集前に対象ファイルを保存し、部分コードと末尾のまとめを重複して貼らないでください。
旧版のdescription出力や標準スタイルの一括停止処理を使っている場合は、現行例と比較して取り除きます。
前回、最小構成の自作テーマでは、style.cssとindex.phpでテーマを作成しました。
今回はindex.phpから共通部分を分割します。
今回はヘッダーとフッターを作成しましょう。
別テーマの画像を参考にそれぞれのテンプレートがどこで使われているのかを記載してみました。
空ファイルでいいので、header.phpとfooter.phpを追加しておきます。
それでは早速、基本のテンプレートを作成してみましょう。
スターターテーマを使わずに
WordPress自作テーマを制作する
header.phpの作成
まずは、ヘッダー（header.php）から作成します。
コードは下記の様に記述しました。
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
以下、解説です。
PHPDocについての補足
PHPコードの冒頭によく記載されるコメント（PHPDoc）について補足します。
<?php
/**
* Template part for displaying posts
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.2
*/
?>PHPDocは、コードの役割や引数などを記すためのコメントです。
phpDocumentorなどのツールは、このコメントを読み取ってドキュメントを生成します。
PHPDocのコメントは、他の開発者と意思疎通を図る手段でよく使われます。
上のPHPDoc例はテンプレートを動かすための必須処理ではありません。
記載する場合は、テーマ名やバージョンを自分のコードに合わせます。
詳しいパラメータは下記の参考を閲覧ください。
参考
HTML5の宣言
<!doctype html>は文章がHTMLであることを示します。
<!DOCTYPE html>と大文字で書いてもOKです。
言語の指定
jaやenなど、htmlの言語が何かを指定して出力します。
<html <?php language_attributes(); ?>><html lang="ja">というような出力がされます。
headタグ
headからCSSやJS、metaタグの読み込みをします。
wp_head
wp_head();と記述してWordPress側で用意されているHTMLも出力します。
wp_head();は忘れずに記述しましょう。
文字エンコーディングの指定
<meta charset="utf-8">は文字エンコーディングを指定します。
この基本例ではbloginfo('charset')でWordPressの文字エンコーディング設定を出力します。
固定値のmetaタグを追加して二重にしないでください。
ビューポートの指定
ビューポート（表示領域）を指定します。
基本例ではwidth=device-widthとinitial-scale=1を使います。
下記はviewport-fit=coverを加える場合の別例なので、基本例と重ねて記載しないでください。
<meta name="viewport" content="width=device-width, viewport-fit=cover">width=device-widthは端末画面の幅に合わせる指定をしています。
viewport-fit=coverは画面全体を使う指定です。
ノッチなどに内容が隠れないよう、CSSのsafe-area-inset-*を使った余白も検討します。
initial-scaleを省略した場合の初期倍率はブラウザーが決定します。
省略すれば常に1になるとは限りません。
電話番号のリンク防止
対応ブラウザーで電話番号の自動リンク化を抑える追加設定です。
冒頭の基本例には含めていません。
<meta name="format-detection" content="telephone=no">metaディスクリプション
この基本テンプレートではdescriptionを出力しません。
SEOプラグイン等で一元管理し、ページごとのdescriptionが重複しないようにします。
旧版の未加工の抜粋出力は削除してください。
body
本体部分を表示します。
ヘッダメニュー等記載しますが、今回は省きます。
index.phpの作成
前回、最小構成の自作テーマで用意したindex.phpから、ヘッダーとフッターの共通部分を呼び出します。
テンプレートファイルがない場合、最後に読み込まれるテンプレートがindex.php
専用テンプレートを増やした後も、該当ファイルがない場合の受け皿としてindex.phpを残します。
今回は取得された投稿の本文を順に表示する最小例にします。
タイトル一覧・ページ送り・投稿がない場合の案内は、このコードには含めていません。
<?php get_header(); ?>
<main id="main-content">
<?php if (have_posts()) :
while (have_posts()) : the_post();
the_content();
endwhile;
endif; ?>
</main>
<?php get_footer(); ?>ヘッダーの表示
ヘッダー（header.php）を読み込む記述です。
<?php get_header(); ?>mainタグ
文書内の主要な部分をマークアップするタグです。
アクセシビリティ向上のために使われます。
またこのタグは原則、一か所だけ配置ができます。
記事一覧
記事の一覧ページを表示する時によく使われる記述です。
<?php if (have_posts()) :
while (have_posts()) : the_post();
the_content();
endwhile;
endif; ?>while 処理を繰り返す
the_post()はループを次の投稿へ進め、その投稿のデータをテンプレートで使えるようにします。
have_posts()記事があるか調べる。
the_contentは記事の本文。
フッターの読み込み
フッター（footer.php）を読み込む記述です。
<?php get_footer(); ?>footer.phpの作成
最後にフッターを作成します。
<?php get_sidebar(); ?>
<footer id="footer">
</footer>
<?php wp_footer(); ?>
</body>
</html>サイドバーの読み込み
<?php get_sidebar(); ?>フッタータグ
footer タグはフッタであることを示します。
この例では、footerタグの後に置いたwp_footer()を通じて、フッター向けに登録されたスクリプトなどを出力します。
wp_footer
またwp_footer();と記述してWordPress側で用意されているHTMLも出力します。
wp_footer();は忘れずに記述しましょう。
<?php wp_footer(); ?>基本のテンプレートの確認
以下の3つのテンプレートをアップロードしたら、サイトを確認してみます。
- header.php
- index.php
- footer.php
ヘッダーは目に見えるものがありませんが、本文のは最初から用意されている記事の内容が表示されています。
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
sidebar.phpの作成
サイドバーを表示する場合は、sidebar.phpを作成し、下のコードを記載します。
このコードは検索フォーム・固定ページ・アーカイブ・カテゴリーを直接出力する例です。
ウィジェットエリアに保存した内容を表示するコードではありません。
そのため、管理画面のウィジェットを削除しても、このコードで直接出力した一覧は消えません。
ソースコード
<aside id="sidebar" aria-label="サイドバー">
<?php get_search_form(); ?>
<h2>固定ページ</h2><ul><?php wp_list_pages(['title_li' => '']); ?></ul>
<h2>アーカイブ</h2><ul><?php wp_get_archives(['type' => 'monthly']); ?></ul>
<h2>カテゴリー</h2><ul><?php wp_list_categories(['title_li' => '']); ?></ul>
</aside>サイドバーを表示しない段階では、空のsidebar.phpにしておく方法もあります。
後半のリンク表示を確認する手順へ進む場合は、空のままにせず上のコードを配置してください。
sidebar.phpがないと仮の一覧が必ず出る、という前提にはしません。
functions.phpでタイトルを有効にする
自作テーマのfunctions.phpに次を記載します。
WordPressの標準スタイルやREST APIへの参照を一括で削除する必要はありません。
<?php
add_action('after_setup_theme', function () {
add_theme_support('title-tag');
});この時点でのコードまとめ
以下はheader.php・index.php・footer.php・functions.phpのまとめです。
サイドバーを表示する場合は、上のsidebar.phpも組み合わせます。
header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
index.php
<?php get_header(); ?>
<main id="main-content">
<?php if (have_posts()) :
while (have_posts()) : the_post();
the_content();
endwhile;
endif; ?>
</main>
<?php get_footer(); ?>footer.php
<?php get_sidebar(); ?>
<footer id="footer">
</footer>
<?php wp_footer(); ?>
</body>
</html>functions.php
<?php
add_action('after_setup_theme', function () { add_theme_support('title-tag'); });まとめ
フルスクラッチ（1から）作成しているので、ソースコードが読みやすいです。
いままで調べもしなかったこともわかるようになって、なかなか楽しいです。
GitHubの過去の例は今回の修正と同期していません。
現行コードは本文を参照してください。
過去のコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
導入先のURLでサイドバーを出力する
完成例のsidebar.phpには固定のexample.comリンクが含まれていたため、導入先に応じてURLを生成するコードへ置き換えました。
検索フォームはget_search_form()、固定ページはwp_list_pages()、月別一覧はwp_get_archives()、カテゴリーはwp_list_categories()で出力します。
完成例のsidebar.php全体を置き換えてください。
古い固定リンクの下へ追記すると一覧が重複します。
検証では検索フォームの送信先が検証サイトになり、固定ページ一覧の子ページをEnterで開くと、そのページの本文が表示されました。
スマホ幅390pxでも横にはみ出していません。
固定ページの親子関係は管理画面に保存された関係に従います。
月別一覧とカテゴリーも導入先の投稿データに従うため、見本と同じ件数にはなりません。
検索フォームのラベルはWordPressの言語設定に応じて変わります。
この段階ではリンクと本文の出力を確認します。
検索結果の専用テンプレートはシリーズの完成コードまで組み合わせて確認してください。
戻す場合は変更前のsidebar.phpを復元します。
テーマを有効にしてheadの出力を確認する
分割したファイルとfunctions.phpを同じ検証用テーマのフォルダーに揃え、「外観 → テーマ」から有効化します。
有効化後にサイトを開き、本文とサイドバーの固定ページ・アーカイブのリンクが表示されるか確認します。
画面の表示だけではhead内の重複は分からないため、ページのソースを表示してtitleタグが1個かを確認します。
header.php側で手書きのtitleタグを残したままtitle-tag対応を追加しないでください。
2026年10月2日の独立した検証環境では、titleタグは1個で、meta descriptionは0個でした。
これはdescriptionまで設定済みという意味ではなく、この記事のheader.phpがdescriptionを出力しない構成に対応した結果です。
導入先でSEOプラグインを使う場合は、その環境でソースを確認してから重複の有無を判断します。
表示がおかしい場合は、変更前のheader.php・footer.php・sidebar.php・functions.phpを復元します。
適用範囲と確認
検証用の自作テーマで header.php をバックアップして置き換えます。
既存のSWELLなどの親テーマには上書きしません。
wp_head・wp_body_open・wp_footer は各ページで一度ずつ呼び出します。
description はSEOプラグイン等の担当箇所にまとめ、ページのソースで重複がないか確認してください。
標準のブロックCSSはそのまま読み込みます。
問題があれば変更前のファイルに戻します。
次はロゴとトップページの構成へ進みます。
