STEP 2: 最小構成テーマ作成 - WordPressオリジナルテーマ作成

WordPressテーマの最小要件

WordPressでテーマとして認識されるには、以下の2つのファイルが最低限必要です。

📁 必須ファイル

style.css - テーマ情報とスタイル定義
index.php - メインテンプレートファイル

この2つだけで、WordPressは正常に動作します。まずは最小構成から始めて、徐々に機能を追加していきましょう。

テーマフォルダの作成

まず、テーマを保存するフォルダを作成します。

themesフォルダを開く
ローカル環境のWordPressインストール先にある wp-content/themes/ フォルダを開きます。

Localの場合: サイトフォルダ → app → public → wp-content → themes
新しいフォルダを作成
themesフォルダ内に新しいフォルダを作成します。フォルダ名は英数字とハイフンのみ使用してください。

mytheme
⚠️ フォルダ名の注意点
- 日本語は使用不可
- スペースは使用不可
- すべて小文字を推奨
- 単語の区切りはハイフン（-）を使用
VS Codeでフォルダを開く
作成した「mytheme」フォルダをVS Codeで開きます。「ファイル」→「フォルダーを開く」から選択します。

style.cssの作成

style.cssは、テーマの基本情報を記述する最も重要なファイルです。

ファイルを作成
mythemeフォルダ内に「style.css」という名前のファイルを新規作成します。
テーマ情報を記述
以下のコードをコピー＆ペーストします。

style.css/* Theme Name: My First Theme Theme URI: https://example.com/mytheme Author: Your Name Author URI: https://example.com/ Description: 初めてのオリジナルテーマ Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: mytheme */ /* ここから下にCSSを記述 */ body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 20px; } h1 { color: #0073aa; }
テーマ情報の説明
- Theme Name: テーマの表示名（必須）
- Author: 作成者名
- Description: テーマの説明文
- Version: バージョン番号
- License: ライセンス情報（GPLv2推奨）

⚠️ 重要な注意点

テーマ情報は必ず /* */ のコメント形式で、ファイルの最上部に記述してください。この情報がないと、WordPressがテーマとして認識しません。

index.phpの作成

index.phpは、サイトのコンテンツを表示するメインテンプレートファイルです。

ファイルを作成
mythemeフォルダ内に「index.php」という名前のファイルを新規作成します。
基本的なHTMLを記述
以下のコードをコピー＆ペーストします。

index.php<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> </head> <body> <h1><?php bloginfo('name'); ?></h1> <p><?php bloginfo('description'); ?></p> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div><?php the_content(); ?></div> </article> <?php endwhile; ?> <?php else : ?> <p>投稿が見つかりませんでした。</p> <?php endif; ?> </body> </html>

使用しているWordPress関数の解説

index.phpで使用している主要なWordPress関数について理解しましょう。

基本情報取得関数

bloginfo('name')         // サイト名を表示
bloginfo('description')  // サイトの説明文を表示
get_stylesheet_uri()     // style.cssのURLを取得

ループ関連関数

have_posts()   // 投稿があるかチェック
the_post()     // 次の投稿データを取得
the_title()    // 投稿タイトルを表示
the_content()  // 投稿本文を表示
the_permalink() // 投稿URLを取得

💡 WordPressループとは？

WordPressの「ループ」は、データベースから投稿を取得して表示する仕組みです。have_posts()で投稿の有無を確認し、whileで繰り返し処理を行います。

if (have_posts()) :        // 投稿がある場合
    while (have_posts()) :  // 投稿がある間繰り返す
        the_post();         // 投稿データを読み込む
        // ここに表示内容を記述
    endwhile;
endif;

テーマの有効化

作成したテーマをWordPressで使えるようにしましょう。

WordPress管理画面にログイン
ローカル環境のWordPress管理画面を開きます。
テーマページを開く
左メニューから「外観」→「テーマ」をクリックします。
作成したテーマを確認
「My First Theme」という名前のテーマが表示されているはずです。
テーマを有効化
テーマにマウスを合わせて「有効化」ボタンをクリックします。
サイトを表示
「サイトを表示」をクリックして、テーマが適用されているか確認します。

🎉 おめでとうございます！

これで初めてのWordPressオリジナルテーマが完成しました！サイト名と投稿が表示されていれば成功です。

動作確認とトラブルシューティング

✅ 正常に表示される場合

サイト名が青色で表示される
投稿タイトルと本文が表示される
style.cssで設定したスタイルが反映されている

❌ テーマが表示されない場合

⚠️ チェックポイント

フォルダ名を確認: themesフォルダ直下に配置されているか？
ファイル名を確認: style.css、index.phpのスペルは正しいか？
テーマ情報を確認: style.cssの最上部にコメント形式で記述されているか？
文字コードを確認: UTF-8で保存されているか？

❌ 真っ白なページが表示される場合

⚠️ PHPエラーの可能性

index.phpのPHPコードに誤りがある可能性があります。以下を確認してください：

<?php と ?> の対応は正しいか？
セミコロン（;）は正しく記述されているか？
全角スペースが混入していないか？

テーマのカスタマイズ

基本テーマが動作したら、自分好みにカスタマイズしてみましょう。

スタイルの変更例

style.cssに以下のコードを追加してみてください：

style.css に追加/* ヘッダースタイル */
h1 {
    color: #0073aa;
    background: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
}

/* 記事スタイル */
article {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

article h2 {
    color: #333;
}

article h2 a {
    text-decoration: none;
    color: #0073aa;
}

article h2 a:hover {
    color: #005177;
}

✅ 変更を確認

ファイルを保存して、ブラウザを更新（F5キー）してください。スタイルが反映されているか確認しましょう。

まとめ

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

✅ WordPressテーマの最小要件（style.css + index.php）
✅ style.cssでのテーマ情報の記述方法
✅ index.phpでの基本的なWordPress関数の使い方
✅ WordPressループの仕組み
✅ テーマの有効化と動作確認

🚀 次のステップへ！

最小構成のテーマが完成しました！次のSTEP 3では、header.phpとfooter.phpを分割し、より実用的なテーマ構造を学びます。

📚 さらに学ぶ

基本をマスターしたら、カスタムポストタイプで独自のコンテンツタイプの作成に挑戦しましょう。

📝 最小構成テーマ作成