オリジナルテーマを作ってみよう！ – WordPressテーマの仕組みを理解する

2025/06/29
BASICS
Wordpressの基礎
0comments
334views
約7分で読めます

前回の記事で、WordPress管理画面の基本操作をマスターし、サイトタイトルの変更や固定ページの編集を実際に体験しました。

管理画面でコンテンツを編集できるようになりましたが、それがどのような仕組みで表示されているのか、疑問に思いませんでしたか？

今回は、突然ですがオリジナルテーマの作成に挑戦します！

管理画面で作成したコンテンツが、どのような仕組みでWebページとして表示されるのかを、実際にテーマを作りながら学んでいきます。

今回の目標

WordPressのファイル構造の理解
テーマの役割と仕組みの把握
最小限のオリジナルテーマ作成
管理画面でのテーマ切り替え体験

この記事は概要説明です。テーマの詳細な機能は、次回以降の記事で段階的に解説していきます。

Localで作成されるファイル構造

変更してはいけないフォルダについて

これから説明するファイル構造の中で、「触らないでください」と記載されているフォルダがあります。
WordPress初心者が誤って重要なファイルを変更してしまうと、サイトが動かなくなったり、管理画面にアクセスできなくなったりする可能性があるためです。

サイトフォルダの確認

前回作成したWordPressサイトのフォルダを確認してみましょう。

フォルダの場所

Localでサイト作成時に指定した場所
例：デスクトップの「WordPress-Sites」フォルダ内
サイト名のフォルダ（例：my-first-site）

サイトフォルダ内の構成 サイトフォルダを開くと、以下の3つのフォルダが作成されています。

my-first-site/
├── app/
├── conf/
└── logs/

各フォルダの役割

appフォルダ

WordPressサイト本体
今回の学習で使用するフォルダ

confフォルダ

サーバーの設定ファイル群
触らないでください

logsフォルダ

サーバーのログファイル群
触らないでください

WordPressの核となるフォルダ構成

appフォルダの中身

appフォルダ内の構成

my-first-site/
└── app/
    ├── public/
    └── sql/

publicフォルダ

WordPressの核となるファイル群
実際のWebサイトのファイルがすべて格納

sqlフォルダ

データベースのバックアップファイル
触らないでください

publicフォルダの詳細

publicフォルダ内の主要構成

my-first-site/
└── app/
    └── public/
        ├── wp-admin/
        ├── wp-content/
        ├── wp-includes/
        ├── index.php
        ├── wp-config.php
        └── その他のWordPressファイル

各フォルダの役割

wp-adminフォルダ

WordPress管理画面のファイル群
触らないでください

wp-includesフォルダ

WordPressの核となる機能ファイル群
触らないでください

wp-contentフォルダ

カスタマイズ可能なファイル群
今回の学習で使用するフォルダ

wp-contentフォルダの詳細

wp-contentフォルダの構成

wp-contentフォルダ内の主要構成

my-first-site/
└── app/
    └── public/
        └── wp-content/
            ├── plugins/
            ├── themes/
            ├── uploads/
            ├── languages/
            └── upgrade/

各フォルダの役割

pluginsフォルダ

プラグインのファイル群
WordPressに新しい機能を追加するツール

themesフォルダ

テーマのファイル群
サイトのデザインと表示方法を制御
今回の作業対象

uploadsフォルダ

メディアファイル（画像・動画・音声など）
管理画面でアップロードしたファイルが保存

languages、upgradeフォルダ

言語ファイルやアップグレード用ファイル
詳細は後回し

themesフォルダの現在の状況

既存のテーマ themesフォルダを開くと、すでにいくつかのテーマフォルダが存在しています。

twentytwentyfour/
twentytwentythree/
twentytwentytwo/

これらはWordPressのデフォルトテーマです。（WordPressのバージョンによって異なります）

オリジナルテーマの作成

WordPressのファイル構造とテーマの役割を理解したところで、いよいよオリジナルテーマを作成してみましょう！

今回は最小限の構成でテーマを作り、WordPressがどのような仕組みでテーマを認識し、表示しているのかを体験していきます。

テーマフォルダの作成

1. 新しいテーマフォルダの作成

wp-content/themes/フォルダ内に新しいフォルダを作成
フォルダ名：sample-theme

my-first-site/
└── app/
    └── public/
        └── wp-content/
            └── themes/
                ├── twentytwentyfour/
                ├── twentytwentythree/
                ├── twentytwentytwo/
                └── sample-theme/

必要最小限のファイル作成

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

style.css の作成

sample-themeフォルダ内にstyle.cssファイルを作成し、以下を記述：

/*
Theme Name: マイ・オリジナルテーマ
*/

テーマヘッダーについて

この/**/で囲まれた部分はテーマヘッダーと呼ばれ、WordPressがテーマを認識するために必要な情報です。

テーマヘッダーの詳細な書き方については、「WordPressテーマヘッダー完全リファレンス」を参照してください。

より多くの情報を設定できます。

index.php の作成

sample-themeフォルダ内にindex.phpファイルを作成し、以下を記述

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>マイ・オリジナルテーマ</title>
</head>
<body>
    <header>
        <h1>サンプルテーマ</h1>
        <p>私が作った最初のWordPressテーマです！</p>
    </header>
    
    <main>
        <section>
            <h2>WordPressテーマ作成</h2>
            <p>このページは<strong>index.php</strong>ファイルで作成されています。</p>
            <p>PHPファイルですが、HTMLを書くことができます。</p>
        </section>
        
        <section>
            <h2>学習のポイント</h2>
            <ul>
                <li>PHPファイルでもHTMLが書ける</li>
                <li>普通のWebページと同じように表示される</li>
                <li>次回はWordPress関数を学習予定</li>
            </ul>
        </section>
    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

重要なポイント：PHPファイルでもHTMLが書ける

このコードは.phpファイルに書かれていますが、中身は普通のHTMLです。

PHPファイルでは、HTMLをそのまま書くことができ、ブラウザには通常のWebページとして表示されます。

これがWordPressテーマ作成の第一歩です！

作成完了の確認

ファイル構成の確認

my-first-site/
└── app/
    └── public/
        └── wp-content/
            └── themes/
   　            └── sample-theme/
   　                ├── style.css
   　                └── index.php

これで最小限のWordPressテーマが完成しました！