WordPressの親テーマと子テーマのつなげ方【ポイントはstyle.css】

WordPressの親テーマと子テーマのつなげ方【ポイントはstyle.css】 WordPress
2021.02.02

こんにちは、mickです。

WordPressを始めてテーマに興味を持ったとき、親テーマと子テーマがどういう関係でつながっているかずっと謎だったんですよね。

既存の子テーマをカスタマイズして、新しい子テーマを作ったときにやっとわかりました。
WordPressには、style.cssがとても大切だということの理解が必要だったんです。

それをお勉強メモとして残すことにしました。
style.css についてはWordPress.orgのチュートリアル（Main Stylesheet (style.css)）を参考にしています。

style.css：テーマを作るときとても大切

WordPressのテーマには必ず style.css が置いてます。
拡張子がCSSなので、CSSを記述するところだとなんとなくわかります。

実はそれだけでなく、WordPressのテーマを説明するのに使います。

WordPressは style.css をみてテーマのことを知る

WordPressのテーマの画面に出てくる情報は、style.cssに記述してある内容が表示してます。
他にも style.css から次のことがわかるようになってます。

  • テーマ名
  • テーマの説明
  • テーマの親テーマ
  • バージョン（更新通知に使う）
  • テーマのURI（更新時に取得する場所）
  • などなど

style.css に記述するテーマの情報サンプル

WordPress.orgが出しているテーマ、Twenty Twenty-Oneを例にみてみたいと思います。

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 5.6
Requires PHP: 5.6
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

⇒ Twenty Twenty-One

テーマ情報の内容（親テーマ）

WordPressのチュートリアルを参考に、各項目を紹介です。
テーマをwordpress.orgに登録する場合は、(*)の項目が必須。

  • Theme Name (*): テーマの名前
  • Theme URI: ユーザーが見ることができるテーマのWebページ
  • Author (*): テーマを作成した開発者の情報。wordpress.orgに登録しているのなら、登録しているユーザー名を使うのがオススメ
  • Author URI: テーマを作成した開発者のWebサイト
  • Description (*): テーマの説明
  • Version (*): テーマのバージョン。フォーマットは、X.XかX.X.X。つまり1.0とか1.0.1とか
  • Requires at least (*): テーマを使うのに必要なWordPressの最低限のバージョン。フォーマットは、X.X。例えば、4.6とすると、このテーマを使うのに必要なのはWordPress4.6以上となる
  • Tested up to (*): テーマをテストした最新のWordPressのバージョン。フォーマットは、X.X。例えば、5.6なら、WordPress5.6まで動作を確認したということ
  • Requires PHP (*): The oldest PHP version supported, in X.X format, only the number
  • License (*): テーマのライセンス
  • License URI (*): ライセンスの内容がわかるWebページ
  • Text Domain (*): Webサイトの翻訳情報がある場所。通常はテーマフォルダを記載する
  • Tags: ユーザーがテーマを見つけるためのヒントになる、単語やフレーズを書くところ（書けるタグはコチラ）
  • Domain Path: Webサイトの翻訳情報があるまでのパス。デフォルトは、/languages

⇒ エンジニアが最低限理解しておくべきOSSライセンスの基礎知識

（親）テーマのサンプル（Cocoon）
（親）テーマのサンプル（Cocoon）

子テーマに必須の情報（ Template: で親テーマとつながる）

子テーマでは、親テーマに書かない情報があります。
それが Templete:

それによって、親テーマと子テーマがつながります。

/*
Theme Name: My Child Theme
Template: twentytwenty
*/
  • Theme Name: 子テーマの名前
  • Template: 親テーマのフォルダ

ここの「Template:」の項目が重要で、ここに「親テーマのフォルダ」を書くと始めてこのテーマが「子テーマ」になります。

WordPressの子テーマのサンプル（Cocoon）
WordPressの子テーマのサンプル（Cocoon）

まとめ。

親テーマと子テーマのつなげ方とWordPressテーマに欠かせないはstyle.cssの情報を書きました。

style.css に書く（子）テーマの情報がわからないなら、すでにあるテーマにある style.css の書き方を参考にすれば大丈夫です。

もちろん、コピペはNGですよ。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/02/02

スポンサーリンク