WordPressで子テーマの作り方

2018年8月11日

どうもタカフです。

新しくブログを始めるにあたってSANGOを購入して初期構築は完了したのですが、既存テーマでは物足りない部分は何かとカスタマイズしたくなるんですよね。

でも、WordPressのテーマってアップデートすることがあり、その方法って適用テーマのディレクトリをそのまま上書きする方法なんですよね。

だから適用テーマ内でファイルの編集をしてカスタマイズしても、このテーマアップデートで無慈悲にもカスタマイズ内容が消えてしまうわけなのです。

そこでその問題を解決する方法が適用テーマの小テーマを作る方法なわけです。

適用テーマを親テーマとする子テーマを作成して小テーマをカスタマイズしていけば、親テーマのアップデートの恩恵も授かりつつ、カスタマイズ内容も消えないものとなります。
（小テーマを作ったら適用テーマとするのは小テーマの方です。）

それでは小テーマの作り方です。

小テーマディレクトリの作成

themesディレクトリに小テーマディレクトリを作っていくのですが、WordPressの小テーマの慣習に従うと、[親テーマ名]-childがいいたみいです。
僕は sango-theme を使っているので sango-theme-child としました。

style.cssの作成

次に小テーマディレクトリの直下にstyle.cssを作成し以下のような内容で記述します。

style.css

/*
 Theme Name:   SANGO Child
 Theme URI:    https://kahoo-blog
 Description:  SANGOの小テーマです。
 Author:       Takafu
 Author URI:   https://kahoo-blog
 Template:     sango-theme
 Version:      1.5
 Text Domain:  sango-theme-child
*/

一番重要なのは Template: sango-theme です。これで親テーマの指定となります。それ以外はWordPressのいつものstyle.css作成に準じています。

functions.phpへの記述

style.cssを作ったらそれを、親テーマのstyle.cssを読み込み後に小テーマのstyle.cssを読み込む設定をfunctions.phpに記述していきましょう。
先程と同様に、小テーマディレクトリに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' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', ['parent-style'] );
    
    // 追加でjsもカスタマイズしたいなら以下のようにscript.jsファイルを作って読み込む
    wp_enqueue_script( "script.js", get_stylesheet_directory_uri() . '/script.js', '', [], '1.0', true );
}

functions.phpでは wp_enqueue_scripts にフックする関数を用意して、その中でまず親テーマstyle.cssを読みんだ後に小テーマのstyle.cssを読み込みます。

これにより親テーマのcssを適用しつつ、小テーマのstyle.cssにてcssをカスタマイズしていけばよいわけです。