STEP 3: デザイン実装 - WordPressオリジナルテーマ作成

なぜファイルを分割するのか？

STEP 2では全てをindex.phpに書きましたが、実際のテーマ開発では、ヘッダーやフッターなどの共通部分を別ファイルに分割します。

💡 ファイル分割のメリット

保守性向上: 変更箇所が明確で修正しやすい
再利用性: 同じコードを複数ページで使い回せる
効率化: ヘッダー修正時、1ファイルを変更するだけで全ページに反映
読みやすさ: コードが整理され、構造が理解しやすい

テーマファイル構成

ファイル分割後のテーマ構成は以下のようになります。

📁 mytheme/ 📄 style.css 📄 index.php 📄 header.php ← 新規作成 📄 footer.php ← 新規作成

📁 各ファイルの役割

header.php: サイトの上部（ヘッダー、ナビゲーションなど）
footer.php: サイトの下部（フッター、コピーライトなど）
index.php: メインコンテンツ部分のみ
style.css: デザイン・レイアウト定義

header.phpの作成

ヘッダー部分を独立したファイルとして作成します。

ファイルを作成
mythemeフォルダ内に「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.0"> <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header class="site-header"> <div class="container"> <h1 class="site-title"> <a href="<?php echo esc_url(home_url('/')); ?>"> <?php bloginfo('name'); ?> </a> </h1> <p class="site-description"><?php bloginfo('description'); ?></p> </div> </header>

使用している重要な関数

language_attributes(): 言語属性を出力（lang="ja"など）
bloginfo('charset'): 文字コードを出力（UTF-8）
wp_title(): ページタイトルを生成
wp_head(): プラグインやテーマが<head>に追加する要素を出力（必須）
body_class(): <body>に適切なクラスを自動付与
esc_url(): URLをエスケープ（セキュリティ対策）
home_url(): サイトのホームURLを取得

⚠️ wp_head()は必須

<?php wp_head(); ?> は必ず </head> の直前に記述してください。これがないと、多くのプラグインが正常に動作しません。

footer.phpの作成

フッター部分を独立したファイルとして作成します。

ファイルを作成
mythemeフォルダ内に「footer.php」を新規作成します。
フッターコードを記述
footer.php<footer class="site-footer"> <div class="container"> <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All Rights Reserved.</p> </div> </footer> <?php wp_footer(); ?> </body> </html>

⚠️ wp_footer()は必須

<?php wp_footer(); ?> は必ず </body> の直前に記述してください。これがないと、JavaScriptやプラグインの一部機能が動作しません。

index.phpの更新

ヘッダーとフッターを分離したので、index.phpを書き換えます。

index.php（更新版）<?php get_header(); ?>

<main class="main-content">
    <div class="container">
        <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
                <article <?php post_class(); ?>>
                    <h2 class="entry-title">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                    <div class="entry-meta">
                        <time datetime="<?php echo get_the_date('c'); ?>">
                            <?php echo get_the_date(); ?>
                        </time>
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            <?php endwhile; ?>
        <?php else : ?>
            <p>投稿が見つかりませんでした。</p>
        <?php endif; ?>
    </div>
</main>

<?php get_footer(); ?>

新しく追加された関数

get_header(): header.phpを読み込む
get_footer(): footer.phpを読み込む
post_class(): 投稿に適切なクラスを自動付与
get_the_date(): 投稿日を取得
the_excerpt(): 抜粋を表示

✅ コードがシンプルに！

ヘッダーとフッターを分離したことで、index.phpがメインコンテンツだけに集中できるようになりました。コードの見通しが格段に良くなっています。

CSSでデザインを整える

style.cssに本格的なスタイルを追加して、見栄えを良くしましょう。

style.css に追加/* リセット・基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.8;
    color: #333;
    background: #f5f5f5;
}

/* コンテナ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー */
.site-header {
    background: #fff;
    padding: 2rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.site-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.site-title a {
    color: #0073aa;
    text-decoration: none;
}

.site-description {
    color: #666;
    font-size: 1rem;
}

/* メインコンテンツ */
.main-content {
    padding: 3rem 0;
}

/* 記事 */
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.entry-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.entry-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.entry-title a:hover {
    color: #0073aa;
}

.entry-meta {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.entry-content {
    line-height: 1.8;
}

/* フッター */
.site-footer {
    background: #333;
    color: #fff;
    padding: 2rem 0;
    text-align: center;
    margin-top: 3rem;
}

.site-footer p {
    margin: 0;
}

✅ 保存して確認

ファイルを保存してブラウザを更新（F5キー）してください。プロフェッショナルな見た目になったはずです！

functions.phpの作成

テーマで使う関数や設定を管理するfunctions.phpを作成します。

ファイルを作成
mythemeフォルダ内に「functions.php」を新規作成します。
基本設定を記述
functions.php<?php // テーマのセットアップ function mytheme_setup() { // タイトルタグをWordPressに管理させる add_theme_support('title-tag'); // アイキャッチ画像を有効化 add_theme_support('post-thumbnails'); // HTML5サポート add_theme_support('html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', )); } add_action('after_setup_theme', 'mytheme_setup'); // スタイルシートの読み込み function mytheme_scripts() { wp_enqueue_style('mytheme-style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'mytheme_scripts'); ?>

💡 functions.phpの役割

functions.phpは、テーマの機能を追加・カスタマイズするための中心的なファイルです。ここで設定した内容は、テーマが有効化されると自動的に読み込まれます。

⚠️ 重要な注意点

functions.phpの最後に ?> は書かない方が安全
余分な空白や改行を入れない（エラーの原因になる）
PHPの開始タグ <?php は必ず冒頭に記述

レスポンシブデザインの実装

スマートフォンでも見やすいデザインにしましょう。

style.css に追加/* レスポンシブ対応 */
@media (max-width: 768px) {
    .site-title {
        font-size: 1.5rem;
    }
    
    .entry-title {
        font-size: 1.4rem;
    }
    
    article {
        padding: 1.5rem;
    }
    
    .container {
        padding: 0 15px;
    }
}

💡 レスポンシブデザインとは？

画面サイズに応じてレイアウトが自動調整されるデザイン手法です。@media クエリを使って、画面幅768px以下（タブレット・スマートフォン）では異なるスタイルを適用しています。

searchform.phpの作成

検索フォームのカスタムテンプレートを作成します。

ファイルを作成
mythemeフォルダ内に「searchform.php」を新規作成します。
検索フォームを記述
searchform.php（新規作成）<form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>"> <label> <span class="screen-reader-text">検索:</span> <input type="search" class="search-field" placeholder="サイト内を検索..." value="<?php echo get_search_query(); ?>" name="s" /> </label> <button type="submit" class="search-submit">検索</button> </form>

検索フォームのスタイル

style.css に追加/* 検索フォーム */
.search-form {
    display: flex;
    max-width: 400px;
    margin: 1rem 0;
}

.search-form label {
    flex: 1;
}

.search-field {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 2px solid #E0E0E0;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
}

.search-field:focus {
    outline: none;
    border-color: #0073aa;
}

.search-submit {
    padding: 0.5rem 1.5rem;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.search-submit:hover {
    background: #005177;
}

.screen-reader-text {
    position: absolute;
    left: -9999px;
}

💡 searchform.phpの役割

get_search_form() 関数が呼ばれると、このファイルが読み込まれます。デフォルトの検索フォームよりもデザインをコントロールしやすくなります。

テンプレート階層の理解

WordPressには「テンプレート階層」という重要な概念があります。

📊 テンプレート階層とは？

WordPressは表示するページに応じて、優先順位に従ってテンプレートファイルを選択します。

例：個別記事ページの場合

single-{post-type}.php（カスタム投稿タイプ用）
single.php（個別記事専用）
singular.php（記事・固定ページ共通）
index.php（フォールバック）

✅ 現在の状態

現時点では index.php しかないため、すべてのページがindex.phpで表示されます。STEP 5でsingle.phpやpage.phpを作成すると、それぞれ専用のデザインが適用されるようになります。

動作確認

ファイル分割が正しくできているか確認しましょう。

ファイルを保存
header.php、footer.php、index.php、functions.php、style.cssを保存します。
ブラウザで確認
サイトを表示して、デザインが反映されているか確認します。
ページソースを確認
右クリック→「ページのソースを表示」で、wp_head()とwp_footer()が出力されているか確認します。

⚠️ トラブルシューティング

真っ白なページ: PHPエラーの可能性。 <?php と ?> の対応を確認
スタイルが反映されない: ブラウザキャッシュをクリア（Ctrl+Shift+R）
ヘッダーが2つ表示: header.phpとindex.phpの両方にヘッダーコードがある可能性

まとめ

STEP 3では、以下のことを学びました：

✅ ヘッダーとフッターのファイル分割
✅ get_header()とget_footer()の使い方
✅ wp_head()とwp_footer()の重要性
✅ functions.phpによるテーマ設定
✅ CSSでのデザイン実装
✅ レスポンシブデザインの基礎
✅ テンプレート階層の概念

🎉 次のステップへ！

基本的なテーマ構造が完成しました！次のSTEP 4では、functions.phpを活用して、メニュー、ウィジェット、アイキャッチ画像などの機能を追加します。

さらに学ぶ

基本的なデザイン実装をマスターしたら、以下の応用編に挑戦しましょう。

カスタマイザーAPI - ユーザーが色やレイアウトをリアルタイムで変更できる設定画面を作成
ブロックエディタ対応 - Gutenbergに完全対応したテーマを構築
パフォーマンス最適化 - ページ速度を劇的に改善

🎨 デザイン実装