WordPressで使用するテーマから子テーマを作ろう!

WordPressで適用したテーマをそのまま使うより、いろいろ自分仕様に修正したいですよね。そんなときにテーマを直接修正してしまうと、アップデートのたびに上書きされてしまい、再度同じ部分を修正するはめになってしまいます。そんな手間を避けるために子テーマを使う方法を書きたいと思います。

スポンサーリンク

子テーマとは

通常使用しているテーマを親テーマとすると、子テーマは、親テーマの中で修正した部分のみを入れたものとも言えると思います。
なぜ子テーマを作るかというと、親テーマを直接修正してしまうと、テーマがアップデートなどした場合に、上書きすることになるので、せっかく自分仕様で修正した部分が消えてしまうからです。
ちゃんとしたテーマであれば、バグなども含め少しずつアップデートしていくはずなので、それを適用するたびに、また戻ってしまった部分を修正するのは手間なので、子テーマに修正したものを書き込んで上書きされるのを防ぎます。

子テーマを設定するために必要なもの

子テーマで必ず必要とされるファイルは
style.css
functions.php

この2つです。
それ以外は、修正したいphpを子テーマフォルダにいれていくことになります。
修正しないファイルは入れる必要がありません。親テーマをそのままコピーしたりする必要はありません。
むしろ、わかりやすいように修正したものだけ入れるのがよいと思います。

子テーマを保存するフォルダ名

子テーマを保存するフォルダを作ります。
親テーマがあるthemeフォルダの中に
shiritai
shiritai_child ←今回作る子テーマフォルダ

などとして、保存します。
親テーマと同階層に置きます。親テーマフォルダの中には入れません。
子テーマの名前は「(使用しているテーマ名)_child」などとしておくと、使用しているテーマの子テーマだとわかりやすいので、使用しているテーマの後ろに_childなどと入れるのが一般的です。
ここでは子テーマの名前を「shiritai_child」としておきます。

style.cssを作ります

子テーマファイル「shiritai_child」内に入れるstyle.cssを作成します。
style.css内のトップに以下のコードを記入してください。

/*
Template:shiritai
Theme Name:shiritai_child
*/

コメントアウトの 「/*」「*/」も忘れずに記入します。

Template:使用しているテーマ名(フォルダ名)
Theme Name:子テーマ名

となります。
これをしないと子テーマとして認識してくれません。
認識しない場合は、Templateのほうに間違いがある場合が多いので、今一度確認しましょう。

あとは、親テーマで使用しているCSSで修正したい部分を下記のように書いて「*/」の下に書いていきます。

/*
Template:shiritai
Theme Name:shiritai_child
*/
.font14 {
font-size:14px;
color:#ff0000;
}

functions.phpを作ります

子テーマファイル「shiritai_child」内にいれる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' ); 
}

このコードを記述すれば、親テーマのCSSを読み込んで、子テーマのCSSも読み込んでくれるようになります。

スクリーンショットを作る

子テーマのスクリーンショットも作りましょう。親テーマにあるscreenshot.pngを子テーマに入れれば同じ画像が表示されます。
自作する場合は、サイズ880×660でpngで保存します。
ここではわかりやすいように、知りたいねっと子テーマとしました。

こちらをstyle.cssやfunctions.phpと同じ「shiritai_child」フォルダに入れて、「theme」フォルダ内にアップロードします。

子テーマの適用方法

親テーマのある同じ階層に子テーマのフォルダを置けば、[外観]→[テーマ]から子テーマが選べるようになります。

マウスを子テーマの上に持ってくると、「有効化」ボタンが出てくると思うので、それを押せばOKです。

コメントをどうぞ