【上級者向け】子テーマのつくり方

子テーマとは

あなたが Snow Monkey のデザインやレイアウトを変更したいと思ったとき、CSS の追加だけですむのであればカスタマイザーの「追加CSS機能」を使うことで簡単に CSS を追加することができます。

https://snow-monkey.2inc.org/2017/10/06/customize-css/

しかし、HTML 自体をカスタマイズしたかったり、PHP のコードを追加してテーマの挙動をカスタマイズしたい場合は子テーマをつくる必要があります。Snow Monkey を親テーマとして子テーマを用意すれば、子テーマから Snow Monkey のテンプレートを上書きしたり追加したりすることでカスタマイズを行うことができます。子テーマに Snow Monkey と同名のテンプレートがある場合はそれが使用され、無い場合は 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 を追加しています。

子テーマの雛形を公開してくださっている方がいらっしゃいますので、ぜひ参考に見てみてください。オレインさんありがとうございます！

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() ]
	);
} );

CSS の読み込み（上級編）

Snow Monkey は CSS は SASS を、JS は ES6 JavaScript をコンパイルしてブラウザが読める CSS/JS を生成しています。子テーマで CSS や JS を追加する際、ブラウザに読み込ませるファイル自体を追加するのではなく、Snow Monkey のコンパイル前の SASS/JS を import してコンパイルし、単一の CSS/JS ファイルを生成する場合は下記のようにファイルの配置および記述を行うと簡単です（functions.php には特に読み込みに関する記述は必要ありません）。

/themes/
├ /snow-monkey/
└ /snow-monkey-child/
　　　　├ style.css
　　　　├ functions.php
　　　　├ /src
　　　　│　　├ /css/style.scss
　　　　│　　└ /js/app.js
　　　　└ /assets/
　　　　　　　　├ /css/style.min.css
　　　　　　　　└ /js/app.min.js

/src/css/style.scss

@import '../../../snow-monkey/src/css/style';

/src/js/app.js

import '../../../snow-monkey/src/js/app.js';

コンパイルについてはお好みのライブラリ・設定で行って頂くのが良いと思いますが、特にこだわりがないのであれば、Snow Monkey は gulp で諸々の処理を行っているので Snow Monkey の gulpfile.js ご参照いただくとやりやすいかもしれません。