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

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

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

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

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

今回の目標

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

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

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

サイトフォルダの確認

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

フォルダの場所

• Localでサイト作成時に指定した場所
• 例：デスクトップの「sample-site」フォルダ内

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

sample-site
├── app
├── conf
└── logs

sample-site
├── app
├── conf
└── logs

各フォルダの役割

appフォルダ

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

confフォルダ

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

logsフォルダ

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

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

appフォルダの中身

appフォルダ内の構成

sample-site
└── app
    ├── public
    └── sql

sample-site
└── app
    ├── public
    └── sql

publicフォルダ

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

sqlフォルダ

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

publicフォルダの詳細

publicフォルダ内の主要構成

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

sample-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フォルダ内の主要構成

sample-site
└── app
    └── public
        └── wp-content
            ├── languages
            ├── plugins
            ├── themes
            ├── uploads
            └── upgrade

sample-site
└── app
    └── public
        └── wp-content
            ├── languages
            ├── plugins
            ├── themes
            ├── uploads
            └── upgrade

各フォルダの役割

pluginsフォルダ

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

themesフォルダ

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

uploadsフォルダ

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

languages、upgradeフォルダ

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

themesフォルダの現在の状況

既存のテーマ

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

my-first-site
└── app
    └── public
        └── wp-content
            └── themes
                ├── twentytwentyfive
                ├── twentytwentyfour
                ├── twentytwentythree
                ├── twentytwentytwo
                └── index.php

my-first-site
└── app
    └── public
        └── wp-content
            └── themes
                ├── twentytwentyfive
                ├── twentytwentyfour
                ├── twentytwentythree
                ├── twentytwentytwo
                └── index.php

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

オリジナルテーマの作成

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

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

テーマフォルダの作成

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

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

sample-site
└── app
    └── public
        └── wp-content
            └── themes
                ├── sample-theme
                ├── twentytwentyfive
                ├── twentytwentyfour
                ├── twentytwentythree
                ├── twentytwentytwo
                └── index.php

sample-site
└── app
    └── public
        └── wp-content
            └── themes
                ├── sample-theme
                ├── twentytwentyfive
                ├── twentytwentyfour
                ├── twentytwentythree
                ├── twentytwentytwo
                └── index.php

• 作成した sample-themeフォルダを右クリックしてCodeで開くを選択すると、VSCodeに読み込むことができます。
• 対象フォルダを始めて読み込む時、信頼確認が表示されます。はい、作成者を信頼しますを選択してください。

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

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

• index.php
• style.css

style.css の作成

• VSCodeのエクスプローラーで何も無いところを右クリックし、新規ファイルを選択します。
• ファイル名をstyle.cssとします。

style.cssファイルに以下のコードを記述

style.css

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

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

CSS

テーマヘッダーについて

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

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

参考記事

WordPressテーマヘッダー完全リファレンス

WordPressオリジナルテーマ開発に必須のstyle.cssテーマヘッダー（テーマコメント）の書き方を完全解説。必須項目のTheme Nameをはじめ、全15項目をコード例と注意点付きで詳しく説明します。WordPress.org配布時の要件や重複時の動作も含む開発者向け決定版リファレンス。

index.php の作成

同じくindex.phpファイルを作成し、以下のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>マイ・オリジナルテーマ</title>
</head>
<body>
    <header>
        <h1>サンプルテーマ</h1>
    </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>

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>マイ・オリジナルテーマ</title>
</head>
<body>
    <header>
        <h1>サンプルテーマ</h1>
    </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が書ける

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

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

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

作成完了の確認

ファイル構成の確認

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

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

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

テーマの有効化と動作確認

オリジナルテーマの作成が完了しました！

それでは、実際に作成したテーマをWordPressで有効化して、サイトに表示してみましょう。

管理画面でのテーマ切り替え操作と、公開サイトでの表示確認を行います。

管理画面でのテーマ切り替え

WordPress管理画面にアクセス

• LocalのWP Adminボタンをクリック
• または直接 http://サイト名.local/wp-admin にアクセス

管理画面にアクセス

• ユーザー名、パスワードを入力してログインします。

外観メニューにアクセス

• 左側サイドメニューの外観をクリック
• テーマをクリック

作成したテーマの確認

• 「マイ・オリジナルテーマ」が表示されていることを確認
• これは先ほどstyle.cssのテーマヘッダーで記述した Theme Name: マイ・オリジナルテーマ が表示されています
• 既存のテーマと並んで表示されます

テーマの有効化

• 「マイ・オリジナルテーマ」の有効化ボタンをクリック
• テーマが切り替わります

公開サイトでの動作確認

公開サイトの表示

• 左上のサイト名をクリックして公開サイトへ
• または「サイトを表示」をクリック

表示の確認

• Webページが表示される
• ヘッダー、メイン、フッターが含まれた構造
• 前回編集した固定ページなどは表示されない

おめでとうございます！ オリジナルテーマの作成と有効化が完了しました。

あなた自身が作ったテーマでWordPressサイトが表示されています！

まとめと次回予告

今回学習したこと

WordPressの仕組みを根本から理解

• ファイル構造の全体像把握
• テーマの役割と基本概念
• 最小限のテーマ作成体験
• 管理画面でのテーマ切り替え操作

WordPressテーマの本質

テーマとは何か

• WordPressの表示方法を制御するファイル群
• デザインと機能を決定する重要な要素
• 完全にカスタマイズ可能

なぜオリジナルテーマを作るのか

• WordPressの根本的な仕組みを理解できる
• 管理画面のコンテンツと表示の関係性が分かる
• 自由度の高いカスタマイズが可能になる

現在の状況

作成したもの

• 最小限のオリジナルテーマ
  • style.css（テーマヘッダー）
  • index.php（基本表示）

現在の問題

• 前回編集した固定ページが表示されない
• 管理画面のコンテンツが反映されない

次回予告：固定ページを表示する仕組みを理解しよう

今回は最小限のテーマを作成しましたが、管理画面で作成したコンテンツが表示されない状態です。

次回は、この問題を解決していきます！

次回の内容予定

• WordPressのテンプレート階層の理解
• 固定ページの内容を表示する方法
• WordPress関数の基本的な使い方

なぜ固定ページが表示されないのか？

現在のindex.phpは、WordPressの機能を使わずに直接HTMLを出力しているためです。

WordPressのコンテンツを表示するには、専用の仕組みを理解する必要があります。

準備していただくこと

• 今回作成したsample-themeをそのまま保持
• 次回の学習で拡張していきます

WordPressの奥深い世界への扉が開かれました。

テーマの仕組みを理解することで、WordPressを自由自在に操ることができるようになります。

次回の固定ページ表示もお楽しみに！

見出し

この記事で作成した成果物は、以下のページでまとめて確認することができます。

成果物をまとめて確認する

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

【オリジナルテーマを作ってみよう！ – WordPressテーマの仕組みを理解する】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この投稿をシェアする