WordPress/ChildTheme

ChildTheme

Wordpress でサイトを制作する場合、テーマを白紙の状態から書いていく方法と、既存のテーマをカスタマイズする方法とがありますが、ここで概説するChild Thema（子テーマ）というのは、後者の場合に利用されるものです。

既存のWordpressテーマを親テーマといい、その機能とスタイルを引き継いだ上で、部分的な修正を加えるファイルセットを子テーマといいます。

既存のテーマをカスタマイズする場合、直接当該フォルダ内のファイルを修正すると、例えばテーマの更新があった場合、あなたが修正した内容も含めて、すべて新しいファイルで更新されてしまいます。そこで、このような問題を回避するために、既存のテーマに対する修正部分のみを別ファイルとして扱うことが推奨されているのです。

公開されているテーマの事例（いずれもGPL）
- Lightning：https://lightning.nagoya/ja/
- Cocoon：https://wp-cocoon.com/

↑

制作手順

↑

1. 子テーマ用フォルダの準備

子テーマは独立したひとつのテーマとして扱われます。そこでまず、

wordpress > wp-content > themes > ''親テーマ名_child''

のように子テーマのフォルダをつくります（フォルダ名は自由です）。

子テーマに必要なファイルは以下の２つです。その他は、親テーマのものをリンクして使う・・という発想です。

style.css
functions.php

子テーマは一般にCSSだけに変更を加えるものですが、例えば header.php なども変更したい場合は、新規に制作した header.php を子テーマフォルダに投入します。この場合、親テーマの header.php のかわりに子テーマフォルダ内のものが利用されます。

↑

2. style.css の記述

とりあえず、style.css を作成して子テーマフォルダに投入します。
必要なルールはひとつだけ、子テーマの style.css の先頭に以下のようなコードを記載します。あとは追加のCSSをどんどん追記するだけです。

/*
Template:親テーマのフォルダ名（正確に記述してください）
Theme Name:子テーマの名前（任意）
*/

例

/*
Template:twentyseventeen
Theme Name:My Theme
*/

↑

3. functions.php の記述

次に、functions.php を作成して子テーマフォルダに投入します。
とりあえず、子テーマの 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') );
    }
?>

↑