WordPressのテーマの最小単位とは？

WordPressでオリジナルテーマを作る方法をいくつかの記事に分けて解説します。今回はテーマを作成するのに絶対に必要となる2つのファイルについて解説します。

1 テーマフォルダのphpファイルの正体
2 2つの必要なファイル「index.php」と「style.css」
- 2.1 index.phpを作る
- 2.2 style.cssを作る
3 style.cssにテーマ名を記述する

テーマフォルダのphpファイルの正体

有料のWordPressのテーマフォルダを見ると、フォルダ内に多くのファイルやフォルダが含まれていることがわかります。

たとえば↑は有料テーマ「Swell」のテーマフォルダですが、いくつかのフォルダと拡張子「php」のファイルが含まれていることがわかります。

WordPressでは投稿や固定ページなど、ページにもいくつかの種類があり、それぞれのページの種類に対応したテーマファイルが必要です。

たとえば、トップページを表示するのに必要なファイルが「home.php」、固定ページを表示するのに必要なファイルが「page.php」、投稿ページを表示するのに必要なファイルが「single.php」などです。

さらに、それらのファイルを複数のパーツに分けることも可能です。

たとえばブログの場合、全てのページにサイドバーが表示されていることがあります。ここでサイドバーを変更したい、と思った時に、「home.php」のサイドバー部分、「page.php」のサイドバー部分、「single.php」のサイドバー部分と、全てのファイルを修正するのは大変です。

そこで、予めサイドバーの部分を「sidebar.php」としてパーツ化して、それぞれのテーマファイルに読み込ませることで、「sidebar.php」の修正だけで、全てのページのサイドバーの修正が反映されるようになります。

つまり、

・ページごとのテンプレートファイル
と
・各ページに読み込ませるパーツのファイル
の2種類が、テーマフォルダ内にあるphpファイルの正体なのです。

2つの必要なファイル「index.php」と「style.css」

有料級のテーマはエンドユーザーがカスタマイズしやすくしたり、メンテナンスしやすくしたりする目的のために、非常に多くのファイルやフォルダが存在する状態で配布されています。

しかしWordPressに対して「このフォルダはWordPressのテーマフォルダ」と認識させるために最低限必要なファイルは2つしかありません。それが「index.php」と「style.css」です。

そこでここでは、WordPressのオリジナルテーマの開発の起点となる「index.php」と「style.css」を作ってみましょう。

index.phpを作る

まずWordPressのテーマフォルダにこれから作るオリジナルテーマ専用のフォルダを作ります。

WordPressのインストールフォルダから、
「wp-content」⇒「themes」とたどっていき、「themes」フォルダの中に「test_theme」というフォルダを作りましょう。この「test_theme」にオリジナルテーマのファイルをどんどん作っていきます。

次に「test_theme」の中に「index.php」を作ります。フォルダ内で右クリックして「新規作成」から空っぽの「index.php」を作りましょう。いまはまだ中身が空っぽで大丈夫です。

これで「test_theme」の中に「index.php」ができました。

style.cssを作る

同じ要領で「style.css」を作ります。「test_theme」をテーマフォルダとして認識させるには、「style.css」に特定の記述が必要です。いったん「index.php」と同じ要領で空っぽの「style.css」を作ってみましょう。

これで「test_theme」の中に「index.php」と「style.css」の2つができました。

style.cssにテーマ名を記述する

作成したstyle.cssにテーマ名を記述します。この「テーマ名」をstyle.cssに記述することで、そのstyle.cssが含まれているフォルダをWordPressのテーマフォルダと認識させることができるのです。

/*
Theme Name: テーマの名前（必須）
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/

↑の記述をstyle.cssの先頭にコピーしましょう。テーマについてのさまざまな情報を記述できますが、必須となるのは「Theme Name」だけです。というわけで、ここではstyle.cssをこのようにしてみます。

ここではテーマ名を「テストテーマ」としました。

これでオリジナルテーマが完成しました。この状態でWordPressの管理画面に行き「テーマ」メニューを開くとこんな感じになります。

サムネイルもバージョン番号も何もないテーマができました。このテストテーマを有効化してWordPressのトップページを開いてみましょう。

何も書いてないまっしろなページが表示されたと思います。なぜ何も表示されていないのかというと、「index.php」が空っぽだからです。

ここでちょっと「index.php」を以下のように修正しましょう。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>テスト中</title>
</head>
<body>
<p>Hello</p>
</body>
</html>

「index.php」を上記のように修正して、再度WordPressのトップページを開きます。