対象: WordPress(サーバーへのファイルアップロードができる環境)
難易度: ★★☆
所要時間: 約10分
既存のテーマをカスタマイズするのではなく、ゼロからオリジナルのテーマを作ってみたい…という時、最初につまずくのが「WordPressに、このフォルダをテーマとして認識してもらう」部分です。実はコード自体は書かなくても、たった2つのファイルを用意するだけで管理画面のテーマ一覧に表示されるようになります。
テーマとして認識させるための最低限の構成
wp-content/themes/の中に新しいフォルダ(テーマ名)を作り、その中に次の2つのファイルを置きます。
style.css(テーマ情報を書いたコメントが必須)index.php(空ファイルでも可)
この2つさえあれば、WordPressは「テーマである」と認識します。他のファイル(functions.phpなど)は後から必要になったタイミングで追加すればOKです。
style.css冒頭のコメントが「テーマ情報」になる
ここが最初のつまずきポイントです。style.cssの一番上に、決まった書式のコメントを書く必要があります。WordPressはこのコメント部分だけを読み取って、管理画面のテーマ一覧に表示する情報として使います(CSSとして実際に効いてくるのは、このコメントより下の部分です)。
/*
Theme Name: My Original Theme
Theme URI: https://example.com/
Author: あなたの名前
Description: オリジナルテーマの説明文
Version: 1.0
*/Theme Nameだけは必須です。他の項目は省略しても動作しますが、管理画面での見やすさのため、最低限Descriptionくらいは書いておくのがおすすめです。
テーマフォルダの直下にscreenshot.png(推奨サイズ1200×900px)を置いておくと、テーマ一覧でそのプレビュー画像が表示されます。必須ではありませんが、無いとグレーの何もない箱が表示されるだけになるので、開発中でも仮の画像を置いておくと管理しやすいです。
実務での注意点: ローカル開発環境で作るのが安全
本番サーバーに直接ファイルをアップロードしながら試行錯誤すると、作業中の未完成な画面を誰かに見られてしまうリスクや、致命的なミスでサイトが表示されなくなるリスクがあります。DockerやLocalなどのローカル開発環境を用意し、そちらで完成させてから本番にアップロードするのが安全です。
まとめ
wp-content/themes/にstyle.cssとindex.phpを置くだけでテーマとして認識されるstyle.css冒頭のTheme Nameコメントは必須。他の項目は省略可screenshot.pngを置くとテーマ一覧にプレビュー画像が表示される- 本番サーバーではなく、ローカル開発環境で作り込んでから公開する方が安全