WordPressにおいてstyle.cssは、とても重要は役割を果たします。
style.cssは、スタイルシートファイルですから基本的には、見た目を制御する役割を果たすファイルです。
ですが、「とても重要は役割」と表現したのには理由があります。それは、style.cssにテーマ情報を記述するからです。
style.css の書き方
テーマ情報は、style.cssの冒頭にコメントとして記述します。これをテーマコメントと呼びます。
テーマコメントの記述例
具体例を見てみましょう。これは「Twenty Twenty-Two」テーマのstyle.cssの冒頭です。
/*
Theme Name: Twenty Twenty-Two
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/このように /* */ で囲われたコメントとして、様々な情報が記載されています。
| 必須 | 推奨 | ||
|---|---|---|---|
| Theme Name | テーマの名前 | ||
| Theme URI | テーマについての情報が記載されているWebサイトのURL | ||
| Author | テーマを開発した個人もしくは企業の名前 | ||
| Author URI | 開発者（開発団体）のWebサイトURL | ||
| Description | テーマの概要 | ||
| Version | テーマのバージョン | ||
| Requires at least | テーマが動作する一番古いWordPressのバージョン | ||
| Tested up to | テーマの動作テストを行なった最新のWordPressのバージョン | ||
| Requires PHP | テーマが動作する一番古いPHPのバージョン | ||
| License | テーマのライセンス | ||
| License URI | テーマのライセンスについて記載のあるWebサイトのURL | ||
| Tags | テーマの特徴に応じたタグ | ||
| Text Domain | 多言語対応のサイトを作る際、翻訳ファイルを参照させるために必要なテキストドメイン | ||
| Template | 親テーマの指定（※子テーマ作成時にのみ利用） |
テーマコメントの記述例の結果
では、style.cssに記載されたテーマコメントがWordPressによってどのように認識されているかを確認してみましょう。
これは、WordPressのテーマ詳細の画面です。
style.cssに記載したテーマコメントがテーマ詳細に反映されていることが確認できます。
必須と推奨の違い
テーマコメントは、theme nameすなわちテーマ名だけあればWordPressはテーマとして認識します。
そのテーマを自分だけ使うのであれば、必須であるtheme nameだけで問題ありません。
自分で作成したテーマは、一般公開して他のユーザーに使用を許可することもできます。一般公開は、自分のWebサイトやWordPressテーマ配布サイト、もしくは、WordPressのライブラリとして掲載することも可能です。
WordPressのライブラリとして一般公開する場合には、推奨のコメントが必ず必要となります。推奨コメントの記載がないと審査で不合格となり一般公開することはできません。
実際にテーマコメントを書いてみよう
お客様からwebサイト制作を依頼されたケースを想定してテーマコメントを記述してみましょう。
あくまでもテーマコメントの一例です。テーマの作成目的や契約条件に応じて、記載内容を変更してください。
/*
Theme Name: HOGE inc. Official web site Theme
Author: UOCN
Author URI: https://wp-ch.jp/
Description: これは株式会社HOGE様の公式サイト用に作成されたテーマです。
Requires at least: 6.4
Requires PHP: 8.1
Version: 1.0.0
License: 本テーマは、株式会社HOGE様のご依頼により、UOCNが作成したものです。当テーマで使用されている全てのソースコード・画像・文章・データについて無断転用・無断転載をすること禁止します。
*/Theme Name - テーマ名
テーマ名は自由に決めて問題ありません。
このサンプルでは「HOGE inc. Official web site Theme」と言う名前をつけてみました。
ただし、テーマを保存したフォルダとかけ離れた名前を付けると、保管場所が分からなくなる可能性があるので注意が必要です。
Author - 開発者名／Author URI - 開発者のwebサイト
Author、Author URI は任意の項目です。
このサンプルでは「UOCN」と私の名前を記載し、私のwebサイト「https://wp-ch.jp/」をAuthor URI として記述しました。
Description - 概要
テーマの概要は任意の項目ですので、記載する必要はありませんが、使用用途や開発目的を書いておくと、後々わかりやすいと思います。
このサンプルでは「これは株式会社HOGE様の公式サイト用に作成されたテーマです。」と記述しました。
Requires at least - WordPressのバージョン／Requires PHP - PHPのバージョン
Requires at least／Requires PHP も任意の項目です。
自分用のメモとして開発時に WordPressは「6.4」、PHPは「8.1」を使いました、と言う意味合いでコメントを記述しています。
任意項目ですが、注意も必要です。
Local WP などの開発環境とレンタルサーバーなどの本番環境ではバージョンが異なる場合があります。
例えばLocal WPのPHP8.1で開発していたが、レンタルサーバーではPHP7.4しかサポートしていないケースもあります。
その場合、WordPressの管理画面には警告メッセージが表示されます。
Local WPのバージョンを本番環境のバージョンに合わせることを忘れないようにしましょう。
Version - バージョン
Version は任意の項目です。バージョンの管理方法は、開発者個々のルールに応じてください。
私個人の管理方法としては、
- 開発時は未記載
- 初回本番リリース時に Version:1.0.0 を追記
- 大きな改修でメジャーバージョンアップ（1.0.0を2.0.0へ）
- 小規模な改修でマイナーバージョンアップ（1.0.0を1.1.0へ）
- 軽微な修正でパッチバージョンアップ（1.0.0を1.0.1へ）
のようにしています。
License - ライセンス
License も任意項目です。
自由ソフトウェアやオープンソースであれば「GNU General Public License v2 or later」などが一般的です。
ライセンスは、依頼者との契約条件によりますので、契約内容に応じて適切な内容を記載します。
このサンプルでは、依頼者の為に開発したことを示すために「本テーマは、株式会社HOGE様のご依頼により、UOCNが作成したものです。当テーマで使用されている全てのソースコード・画像・文章・データについて無断転用・無断転載をすること禁止します。」としました。
まとめ
WordPressのテーマを作成する際は、テーマフォルダ内にstyle.cssファイルが必要であり、そのstyle.cssにはテーマコメントを記述する必要があります。
依頼者との契約内容やテーマの管理方法に基づいて、適切なテーマコメントを記述するよう心がけましょう。
また、テーマを一般公開して配布する場合、テーマコメントはより重要となりますので、内容をしっかり理解することが重要です。
