【簡単】WordPressで子テーマを作る基本の方法【必要なのは2ファイルだけ】

Wordpress

2018.12.18

WordPressでテーマを選択する前に、必ず子テーマを作ってそちらを有効化することをおすすめします。まずは子テーマ作成の基本をご紹介します。

みなさんこんにちは！
筋肉カメレオンです。

WordPressのテーマを選ぶ際に、子テーマを作っていますか？

子テーマを選択するメリットと、基本的な子テーマの作り方をご紹介します。

メリット①カスタマイズしやすい
メリット②カスタマイズ時にいつでも元に戻せる
メリット③カスタマイズ部分のソースコードがシンプルになる
子テーマの作成方法
さいごに

メリット①カスタマイズしやすい

親テーマを直接編集してカスタマイズしてしまうと、親テーマのアップデート時にすべて初期化されてしまいます。

泣きますね。

でも子テーマとして親テーマを参照しつつカスタマイズしている場合は、親テーマをアップデートしてもカスタマイズ部分は子テーマとして残ります。

WordPressの利用を続けていると多少はカスタマイズしたくなってくるので、最初から子テーマを作って有効化しておくと良いでしょう。

メリット②カスタマイズ時にいつでも元に戻せる

親テーマのカスタマイズしたいファイルを子テーマにコピーしてカスタマイズを行うため、万が一めちゃくちゃになって動作しなくなったとしても、元データが親テーマに残っているので、いつでも元の状態に戻せます。

メリット③カスタマイズ部分のソースコードがシンプルになる

上書きしたい部分だけ子テーマとして記述するので、子テーマのファイルとして存在するのは、自分がカスタマイズした部分のみとなります。

ごちゃごちゃした複雑な親テーマ部分と、自分のカスタマイズした部分で分けて管理できるのでソースコードが見やすいですね。

子テーマの作成方法

それでは、子テーマの基本的な作成方法です。

まず今回はWordpress5.0.1のデフォルトテーマ「twentynineteen」を親テーマとしてみます。

/wp-content/themes/twentynineteen と同階層に、「twentynineteen-child」というフォルダを作成します。
※子テーマは親テーマに「-child」を付けるというのが慣習になっています。

その中に、「functions.php」と「style.css」を作成します。
最低限必要なのはこの2ファイルです。

まずは、「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' );
}

上記を記述し、親テーマのstyle.cssのあとに子テーマのstyle.cssを読み込ませます。

これで自動的に下記のように親テーマ→子テーマの順でstyle.cssが読み込まれます。

<link rel='stylesheet' id='parent-style-css' href='＊＊ブログドメイン＊＊/wp-content/themes/twentynineteen/style.css?ver=5.0.1' type='text/css' media='all' />

<link rel='stylesheet' id='twentynineteen-style-css' href='＊＊ブログドメイン＊＊/wp-content/themes/twentynineteen-child/style.css?ver=5.0.1' type='text/css' media='all' />

次に、style.cssを作成します。

@charset "UTF-8";
/*
Template: twentynineteen
Theme Name: Twenty Nineteen 子テーマ
*/

1行目の「@charset “UTF-8”;」は、日本語（マルチバイト文字）を扱うためのおまじないみたいなものです。

Templateは、親テーマのフォルダ名を記述します。

Theme Nameは、子テーマの名称です。Wordpress管理画面のテーマ名として表示されます。

基本はこの2ファイルを最低限用意し、上書きしたい部分を子テーマの中にどんどん追加してカスタマイズするだけです。

簡単ですよね。