WordPress 子テーマのメリットと作成方法

WordPressでサイトをカスタマイズしたい方、子テーマを作ろうとしている方に読んでほしい記事です。

私も今まで子テーマを使っていなかったのですが、サイトを本格的にカスタマイズするにあたり、子テーマを試行錯誤して作成しました。

子テーマを作成することによって、サイトのカスタマイズがスムーズにできるようになったので、子テーマのメリットと作成方法について、ご紹介できればと思います。

スポンサーリンク

子テーマとは

子テーマとは、通常のWordPressテーマ（親テーマと言います）と連携したカスタマイズ専用のテーマのことです。

子テーマを作ることで、親テーマのコードをいじることなく、サイトのカスタマイズを楽しむことができます。

なぜなら、コード内容をサイトに反映するときに、通常は親テーマのコードをそのままサイトに反映しますが、子テーマにコードの記述がある場合、子テーマのコードを優先的に反映することができるからです。

▪︎子テーマがない場合

親テーマのコードがそのままサイトに反映。

▪︎子テーマがある場合

子テーマのコードを優先的にサイトに反映。

子テーマのメリットとは

ここまで読んで、「親テーマを直接カスタマイズすれば良くない？」と感じている方もいると思うので、子テーマのメリットについて触れておきます。

親テーマのアップデートに振り回されない

子テーマがない場合、親テーマが何らかの理由でアップデートしたときに、アップデート前のカスタマイズ内容はすべて解除されてしまいます。

一方、子テーマがあればコードが独立しているので、そのままカスタマイズ内容を引き継ぐことができます。

カスタマイズの試行錯誤がしやすい

親テーマのコードを直接変更する場合、カスタマイズを失敗してしまったときに、元のコードがわからなくなってしまうリスクがあります。

子テーマがある場合、カスタマイズに失敗をしても、親テーマにある元のコードを参照して戻すことができるので、カスタマイズの試行錯誤がとてもしやすくなります。

子テーマのメリットを感じることができたら、いよいよ子テーマを作っていきましょう。

子テーマの作り方

WordPressのテーマ「STINGER5」、サーバー「ロリポップ！」の環境で説明しますが、他の環境でも手順は同じだと思います。

あとで注意点にも記載しますが、作業前に必ずバックアップをとることをオススメします。

サイトのFTPサーバーに入る

ロリポップ！の場合、「ロリポップ！FTP」に指定パスを入れてログインします。
ロリポップ！FTP

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

ドメイン名＞wp-content＞themesとフォルダの階層をたどっていき、「themes」フォルダ内に子テーマのフォルダを新規作成します。

フォルダ名は自由ですが、「STINGER5」の場合、「stinger5child」と付けるのが主流です。

「style.css」ファイルの作成

子テーマのフォルダ内に、「style.css」ファイルを作成します。

更に、「style.css」ファイル内に、下記のコードを記述します。

/*
Theme Name:●●
Template:▲▲
*/

●●には子テーマのフォルダ名（私の場合は「stinger5child」）、
▲▲には親テーマのフォルダ名（私の場合は「stinger5ver20150505b」）を記載します。

「function.php」ファイルの作成

「style.css」と同じ手順で、子テーマのフォルダ内に、「function.php」ファイルを作成します。

更に、「function.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の公式オンラインマニュアルには、下記のコードでも反映できると記載がありましたが、私の場合は反映できませんでした。。

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

}
?>

WordPressの公式オンラインマニュアル

子テーマの有効化

WordPressの管理画面にあるテーマ一覧に、子テーマが作成されていることを確認できたら、テーマを有効化します。

※親テーマはそのまま有効化しておいてください。

※もし、子テーマが作成されていないようであれば、ここまでの手順にミスがある可能性が高いです。

子テーマ反映のテスト

WordPressの管理画面にあるテーマの編集に、FTPサーバーで作成した「style.css」ファイルがあることを確認したら、下記のコードを記述してみてください。
※子テーマ発動用のコードの下に記述してください。

header {
	text-align: center;

サイトを更新し、サイトタイトルが「中央」になっていれば、子テーマが正常に機能していますので、子テーマの作成完了です。

子テーマ作成時の注意点

私が子テーマを作成するときに、学んだ注意点を最後に書いておきます。

子テーマ作成前にバックアップをおこなう

子テーマを作成しているときに、「間違ってファイルを消してしまった・・」など不測の事態が起きてしまうことがあるので、念のためバックアップはとっておいたほうが良いです。

私もこれを機会に、ロリポップ！のバックアッププランに申し込みました。

「style.css」に「@import」を記述するやり方はやらない

子テーマの作成方法を探していると、よく「style.css」に「@import」を使用した作成方法を見かけますが、サイトのスピードが遅くなるなど、公式マニュアルでもこのやり方を推奨していないので、避けたほうが良いです。

親テーマの「function.php」のコードを子テーマにそのままコピーしない

子テーマは、「style.css」だけでなく、「header.php」「sidebar.php」など様々なファイルで作成可能です。

サイトをカスタマイズをしていくにあたり、親テーマのコードをそのままコピーして（もしくは、ファイルごとコピーして）、子テーマを作成することが増えてきますが、「function.php」のファイルについては、親テーマのコードをそのまま子テーマに写すとエラーが発生します。

「function.php」特有の子テーマ作成手順があるらしいのですが、私は「function.php」だけは親テーマを直接カスタマイズしています。
(子テーマ作成時につくった「function.php」には、子テーマ発動のコードだけを記述しています。)

親テーマの「function.php」のコードを変更しないと、子テーマの「style.css」のコードが一部反映されないことがある

WordPressのテーマ「STINGER5」で発生する事象ですが、親テーマの「function.php」にある下記のコードを削除しない場合、子テーマ「style.css」のコードが一部反映されないことがあります。

//テーマカスタマイザーで編集しない方は削除して下さい（ここから）

function stinger_customize_register($wp_customize) {

$wp_customize->add_section( 'stinger_logo_image', array(
'title' => 'ロゴ画像',
'priority' => 10,
) );

〜〜〜〜〜　省略　〜〜〜〜〜

</style>
<?php
    }
    add_action( 'wp_head', 'stinger_customize_css');

//カスタマイザーで色を設定しない方は削除して下さい（ここまで）

削除した場合、デフォルトのカスタマイズ設定が一部使えなくなりますが、今後いろいろとカスタマイズしていくのであれば、削除することをオススメします。

本記事は以上になります。

最初は子テーマを作成することに抵抗を感じるかもしれませんが、サイトをカスタマイズしていくにあたり、子テーマはとても便利に使えるので、早めに作成することをオススメします。

お付き合い頂き、ありがとうございました！

＃最後に、子テーマを作成するときに参考にしたサイトを紹介しておきます。
【参考】Stinger5の導入＆子テーマの作成方法
【参考】WordPressテーマをカスタマイズするなら子テーマを使った方が良い理由、使い方など