WordPress 子テーマの作り方

子テーマとは

ベースとなるテーマを親テーマとして、それを継承してテーマを作成するテーマです。
親テーマの内容を上書きするのではなく、必要な箇所のみカスタマイズすることができます。

子テーマのメリット

親テーマにがっつり変更を記述していると、もし親テーマにアップデートがあった場合、上書きされて消えてしまいます。

親テーマにアップデートがあった場合も、子テーマの自分が編集したところを調整するだけでOKなので、比較的簡単アップデートができます。

子テーマは、テーマを一から作るのは大変なので、少しカスタマイズして使いたいという人におすすめの手法です。

初心者:色やフォント、サイズなど見た目を変更したい(CSSカスタマイズ)
→ カスタマイズ画面でのカスタマイズ がおすすめ

中級者:ベースで使いたいテーマがあり、表示される内容なども変更したい
→  子テーマがおすすめ

中・上級者:自分ですべてカスタマイズしたい・WordPressの勉強がしたい
→  ゼロからのテーマ作成がおすすめ

子テーマの作り方

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

親テーマと同じ階層にある /wp-content/themes に子テーマ用のフォルダを作成します。
後々間違って親テーマを消す可能性を考慮し、テーマ名は「親テーマの名前-child」 などにしておくとよいでしょう。

親テーマが「Twenty Fifteen」の場合
twentyfifteen-child

子テーマディレクトリの名前には空白があるとエラーがでるので、注意してください。

2.テーマに必要なファイルを作成

・style.css
・functions.php

この2つのファイルを作成し、編集して行きます。

3.style.css の編集

スタイルシートヘッダ を記述することで、テーマとして読み込まれるようになります。

/*
 Theme Name:  テーマ名
 Theme URI:   テーマのURL
 Description: テーマの簡単な説明
 Author:      テーマ開発者名(WordPress.orgのユーザー名が推奨されています)
 Author URI:  テーマ開発者のURL
 Template:    親テーマのディレクトリ名
 Version:     テンプレートのバージョン
 License:     テーマのライセンス
 License URI: テーマのライセンスURL
 Tags:        タグフィルタを使ってテーマを探す用(タグ一覧はTheme Tagsを参照)
 Text Domain: 翻訳用のテキストドメイン
*/

子テーマとして、読み込むためには、
Theme Name: テーマ名
Template: 親テーマのディレクトリ名
この2つを最低限記述します。

親テーマを「Twenty Fifteen」にした場合

/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
*/

4.functions.phpの編集

親テーマと子テーマのスタイルシートをキューに入れます。
@import: を使用して親テーマのスタイルシートをインポートする方法もありますが、現在では functions.php で wp_enqueue_script()を使用する方法が推奨されています。

<?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')
    );
}

5.子テーマを有効化する

サイトの管理画面にログインし、管理画面 > 外観 > テーマに移動します。
子テーマが表示され、有効化できる状態になっています。

テーマの詳細から見ることができます。

もし、親テーマに、カスタマイズを入れている場合は、子テーマにも同じ設定を保存し直す必要があります。

参考サイト

子テーマ – WordPress Codex 日本語版