【style.cssの書き方まとめ】WordPressの自作テーマで記述すべきこと

style.cssの書き方まとめ

WordPressでテーマを自作する際には、必ずstyle.cssをテーマのルートディレクトリ(テーマフォルダを開いたすぐの場所)に用意する必要があります。

単にCSSを記載するところであるほかにテーマ設定を記述する大事なファイルでもあるので、この記事を読んで正しく記述できるようにしましょう。

目次

WordPressテーマにおけるstyle.cssの役割

WordPressテーマを自作する際に、必ず用意すべきファイルが3つあります。

  • index.php
  • functions.php
  • style.css

最低限、上記の3つがないとテーマとして正常に動作しません。

その中でもstyle.cssは「どんなテーマであるか」を記載しておく場所となります。

もちろん名前の通りCSSを記述してもOKですが、CSSよりも先にコメントアウトの状態でテーマ名などを書いておく必要があります。

style.cssにはテーマの概要を記述しておく必要がある

これを正しく記述しておくことで、自作したテーマファイルが正しく認識されて動作するようになります。

style.cssが置かれるべき場所

style.cssはテーマファイルのルートディレクトリ(テーマフォルダを開いたときにすぐある場所)に置くべきだと決まっています。

style.cssは下記の場所に置きます
/wp-content/themes/自作したテーマフォルダ/style.css

指定の場所以外に配置してしまうとうまく認識されないので注意してくださいね。

style.cssに記述した内容が反映される場所

WPテーマ「Twenty Thirteen」の詳細情報

style.cssに書いた内容は、テーマの詳細情報として管理画面上にも表示されます。

  • テーマ名
  • バージョン
  • 作者
  • テーマ詳細
  • タグ

などですね。

style.cssに記述すべきこと

style.cssの一番最初にコメントアウトの状態で必要なことを記述していきます。

コメントアウトとは下記のように、コードとして動作させず開発時のメモとして利用するものです。

/*
コメントアウト
これもコメントアウト
*/

詳細はのちほどまとめますが、個人利用するテーマであれば最低でも以下がstyle.cssの冒頭に記載されていればOK。

/*
Theme Name: テーマ名
Author: 作成者名
*/

ただし、一般利用できるように公式ディレクトリに登録する場合などには、しっかり内容を把握して調整したほうがいい項目もありますので、時間がある方はこの先も読み進めてみてください。

「公式ディレクトリに登録する」とは・・・
WordPressの管理画面から新規テーマとして検索して利用してもらえるようにすること

style.cssに記載できる全項目

style.scssには以下の項目を記載することができます。

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
Text Domain翻訳ファイルを参照するために必要なテキストドメイン
Template親テーマの指定(※子テーマ作成時にのみ利用)

(*) 印がついているものは、公式ディレクトリに登録する際には必ず必要です。
個人利用するときには、最低限Theme Nameだけ記載があれば動作しますが、AuthorDescriptionぐらいは記載があるとよいですね。

実際にWordPress公式テーマ「Twenty Twenty」には以下のように記述されています。

/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
WordPress Developer Resources
Main Stylesheet (style.css) – Theme Handbook | Developer.WordPress.org The style.css is a stylesheet (CSS) file required for every WordPress theme. It controls the presentation (visual design and layout) of the…

style.cssで設定できる項目の詳細

設定可能な各項目を詳しく見ていきます。

Theme Name

style.cssに必ず記載すべき項目の筆頭であるTheme Name

項目名の通り「テーマの名前」を設定します。

Theme Name: Miyachi Labo

このサイトでは上記のように「Miyachi Labo」とテーマ名を設定しています。
自分の作成しているテーマの名前を自由に入れてください。

Theme URI

次に、作成したテーマについての説明などが閲覧できるサイトのURLも追記可能です。

例えばWordPressのデフォルトテーマ「Twenty Thirteen」では以下のように指定されています。

Theme URI: http://wordpress.org/themes/twentythirteen

URLではなく「URI」なので注意してください

WordPress.org
Twenty Thirteen | WordPress Theme Directory The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design detai...

もし作成したテーマを公式ディレクトリに登録する場合には、きちんと公式サイトを用意してstyle.cssにも記載しておくのがよいでしょう。

Author

テーマの作成者名はAuthorで設定します。

Author: Miyachi

公式ディレクトリに登録するのであれば、WordPress.orgに登録されているユーザー名にしておくとよいでしょう。

Author URI

必須項目ではありませんが、Author URIにてテーマ作成者のサイトURLを記載することも可能です。

Author URI: https://labo.kon-ruri.co.jp

URLではなく「URI」なので注意してください

Description

「どんなテーマであるか」の詳細を記述するのがDescriptionです。

例えば、WordPress公式テーマでは以下のように記述されています。

Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.

テーマを公式ディレクトリに登録する際にはしっかり記載することが必要ですが、特定のサイトのみ、もしくは個人サイトにて利用する場合は簡潔に以下のように書いてもOKです。

Description: Miyachi Labo Original Theme

Version

VersionにはX.XもしくはX.X.Xの形式でテーマのバージョンを記載します。

新規で作成した場合は、以下のように書いておけば問題ありません。

Version: 1.0

Requires at least

テーマが動作する一番古いWordPressのバージョンをX.X形式で記載しておきます。

Requires at least: 5.0

公式ディレクトリに登録するなら、少なくとも最新の3バージョンには対応していることが必須条件です。

Tested up to

動作テストを済ませたWrodPressのバージョンをTested up toにて記載します(形式はX.X)。

Tested up to: 5.4

Requires PHP

どこまで古いPHPのバージョンを対応しているかを記載するのがRequires PHP

対応可能なバージョンをX.X形式で記載してください。

Requires PHP: 7.0

License

次のLicenseは、自作したテーマの著作権をどういったルールで設定しているか(ライセンス)を記載する部分です。

License: GNU General Public License v2 or later

上記の文言は、GPLv2と呼ばれるコピーレフト型のライセンスに準じると宣言しています。

ライセンスについては以下の記事がわかりやすいです。
https://blog-bootcamp.jp/start/wordpress-license/

License URI

宣言したライセンスについての詳細情報があるページのURLを記載するのがLicense URI

標準のGPLv2を採用したときには、以下のURLを指定しておけば間違いありません。

License URI: http://www.gnu.org/licenses/gpl-2.0.html

URLではなく「URI」なので注意してください

Tags

テーマの特徴に応じてタグ付けするのがTags

例えば、WordPress公式テーマ「Twenty Thirteen」では以下のように記載されています。

Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready

これはテーマを検索するときに「特徴」で絞り込む条件として使われます。

そのため、一般利用できるテーマとして公式ディレクトリに登録する際には、必ず決められた項目内で該当するものをフォーマットに沿って記述しておく必要があります。
(特定サイトのみで利用する個人目的で作成したテーマであれば必要ありません)

指定できる項目は下記公式サイトに一覧がありますので参考にしてください。

Make WordPress Themes
Theme Tags Here is a list of all of the tags that a theme can use and what the theme needs to fulfill to be allowed to use the tag. You can find the list of tags using API...

Text Domain

多言語対応のサイトを作る際、翻訳ファイルを参照させるために必要なテキストドメインを指定します。

Text Domain: twentytwenty

個人利用するときには必要ないかもしれませんが、公式ディレクトリに登録するときには必要になってくるので注意してください。

その他

最後にLicenseに関わる文言を明記しておきます。

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

直訳すると

このテーマはWordPressと同様、GPLライセンスに準じます。
何か素晴らしいものを作ったり楽しんだりするのにテーマを用い、学んだことを他の人とシェアしましょう。

この文言はWordPressが採用しているライセンスについてのテキストですね。
記載しても記載しなくても、どちらでも構いません。

まとめ

style.cssはその名前の通り「CSSを記載するファイル」ではありますが、同時にテーマ情報を記載する必要があることは知ってないと気づけないですよね。

テーマが動作するための必要設定になりますので、間違えずに記載できるようになりましょう。

style.cssの書き方まとめ

この記事が気に入ったら
いいね または フォローしてね!

SHARE
  • URLをコピーしました!

コメント

コメントする

目次