子テーマとは
あなたが Snow Monkey のデザインやレイアウトを変更したいと思ったとき、CSS の追加だけですむのであればカスタマイザーの「追加CSS機能」を使うことで簡単に CSS を追加することができます。
snow-monkey.2inc.orgしかし、HTML 自体をカスタマイズしたかったり、PHP のコードを追加してテーマの挙動をカスタマイズしたい場合は子テーマをつくる必要があります。
Snow Monkey を親テーマとして子テーマを用意すれば、子テーマから Snow Monkey のテンプレートを上書きしたり追加したりすることでカスタマイズを行うことができます。
子テーマに Snow Monkey と同名のテンプレートがある場合はそれが使用され、無い場合は Snow Monkey のテンプレートが使用されます。
詳しくは下記をご参照ください。
子テーマは親テーマのテンプレートを上書きするという超強力な機能です。これは便利である反面、古いテンプレートをコピーしたままになっていると親テーマをアップデートしても子テーマに新機能が反映されない、脆弱性が残ったままになる、デザインが崩れる、などの問題が起こる可能性があります。
CSS の調整で済むようなちょっとしたカスタマイズを行いたい場合は、子テーマではなく、追加 CSS 機能の利用をおすすめします。
Snow Monkey は子テーマを使わなくてもプラグイン領域から子テーマのように自由にカスタマイズをおこなうことが可能です。カスタマイズ用プラグインの雛形はマイアカウントページからダウンロードできます。詳しくはこちら。
子テーマのつくり方（非推奨）
子テーマ用のディレクトリの作成
まず、子テーマ用のテーマディレクトリを作成します。ここでは snow-monkey-child という名前で作成することとして進めます。
/themes/ ├ /snow-monkey/ └ /snow-monkey-child/ ├ style.css └ functions.php
style.css の作成
作成した snow-monkey-child ディレクトリの直下に style.css を作成します。この style.css で親テーマを Snow Monkey にするという宣言を行います。また、CSS を追加することもできます。
/**
* Template: snow-monkey
* Theme Name: Snow Monkey Child
*/
body {
background-color: #ccc;
}
Template: snow-monkey が Snow Monkey を親として使用するという宣言、Theme Name: Snow Monkey child がこのテーマの名前は Snow Monkey Child です、という宣言になります。
その下に、例として背景を灰色にする CSS を追加しています。
子テーマの雛形を公開してくださっている方がいらっしゃいますので、ぜひ参考に見てみてください。オレインさんありがとうございます！
olein-design.comテンプレートの上書き
Snow Monkey のテンプレートと同じ階層で、子テーマにテンプレートを配置すると、Snow Monkey のテンプレートを上書きすることができます。つまり、Snow Monkey のテンプレートではなく、子テーマに配置したテンプレートが利用されるようになるということです。
このとき、Snow Monkey のテンプレートに記載されているバージョン番号をそのまま子テーマのテンプレートにも記述したままにしておくと、あとで Snow Monkey のテンプレートがアップデートしてバージョン番号が更新された場合に、「子テーマのテンプレートが古くなっている」旨の警告がでるようになります。古いテンプレートをそのまま使用しているとデザインが崩れたり脆弱性が残ったままになったりするため、バージョン番号は必ず記載しておくことを推奨します。
CSS の読み込み
子テーマの CSS を読み込ませるには、functions.php にコードの追加が必要です。ご使用の Snow Monkey のバージョンにより記述が異なりますのでご注意ください。
〜v0.6.1 の場合
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style(
get_stylesheet() . '-child',
get_stylesheet_uri(),
[ get_stylesheet() ]
);
} );
v0.6.2〜の場合
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style(
get_stylesheet(),
get_stylesheet_uri(),
[ get_template() ]
);
} );
