【WordPress】超簡単！フォルダ1つ、ファイル2つだけの子テーマ作成

仕事と自分のポートフォリオサイトの更新でバタバタしていて久しぶりの更新となってしまいましたが、今回はWordpressの子テーマカスタマイズについて解説していきたいと思います。

子テーマとは、

僕も最初この言葉を聞いたとき「何それ」と思いまいしたが、子がいるということは親がいるので親テーマもあります。
普段テーマをインストールしてカスタマイズしていく際にそのまま何もせずにいじっているのは親テーマであり、子テーマは元々のテーマファイルである親テーマをいじらずに、カスタマイズするためのテーマと思っていただければいいです。

仕組みとしては基本的には親テーマのファイルを読み込んでいるのですが、同じファイルが子テーマにあった場合に上書きするという感じになってます。

例：

.sample{
	font-size:2em;
	color:#AAA;
}

.sample{
	font-size:2em;
	color:#AAA;
}

この場合は子テーマのstyle.cssに書いてあるスタイルが適用されます。なんとなく親テーマと子テーマの関係性はつかめたでしょうか？
例ではCSSを使いましたが、phpファイルも同じ仕組みになっているのでfunctions.phpとかもこの方法で上書きすることができます。

そもそもなぜ子テーマ使うのか

最初の頃は「子テーマとかよくわかんないし、面倒くさそうだから親テーマ直接いじろー」なんて思っていましたが、後々のことを考えると断然子テーマを使用した方が楽です。

子テーマ　作り方

※参考テーマはWordpressデフォルトテーマである「Twenty Sixteen」を使用します。

wp-content/themes配下に子テーマのフォルダを作成

wp-content/themes内

これは全然難しくなく、上記の画像のようにwp-content/themes配下にただフォルダを作成するだけです。
名前はなんでも構いませんが、「テーマ名_child」とかにしとくとわかりやすいんではないかなと思います。

子テーマに必要なファイルをいれる

の中身が空のファイルを作成し、先ほど作成したフォルダの中にいれる。

「これは（テーマ名）の子テーマですよ」というコードを追加する

先ほど作成して子テーマのフォルダに入れたstyle.cssとfunctions.phpに親テーマを継承するためのコードを追加します。

/*
 Theme Name:   Twenty Sixteen Child
 Template:     twentysixteen
*/

・Theme Name 子テーマ識別用の名前
・Template 親テーマのフォルダ名

上記のコードが継承用のコードになるのですが、Twenty Sixteenのテーマでない場合は必要な箇所を自分用に書き換えてください。
また、上記以外にもDescription、Author、Versionなどの項目もありますが必要に応じて書き加えてください。

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

このコードを追加することで親テーマのスタイルが子テーマのスタイルに引き継がれるようになります。特に中身を理解する必要はないのでコピペでOKです。

子テーマの有効化

最後にWordpress管理画面左サイドバーの「外観」→「テーマ」をクリックし、上記のような画面になりますので作成した子テーマを有効化したら今日から晴れて子テーマデビューです。

今はstyle.cssとfunctions.phpしかフォルダに入れていませんがheader.phpなど他にカスタマイズしたいものがある場合は、親テーマと同じ名前でファイルを作成しカスタマイズしていってください。

まとめ

ちょっとWordpressを始めたばかりではとっつきにくかった子テーマですが、フォルダ1つ、ファイル2つで作れてしまうのでこれから何か新しいサイトをWordpressで作成する際はぜひ子テーマの使用をおすすめします。