dot8 アラヤです.
複数のテンプレートを準備することなく、最も汎用的なテンプレートindex.phpだけを使い、簡単にテーマを製作する場合があります.
この記事では、WordPressがテーマとして認識する最小限の条件を紹介します.
最小限のテーマ
以下のフォルダとファイルを準備すれば、WordPressがテーマとして認識します.(2023年9月現在)
- [wp-content]>[theme]に、(任意の名前で)フォルダを作成
- フォルダの直下に、空の「index.php」ファイルと空の「style.css」ファイルを作成
フォルダに「index.php」「style.css」どちらか1つのファイルだけ作成した状態でアップロードした場合、テーマとして表示されませんが、エラーも表示されません.
ファイル名は変更できない
フォルダ名は任意ですが、ファイル名は「index.php」「style.css」でなければなりません.ファイル名を変えると、テーマとして認識されません.
フォルダ直下が必須
2つのファイルは、作成したフォルダ直下に置く必要があります.
フォルダ内に別のフォルダを作成し「index.php」「style.css」を置いた場合、テーマとして認識されません.
テーマ名はどうなる?
「style.css」にWordPressテーマの概要を表す「コメントヘッダー」を記載するまでは、フォルダ名がテーマ名になります.
空のファイルで大丈夫?
空の状態でテーマを有効化すると、真っ白な状態が表示されるだけですが、エラーにはなりません.
もちろん、空のままでは何の役にも立たないテーマですが、そこから必要なコードやファイルを足すほうが分かりやすいと思います.
functions.phpは必須ではないの?
「functions.php」がなくてもテーマとして認識します.
しかし、テーマ製作の中では欠かすことのできないファイルですので、テーマ製作開始直後に作成することになると思います.
「functions.php」は、「index.php」「style.css」と同様にフォルダ直下に配置してください.
index.phpについて
「header.php」や「footer.php」、さらには「sidebar.php」を作成し、それ以外のコードを「index.php」に記載することが多いと思いますが、すべて「index.php」に記載してしまうことも可能です.
まずは「index.php」にすべて記載し、テンプレートを追加するなど必要なタイミングで「header.php」や「footer.php」に分割したほうが、開発はスムーズかと思います.
先に分割すると、「header.php」「footer.php」「index.php」と複数のファイルを行き来して作業する必要があります.
style.cssについて
「style.css」の1行目には、一般的なCSSと同様に「@charset “utf-8”;」を記述し、2行目から「コメントヘッダー」を記述します.
コメントヘッダーはWordPressテーマの概要を表すもので、コメントヘッダーの内容がテーマ選択時に表示されます.以下、最小限のコメントヘッダーです.
@charset "utf-8";
/*
Theme Name: テーマの名前
*/
通常は「Theme Name」以外に以下のような内容を記述します.
@charset "utf-8";
/*!
Theme Name: テーマの名前
Author: 製作者の名前
Description: テーマの説明・紹介文
Version: テーマのバージョン(例:0.0.1 例1.1 など)
License: テーマのライセンス(GNU General Public License v2 or later)
License URI: 「テーマのライセンス」のURI(http://www.gnu.org/licenses/gpl-2.0.html)
Text Domain: テキストドメイン
*/
コメントヘッダーが「/*!」で始まっています.
以下その理由を紹介しますが、よくわからない場合は「トラブル回避のため ! をつけている」程度の把握でも大丈夫です.
コメントヘッダーをSassに対応させる
Sassは、CSSをより効率的に書けるように機能拡張した言語です.
Sassを利用すると、コードの記述量が減り、1つのセレクターに対する記述を一箇所にまとめることができるので、管理・メンテナンスが容易になるとされています.
SassにはSCSS記法とSASS記法がありますが、いずれの記法でもそのままではブラウザーは認識せず、CSSに変換(コンパイル)して利用します.
設定により、コンパイル時に1行コメント「//」や複数行コメント「/* ~ */」は削除されますが、エクスクラメーションをつけた「/*!」でコメントを開始すると、どの設定(アウトプット形式)でもコメントを残してコンパイルされます.
Sassを利用していない場合、エクスクラメーションをつけた「/*!」でコメントを開始する必要はないのですが、この記事ではSassを利用している場合も考慮し「/*!」でコメントヘッダーを開始しております.