WordPress初心者は必ず覚えておきたい【子テーマの作り方】

「テーマを適用させたけどどうやって編集すればいいんだろう」「子テーマが必要？なにそれ」こんな疑問に答えるべく、本記事では子テーマの必要性と作成方法を初心者向けに解説しています。

wordpressを勉強中の方やこれから使ってみようと考えている方は参考にしてください。

子テーマとは？

まず最初に子テーマとは、別のテーマを親として機能を継承したテーマのことであって、「子テーマ」という名前のテーマではありません。

子テーマにテンプレートファイルが一つもなかったとしても、親を参照するので問題ありません。

子テーマを使うメリット

基本的にはこの2つ

• 必要な機能だけ追加・調整できる
• 親テーマ更新の影響を受けない

それぞれ簡単に解説します。

必要な機能だけ追加・調整できる

子テーマにテンプレートファイルを追加すればそれを優先的に参照してくれます、header.phpを調整したい場合は子テーマにheader.phpをコピペで追加しそれを編集すればいいんです。

それで万が一バグが起きたとしても、サイトが動かなくなったとしてもそのファイルを消すなどで簡単に解消できます、親を触るリスクを子テーマでカバーできます。便利ですね！

新しい機能を追加する場合も子テーマに追加して行う事で同様にリスクを回避できます。

つまり、子テーマはバックアップとしての役割も持てるということですね。

親テーマ更新の影響を受けない

親テーマを触るリスクは前述したもの以外にもう一つあります、それは「テーマの更新」です。

子テーマを作らず親テーマを直接カスタマイズしていると、テーマの更新を行った際に全て消えてしまう可能性があります。

今までの苦労が・・・なんてことにならない為にも子テーマは作るべきなんです。

これで子テーマのメリット・必要性は十分にお分かりいただけたかと思います、次は子テーマの作り方を見ていきましょう。

子テーマの作り方【コピペOK】

子テーマ作成する上で必要なものは4つあります。

• 親となるテーマ
• 子テーマとなるディレクトリ
• 子テーマ/functions.php
• 子テーマ/style.css

それぞれ簡単に解説します。

親となるテーマ

これはそのままの意味ですです、親なくして子はありません、使いたいテーマ（親にしたいテーマ）を決めておいてください。

今回はmaxx_tcd043というテーマを親として子テーマを作りたいと思います。

子テーマとなるディレクトリ

子テーマとなるディレクトリを以下の場所に作ります。

wp-content/themes

ディレクトリ名は任意で決まりはありませんが、子テーマという事がわかりやすいようにするのが普通です、以下例。

親テーマが「maxx_tcd043」なので

wp-content/themes/maxx_tcd043_child

親テーマ名の後ろに「_child」「-child」と付けるのが一般的です。

子テーマにfunctions.phpを作る

先ほど作った子テーマ(maxx_tcd043_child)の中に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',
    array('parent-style')
  );
}
?>

これでOKです。

子テーマにstyle.cssを作る

先ほど作成したfunctions.phpと同じ階層にstyle.cssを作ります。

そして、style.cssに下記をコピペしてぞれぞれ編集し保存してください。

/*
Theme Name:   ここに子テーマ名
Template:     ここに親テーマ名
*/

1行目と4行目のコメントアウトはそのままでお願いします。

2行目に子テーマ名を入力してください。

3行目に親テーマ名を入力してください。

今回は子テーマが「maxx_tcd043_child」、親テーマが「maxx_tcd043」なので以下のようになります。

/*
Theme Name:   maxx_tcd043_child
Template:     maxx_tcd043
*/

ちなみにこれは省略版で、本来は子テーマ名と親テーマ名以外にも入力項目はあります、これでも問題ありませんので慣れない間はこれでいきましょう。

これで全ての準備は整いました。

子テーマを適用させてみましょう。

子テーマを適用させる

WordPress管理画面に行き外観>テーマを確認してみましょう。

作成した子テーマが反映されていることがわかります、あとは有効化すれば子テーマの適用は完了です。

調整したいファイルがあれば子テーマに追加してそれを編集すればOKです、スタイルをカスタマイズしたい場合は作成したstyle.cssに追加していきましょう！

子テーマの作り方は以上になります、簡単でしたね！！

まとめ

子テーマ作成における流れをおさらいしてみましょう。

1. 親テーマを決める
2. 子テーマディレクトリを作成する
3. 子テーマ内にfunctions.phpを作成する
4. 子テーマ内にstyle.cssを作成する
5. 外観>テーマから子テーマを有効化し適用する

慣れないうちはややこしく感じるかもしれませんが、WordPressを使う上で必ず覚えておきたい事の一つなので、パターンとして頭に入れておきましょう。

以上になります。

おまけ：テーマ画像を設定する方法

先ほど解説した通りに子テーマを作成すると、テーマを選択する際に画像が表示されません（上）、これじゃちょっと寂しいのでテーマ画像を設定する方法について紹介しておきます。

functions.phpやstyle.cssを設置した場所、つまりテーマディレクトリに画像を用意しておくだけで設定できます。

ただ、一つ注意点が。

それは、「screenshot.png」というファイルであることです。

親テーマにscreenshot.pngがあれば、子テーマを作成時に追加しておけば親テーマと同じ表示になります、

親テーマない場合、別の画像を使いたい場合は、screenshotというファイル名で画像を用意すればOKです。

必ずファイル形式は「png」でお願いします。

ちなみに推奨サイズは「880×660」です。

テーマ画像についてまとめ

• ファイル名は「screenshot」
• ファイル形式は「png」
• 推奨サイズは「880×660」
• 設置場所は子テーマ内(wp-content/themes/子テーマ)

テーマ画像はあってもなくても問題ありません、あくまで見栄えの問題になりますので興味がある方は挑戦してみてください。

以上になります。