【ワードプレス】子テーマの作り方【初心者向け】

ワードプレスを勉強していると必ず目にする「子テーマ」。
自作テーマなら問題ありませんが、配布されているテーマを直接編集していると、配布元がテーマの更新をした際に、編集したものが全部上書きされてしまいます。
それを防ぐために元テーマが更新されても影響のない子テーマというものを作ってそれを編集します。

そして、その子テーマの作り方ですが、実はめちゃめちゃ簡単です！
それでは作り方を見ていきましょう。

この記事の目次

  1. 子テーマの作り方1：子テーマ用ディクレクトリを作る
  2. 子テーマの作り方2：子テーマ用style.cssを作る
  3. 子テーマの作り方3：子テーマ用functions.phpを作る
  4. 子テーマの作り方4：子テーマを有効化する

子テーマの作り方1：子テーマ用ディクレクトリを作る

まず子テーマを作るにあたって、子テーマのファイルを格納するディレクトリを作ります。
ディレクトリ名は分かりやすく【親テーマのディレクトリ名_child】等が良いと思います。

例：親テーマのディレクトリがparentの場合
parent_child

子テーマ用ディレクトリは親テーマと同じく/wp-content/themes/内に作ります。
下図のように、子テーマディレクトリにstyle.cssとfunctions.phpの2つのファイルがあれば子テーマは成立します。

子テーマの作り方2：子テーマ用style.cssを作る

次に今作ったディレクトリ内にstyle.cssを作ります。
style.cssの内容は以下のコードをコピペし、子テーマ名と親テーマのディレクトリ名を記述します。

style.css

/*
Theme Name:子テーマ名
Template:親テーマ名のディレクトリ名
*/
子テーマが適用されない？
Templateには親テーマ名ではなく、親テーマのディレクトリ名を入れます。
子テーマが適用されない場合はここを確認してみましょう。

子テーマの作り方3：子テーマ用functions.phpを作る

更に子テーマディレクトリ内にfunctions.phpを作ります。
functionではなく、functionsです。sが入ります。

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', array('parent-style')
);
}
?>

ここで注目してほしいのが最後の行です。

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));

これは子テーマのスタイルシートを親テーマのスタイルシートの後に読み込ませるものです。
完全にサイトの構造を理解してスタイル名の被り等も無いという場合は大丈夫ですが、この一文を入れておくだけで子テーマのスタイルが適用されるので入れておいて損はありません。
もちろん無くても大丈夫ですし、ほとんどのサイトがこの事までは紹介していません。
詳しくは日本語版のワードプレスcodexに載っています。

参考：子テーマ – WordPress Codex 日本語版

子テーマの作り方4：子テーマを有効化する

子テーマのディレクトリ内にstyle.cssとfunctions.phpが作れたら、テーマを有効化します。
ダッシュボードから外観 ＞ テーマと進み、子テーマを有効化して完了です。
子テーマのディレクトリにscreenshot.pngを入れれば、テーマ一覧のサムネイルも変更できます。
親テーマのscreenshot.pngをコピーし「CHILD」等の文言を入れると良いでしょう。

© GOKAN DESIGN STUDIO