WordPressで子テーマを作る方法 | グリニッジ株式会社

前回の続き、WordPressのテーマカスタマイズ方法として、子テーマの作り方をご紹介します。

子テーマとは、親テーマのスタイルや機能などを継承した上で、新たに編集できるテーマになります。
既存のWordPressテーマのカスタマイズには子テーマを用いましょう。

子テーマの作り方

ここから子テーマの作り方について説明します。子テーマのフォルダを作ろう

1.子テーマのフォルダを作成する

WordPressのテーマが置いていあるフォルダ（wp-content/themes）を開き、新規フォルダを作成します。
フォルダ名にルールはないのですが、親テーマ名-childと命名するのが一般的です。
今回はWordPressをインストールした時に用意されているTwentyTwentyテーマの子テーマを作るので、TwentyTwenty-childとしています。

2.style.cssを作成し子テーマと認識させる

1で作成したフォルダを開き、style.cssを新規作成します。
作成後、テキストエディタでstyle.cssを開き、以下のコードを追加します。

/*
Theme Name:   Twenty Twenty Child
Theme URI:    http://example.com/twenty-twenty-child/
Description:  Twenty Twenty Child Theme
Author:       Greenwich Inc.
Author URI:   http://example.com
Template:     twentytwenty
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

WordPress子テーマを作る呪文のようなものです。
各項目はサイトに合わせて書き換えてください。特に必要なのは以下の2つです。

Theme Name … 子テーマの名前（例：Twenty Twenty Child）
Template … 親テーマのフォルダ名（例：twentytwenty）

Templateはテーマ名ではなくフォルダ名であることに注意してください。
編集語、保存してください。
その他の項目の解説は以下の通りです。
自分のサイトに合わせて適宜編集してください。

Theme URI：ユーザーがテーマのコードまたはドキュメントを確認できる場所（URL）
Description：ユーザーがテーマの内容を理解するのを助ける説明文
Author：テーマ作者の名前
Author URI：テーマ作成者のウェブサイト
Version：バージョン番号
License：ライセンス（GNU）
License URI：ライセンスに関する情報のリンク

3.親テーマのスタイルを継承する

2の時点でWordPressから子テーマと認識されるようになりますが、子テーマに切り替えるとデザインが崩れます。
親テーマで設定されているスタイルを継承していないからです。

子テーマのフォルダ（style.cssがあるフォルダ）にて、functions.phpを新規作成し、テキストエディタで開きましょう。
そして、以下のコードを貼り付けて保存してください。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

親テーマを継承する呪文です。
WordPress関数を用いて、親テーマと子テーマのスタイルを読み込むようにしています。
ポイントは親テーマのスタイルを先に読み込んでいることです。
こうすることで、子テーマのstyle.cssで同じセレクタに異なるスタイルを書いて上書きします。