WordPressで子テーマを作成しよう

ダウンロードした誰かのテーマにコード変更を加えると、将来テーマのアップデートがあったときに自分のコードが消えてしまうので困りますよね。いつも僕は自分のコードが書かれたファイルを退避しておいてアップデート後に戻していたのですが、もっといい方法がありました。

それは子テーマを作る方法です。子テーマとは親テーマを設定して、差分を作り込んでいくテーマです。親テーマのアップデートがあっても、子テーマに影響を与えるようなアップデートでなければほとんどの場合、問題なく子テーマが継続して使えるようになります。

作成方法

ではさっそく子テーマの作成方法をみていきましょう。

ここでは次の構成とします。

親テーマ: twentyseventeen (公式テーマ)
子テーマ: twentyseventeenchild

テーマフォルダの作成

テーマディレクトリに子テーマ用のフォルダを作ります。

wp-content/themes/twentyseventeenchild

子テーマを定義する

style.css を作成します。

wp-content/themes/twentyseventeenchild/style.css

次の内容にします。

/*

Theme Name: [子テーマ名]
Template: [親テーマ名 ※1]
Author: [作者名]
Version: [バージョン番号]

*/

※1 親テーマ名は分かりますか? テーマ名は、外観–テーマメニューでテーマをクリックするとURLに表示されています。?theme=twentyfifteen のような感じになっているかと思います。

例) 親テーマとして Twenty Seventeen を使う場合は次のようにします。

/*

Theme Name: Twenty Seventeen Child
Template: twentyseventeen
Author: keruu
Version: 1.0.0

*/

これで子テーマが使えるようになりました。しかし、まだ有効化してもスタイルが適用されません。

親テーマのスタイルを適用する

次のようにして親テーマのスタイルを使うようにします。

functions.phpを作成します。

wp-content/themes/twentyseventeenchild/functions.css

中身を下記のようにします。

<?php

add_action('wp_enqueue_scripts', 'enqueue_parent_styles');

function enqueue_parent_styles() {
  wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
}

完成!

これで子テーマは完成です。テーマを有効化してみましょう。どうですか。表示されましたでしょうか。

こんな便利な方法があるなんてもっと早く知りたかったです。でも、これでテーマ開発が一層楽になりますね。

WordPressで子テーマを作成しよう

作成方法

テーマフォルダの作成

子テーマを定義する

親テーマのスタイルを適用する

完成!

関連した商品

関連