ファイルヘッダー

style.cssファイルヘッダーは、テーマに関するデータを構成するために使用されます。WordPressはこの情報を使用して、いくつかの機能がどのように動作するかを判断し、ユーザーのために外観 > テーマ画面の下にこれらのデータの一部を表示します。

デフォルトのTwenty Twenty-Threeテーマのテーマ詳細オーバーレイがどのように見えるかを見てみましょう：

WordPressテーマ画面にTwenty Twenty-Threeモーダルオーバーレイが表示されています。テーマのスクリーンショット、説明、およびメタデータが表示されています。

その情報のほとんどは、style.cssファイルヘッダーから直接取得されます。これは、WordPressテーマを作成する際の最も重要な部分の1つです。

どのテーマがアクティブ化可能かを判断する際、WordPressは/wp-content/themesの各フォルダーを検索し、style.cssファイルを探します。見つかった場合、ファイルから最初の8kbのデータを取得し、標準フィールドが定義されたファイルヘッダーがあるかどうかを判断します。

テーマでは、これは単にいくつかの標準キーと値が定義されたCSSコメントブロックです。 

  2. - `````wp-content/
    1. - `````fabled-sunset/
    • style.css

WordPressがあなたのテーマを認識するためには、Theme Nameフィールドをstyle.cssの先頭に次のように定義する必要があります： 

  1. /**
  2.  * Theme Name: Fabled Sunset
  3.  */

これは、有効なテーマに必要な最小限のヘッダーフィールドです。もちろん、テーマに関するより多くの情報を追加したいでしょう。

ヘッダーフィールド

サポートされているフィールドは多数あり、テーマでほとんどを使用することになるでしょう。以下は、各フィールドが構成されたテーマのstyle.cssファイルヘッダーの簡単な見方です： 

  1. /**
  2.  * Theme Name:        Fabled Sunset
  3.  * Theme URI:         https://example.com/fabled-sunset
  4.  * Description:       Custom theme description...
  5.  * Version:           1.0.0
  6.  * Author:            Your Name
  7.  * Author URI:        https://example.com
  8.  * Tags:              block-patterns, full-site-editing
  9.  * Text Domain:       fabled-sunset
  10.  * Domain Path:       /assets/lang
  11.  * Tested up to:      6.4
  12.  * Requires at least: 6.2
  13.  * Requires PHP:      7.4
  14.  * License:           GNU General Public License v2.0 or later
  15.  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
  16.  */

以下のリストは、これらのフィールドがそれぞれ何をするかを概説しています。

Theme NameはWordPressで動作するために必要な唯一のフィールドですが、テーマをWordPressテーマディレクトリに提出する際には、他のいくつかのフィールドも含める必要があります。これらのフィールドは、以下の*でマークされています。

  • テーマ名*: あなたのテーマのユニークな名前。
  • テーマURI: ユーザーがテーマに関する詳細情報を見つけることができる公開ウェブページのURL。
  • 説明*: テーマの説明で、WordPress管理画面や他の場所でテーマの詳細を表示する際に表示されます。また、WordPressテーマディレクトリに提出されたテーマにも使用されます。
  • バージョン*: テーマのバージョンで、X.XまたはX.X.X形式で記述されます。
  • 著者*: テーマを開発したあなたの名前または組織の名前。テーマディレクトリに提出するテーマには、WordPress.orgのユーザー名を使用することが推奨されます。
  • 著者URI: テーマを作成した個人または組織のURL。
  • タグ: テーマがサポートする機能のカンマ区切りリスト。テーマレビューのハンドブックには、テーマディレクトリへの提出用の有効なタグのリストがありますが、サードパーティのサイトでは異なるシステムを使用する場合があります。
  • テキストドメイン*: 翻訳用のテキストドメインに使用される文字列。
  • ドメインパス: テーマの翻訳が保存されている場所への相対パス。WordPressは、テーマが無効になっているときにこのフィールドを使用して翻訳を検出します。デフォルトは/languagesです。
  • テスト済みバージョン*: テーマがテストされた最後のWordPressバージョンで、X.X形式で記述されます（例：6.4、6.2.1など）。
  • 少なくとも必要*: テーマが動作する最も古いWordPressバージョンで、X.X形式で記述されます（例：6.3、6.2.1など）。
  • PHPが必要*: テーマが動作する最も古いPHPバージョンで、X.X形式で記述されます（例：8.0、7.4など）。
  • ライセンス*: テーマのライセンス。
  • ライセンスURI*: テーマのライセンスのURL。

子テーマヘッダーフィールド

子テーマを構築する際には、1つの追加のサポートフィールドがあります：テンプレート。これは親テーマのフォルダーを指定するために使用されます。

上記の架空の「Fabled Sunset」テーマがあなたの子テーマ「Grand Sunrise」の親である場合、あなたのstyle.cssヘッダーフィールドは次のようになります： 

  1. /**
  2.  * Theme Name: Grand Sunrise
  3.  * Template:   fabled-sunset
  4.  * ...other header fields
  5.  */

Templateフィールドは、これが機能するために親テーマのフォルダー名と正確に一致する必要があります（wp-content/themesディレクトリに対して相対的に）。そうでない場合、WordPressはそれらを適切に一致させることができません。

子テーマについての詳細は、こちらで学ぶことができます。

カスタムヘッダーフィールド

一部のサードパーティのマーケットプレイスやシステムは、カスタムヘッダーフィールドを使用する場合もあります。これらはWordPressによって公式にサポートされているわけではありませんが、確実に許可されており、テーマがWordPress内でどのように機能するかに悪影響を与えることはありません。

カスタムCSS

style.cssファイルは単なる構成ファイルではありません。このファイルを使用して、テーマのデザインを変更するためのカスタムCSSコードを書くこともできます。ファイルが正しく読み込まれていると仮定します。

ブロックテーマでは、デザインのほとんどまたはすべてがtheme.jsonファイルを通じて理想的に処理されます。これは、グローバル設定とスタイルのドキュメントで学ぶことができます。

しかし、カスタムCSSを追加したいまたは必要とする場合もあります。このことについては、アセットの含め方のドキュメントで詳しく学ぶことができます。