WordPressテーマの自作 - 最小構成（style.cssとindex.php）で動かす

開発環境がそろったので、さっそくテーマを作ります。「テーマ開発」と聞くと大ごとに感じますが、WordPressテーマの最小構成は、たった2ファイル。style.cssとindex.phpをフォルダに入れるだけで、管理画面の「外観」にあなたのテーマが並びます。まずこの最短ルートで「動いた！」まで行きましょう。

テーマの正体＝フォルダ

前のレッスンで見たwp-content/themes/の中に、テーマは1テーマ＝1フォルダで住んでいます。つまりフォルダを作れば、テーマの入れ物は完成です。

wp-content/
└── themes/
    ├── twentytwentyfive/   ← 最初から入っているテーマ
    └── shimaenagado/       ← 今日作る、あなたのテーマ

VSCodeでthemesフォルダを開いて、shimaenagadoという名前のフォルダを作ってください。ここがこのコースの作業場です。

ファイル1：style.css——テーマの「名札」

テーマのCSSファイルには、もうひとつ大事な役割があります。ファイル先頭のコメントが、テーマの自己紹介（名札）になるのです。WordPressはこのコメントを読んで、テーマ一覧に名前を表示します。

/*
Theme Name: シマエナガ堂
Author: あなたの名前
Description: 雑貨店シマエナガ堂のオリジナルテーマ
Version: 1.0
*/

body {
  font-family: sans-serif;
  margin: 0;
  color: #333;
  line-height: 1.7;
}

Theme Name:の行だけは必須。コメントの下には、ふつうのCSSをいつもどおり書いていけます。

ファイル2：index.php——最後の砦のテンプレート

index.phpは、ページのHTMLを組み立てるファイルです。拡張子が.phpですが、こわがらなくて大丈夫——中身のほとんどは、見慣れたHTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>シマエナガ堂</title>
</head>
<body>
  <h1>シマエナガ堂</h1>
  <p>テーマが動きました！</p>
</body>
</html>

そう、この時点ではただのHTMLです。PHPらしいことは何も書いていませんが、これでもう立派なテーマ。「HTMLが書ければテーマ開発に入れる」と言った意味が、伝わったでしょうか。

有効化してみる

2ファイルを保存したら、管理画面の「外観」→「テーマ」を開いてください。「シマエナガ堂」が一覧に並んでいます。名も無きフォルダが、style.cssの名札ひとつでテーマとして認識される——ちょっと感動する瞬間です。

「有効化」を押してサイトの表側を開くと、index.phpに書いたHTMLがそのまま表示されます。

このレッスンのまとめ

テーマの最小構成はstyle.cssとindex.phpの2ファイル——フォルダに入れるだけで外観の一覧に並ぶ
style.css先頭のコメント（Theme Name:）がテーマの名札。WordPressはこれを読んで一覧に表示する
index.phpの中身はほぼHTML——どのテンプレートも無いとき最後に使われる「最後の砦」

最小のテーマを作って有効化する