「index.phpに全部書いていると、どこを直せばいいのか分からなくなる…」
多くの方が最初に感じる悩みです。第2回ではテンプレートを分割し、管理しやすい構成へ進化させます。
1. テンプレートを分割する理由（保守・拡張・速度）
共通部分（ヘッダー/フッター/サイドバー）を個別ファイルに切り出すと、修正の手間が減って保守性が上がります。将来ページを増やす際も、共通パーツを再利用できるため拡張が容易です。読み込みは WordPress の専用関数（get_header() など）に任せます。
2. 基本のフォルダ構成（第1回から一歩進める）
まずは以下の構成を目指します。index.php は“骨格と呼び出し”に徹し、共通パーツは専用ファイルにまとめます。
your-theme-folder/
├─ index.php ← ページの骨格（共通パーツの読み込み）
├─ header.php ← HTML <head> とサイトヘッダー
├─ footer.php ← サイトフッター
├─ sidebar.php ← サイドバー（任意）
├─ style.css ← テーマ情報＆共通スタイル
└─ functions.php ← 機能追加／enqueue／サポート宣言- !
<title>の手書きは非推奨です。add_theme_support('title-tag')を使います。 - !
CSS/JS はwp_enqueue_scriptsで読み込みます。HTMLに直書きは避けます。
3. header.php を作る（head要素＋サイトヘッダー）
header.php では <html> 開始〜 <body> 開始までと、サイト上部のヘッダー領域を出力します。タイトルは title-tag サポートに任せます。
推奨（現在）
<!-- header.php -->
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- タイトルは title-tag サポートに任せます（第1回のfunctions.phpの書き方と役割（テーマの機能設定）を参照） -->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
<p class="site-description"><?php bloginfo('description'); ?></p>
</header>非推奨（昔）
<!-- （非推奨）header.php で手書きの <title> -->
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>4. footer.php を作る（共通フッター）
footer.php では共通のコピーライトなどを記述し、必ず wp_footer() を出力します。ここが欠けると、スクリプトの読み込みが行われず動作不良の原因になります。
<!-- footer.php -->
<footer class="site-footer">
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>5. sidebar.php を作る（任意のウィジェット領域）
サイドバーを使う場合は、ウィジェットを配置できる領域を用意します。表示には functions.php 側での登録が必要です。
<!-- sidebar.php -->
<aside class="sidebar">
<?php if ( is_active_sidebar('main-sidebar') ) : ?>
<?php dynamic_sidebar('main-sidebar'); ?>
<?php else : ?>
<p>ウィジェットはまだ設定されていません。</p>
<?php endif; ?>
</aside>// functions.php（抜粋）
add_action('widgets_init', function () {
register_sidebar(array(
'name' => 'メインサイドバー',
'id' => 'main-sidebar',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
});6. index.php から共通パーツを呼び出す
get_header()・get_sidebar()・get_footer() で共通テンプレートを読み込みます。本文はループで出力します。
// index.php
<?php get_header(); ?>
<main class="main-content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="entry-title"><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php else : ?>
<p>投稿が見つかりませんでした。</p>
<?php endif; ?>
</main>
<?php
get_sidebar();
get_footer();
?>7. functions.php の推奨設定（title-tag と enqueue）
第1回の続きとして、タイトルの自動出力と CSS/JS の正しい読み込み方法をあらためて整理します。これらは複数プラグインとの共存に有効です。
推奨（現在）
// functions.php（抜粋：推奨設定）
add_action('after_setup_theme', function () {
add_theme_support('title-tag'); // <title> はコアに任せる
// add_theme_support('post-thumbnails'); // 必要に応じて
});
add_action('wp_enqueue_scripts', function () {
$ver = wp_get_theme()->get('Version');
// テーマ直下の style.css
wp_enqueue_style('theme-style', get_stylesheet_uri(), [], $ver);
// 例：assets 配下
$theme_uri = get_stylesheet_directory_uri();
wp_enqueue_style('theme-app', $theme_uri . '/assets/css/app.css', [], $ver);
wp_enqueue_script('theme-app', $theme_uri . '/assets/js/app.js', ['jquery'], $ver, true);
});非推奨（昔）
// （非推奨）head 内に直書き
<link rel="stylesheet" href="/wp-content/themes/your-theme/style.css">- !
enqueue に切り替えたら、header.php内の CSS 直リンクは削除します。 - !
wp_head()とwp_footer()は必須です（プラグインがフックします）。
8. テンプレート階層の基本（固定ページの例）
WordPress はページ種別に応じて、より詳細なテンプレートから順に探していきます。固定ページの例は次のとおりです。
page-{スラッグ}.php
└ page-{ID}.php
└ page.php
└ singular.php
└ index.php（最終的な受け皿）9. よくあるミスと解決策（実務チェックリスト）
分割直後に起きやすい不具合をまとめました。心当たりがあれば該当箇所を確認します。
- !
ヘッダー/フッターが効かない →get_header()/get_footer()の呼び出し忘れ - !
CSS/JS が反映されない →wp_head()/wp_footer()の欠落、または enqueue 未対応 - !
タイトルが二重表示 →<title>手書きとtitle-tagの併用。手書きを削除します。
10. まとめと次回予告
第2回では、テンプレートを役割ごとに分け、推奨の読み込み方法へ整えました。次回は 固定ページ（page.php） と トップページ（front-page.php） を用意し、ページごとの最適化とデザインの出し分けを進めます。
