WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など

WordPress既存テーマをカスタマイズするなら子テーマを使うべきと思います。

これは、Wordpress codexにある子テーマの項目でも推奨されています。

ただ、Wordpressを使い始めたばかりの時に「子テーマ」「親テーマ」と言われても、「何だそれ?」とか、「そもそもテーマ自体にカスタマイズしたらなんでだめなの?」とも思うかもしれません。

僕も、テーマ配布サイトでカスタマイズ用に子テーマを配布してはいるものの、そういったことについては詳しく説明していませんでした。

なので、一度それについて書いておこうと、今回はWordpressの子テーマについて書きたいと思います。

photo by Alexander Gounder

スポンサーリンク
レクタングル(大)広告

子テーマとは

そもそも子テーマとは、既存のWordpressテーマのカスタマイズ専用のテーマです。

既存のWordpressテーマは、「親テーマ」とも呼ばれ、テーマの機能とスタイルを継承したものが「子テーマ」です。

  • 親テーマ:既存のWordpressテーマ
  • 子テーマ:親テーマに属し、機能とスタイルを引き継いだ上で編集するためのテーマ

図にするとこんな感じです。

子テーマの仕組みを図解

「親テーマ(既存のテーマ)」の機能とスタイルを「子テーマ」が引き継いだところに、スタイルなどの変更(カスタマイズ)を加え、ブラウザに表示させます。

このように、書いてもまだちょっとややこしいとは思います。

そもそも「なぜ、こんなややこしいことをして子テーマを使うのか?」と思われるかもしれません。

それについては、以下で説明していきます。

なぜ子テーマでカスタマイズする必要があるのか

子テーマは、Wordpressを始めたばかりの方にとって、ややこしい概念だと思います。

実際に、僕も最初は、よくわかりませんでした。

そんな、ややこしい、よくわからないことをするのは面倒なので「親テーマを直接カスタマイズすればいいのでは?」とも思われるかもしれません。

もちろん、親テーマを直接カスタマイズして使用するのも、その人の自由です。ただ、親テーマを直接カスタマイズすると以下のような難点があります。

親テーマを直接カスタマイズした場合

WordPressの「親テーマ(既存のテーマ)」は、機能などが追加されたりするとアップデートを行います。公式テーマなどは、自動でアップデートが行われます。

親テーマは、アップデートが行われると、親テーマに施されたカスタマイズはお構いなしに、すべてのファイルが上書きされ、カスタマイズはなかったことになってしまいます。

親テーマをカスタマイズした場合

これまで「カスタマイズしたけど、テーマはアップデートしたら元に戻ってしまったことがある」という方も結構おられるのではないでしょうか。僕もあります。

それまで、テーマのカスタマイズに何時間かけようと、ポチッと「テーマの更新」ボタンを押してしまえば、全ての苦労が無に期してしまいます。同様のカスタマイズをしようと思ったら、また1から編集するしかありません。

なので、親テーマをカスタマイズすることは基本的に「次のアップデートまでしか効果のない掛け捨ての手間」になってしまいます。

子テーマをカスタマイズした場合

では、子テーマにカスタマイズを施した場合は、どうなるかというと以下のようになります。

子テーマをカスタマイズした場合

子テーマにカスタマイズを施すことによって、子テーマ側で行われた変更(カスタマイズ)は、テーマがアップデートされた後も、確実に保持されます。

最初こそ、子テーマのセットアップという手間がかかりますが、子テーマに施されたカスタマイズは、何度、親テーマをアップデートしようと、変更した部分は必ず残るということが保証されています。

なので、子テーマをカスタマイズすることは、「貯蓄型」となります。子テーマを、さらにカスタマイズしようと思えば、子テーマ上にさらに編集を加えていくことで、どんどんカスタマイズが上積みされていきます。

ですので、Wordpress運営者にとっては、「子テーマ」はテーマをカスタマイズする上での「ちょっとした財産」と言っていいと思います。

子テーマの作り方

では、カスタマイズを保持するための「子テーマ」を作るにはどうしたらよいかを以下で説明したいともいます。

最近では、子テーマ自体を配布しているテーマも多いので、既に子テーマある場合は、そっちを利用した方が良いと思います。

もう子テーマがある場合は、次の項目まで飛ばしてください。

子テーマを作る主な手順

子テーマを作るには、以下のようなちょっとした手順が必要です。

  1. 子テーマのフォルダを作る
  2. 子テーマに必要なファイルを作る
  3. 親テーマを継承するためのコードを書く

やることといったらこの3つです。それぞれの手順もたいしたことをしないので、5分もあれば終わる作業です。

以下では、Wordpressデフォルトで付属している「Twenty Fifteen」の子テーマの作り方を例にして説明したいと思います。

子テーマのフォルダを作る

まずは、子テーマ用のフォルダを作ります。名前は何でも構いません。(半角英数字+α)

「Twenty Fifteen」の子テーマなので、「twentyfifteen-child」とでもしてフォルダを作成すればOKです。

twentyfifteen-childフォルダを作成

1つ目の手順はたったこれだけです。

子テーマに必要なファイルを作る

次に、作成したフォルダの中に以下の2つの空ファイルを作成します。

  • style.css
  • functions.php

子テーマに必要なファイルを作成

こちらも難なくできると思います。

親テーマを継承するためのコードを書く

最後に、子テーマ用のコードを記入します。

style.cssの編集

style.cssには、子テーマ情報を以下のように記入します。

他のテーマで利用するには、上記のコードを、コピーしてstyle.cssに貼り付けて必要な部分を編集すればOKです。

特に必要な記入項目は以下です。その他の項目は、必要なければ無理して書く必要はないと思います。

  • Theme Name:子テーマを識別するための名前を書く
  • Template:親テーマのフォルダ名を書く

簡易版は以下になります。

他のテーマで利用するには、名前を変更し、「twentyfifteen」部分を他のテーマの親テーマフォルダ名にします。

functions.phpの編集

functions.phpでは、親テーマのstyle.cssがちゃんと、子テーマを適用した際にも呼び出されるようにするコードを記入します。

functions.phpを開いて以下のコードをコピペします。

これを書くことにより、親テーマのスタイルが子テーマに引き継がれます。

以前は、子テーマ側のstyle.cssで@importを利用して呼び出す方法が主流でしたが、「@importを利用すると呼び出しが遅くなる」などの弊害があるので、functions.php側で呼び出す方法が現在推奨されています。

子テーマの有効化

最後にWordpress管理画面から「外観→テーマ」を選択して、作成した子テーマを有効化します。

子テーマの有効化

これで、子テーマの設定は完了です。

この子テーマを適用した状態は、親テーマをそのまま表示した状態と変わりがありません。

しかし、子テーマのstyle.cssにスタイルを書き足していったり、テンプレートを追加してカスタマイズしていくことによって、デザインなどを自由に変更することができるようになります。

子テーマを呼び出す仕組み

ここで、子テーマがどのように呼び出されるかの仕組みも簡単に説明しておきたいと思います。(※詳しく書くと長くなりすぎるので)

カスタマイズをする上で、この仕組みを少し知っておくだけで、やりたいことができるようになります。

まず、全体のデザインの土台となる「親テーマ」があり、カスタマイズ用ファイルのみがある「子テーマ」を通して呼び出され、ブラウザで表示されます。

子テーマの呼び出しの仕組み

薄いピンク色のファイルが呼び出されるファイルを表しています。

「style.css(スタイルファイル)」と「functions.php(関数ファイル)」の2つのファイルは「親テーマ」「子テーマ」双方のファイルがどちらも呼び出されます。

反面、テンプレートファイルは子テーマにあるものが優先して読み込まれ表示されます。(親テーマのものは呼び出されない)

なので、例えば投稿ページ部分を編集したければ、親テーマの「single.php」を子テーマディレクトリ直下(style.cssがある場所と同じ階層)にコピーして、そのテンプレートファイルをカスタマイズすれば、「カスタマイズした子テーマ内のsingle.php」が優先して呼び出されます。

その他のテンプレートファイルも、もちろん同名のテンプレートファイルを子テーマ内に置くと、そのファイルが優先して呼び出されます。

その後、親テーマにアップデートがあった場合でも、子テーマのテンプレートファイルが呼び出されるので、カスタマイズした部分は保持されます。

カスタマイズしたテンプレートに親テーマ側で新機能が追加されたときは、その恩恵が受けられないという難点はあります。

まとめ

以上、簡単ではありますが子テーマの概要についてまとめてみました。

以前、配布しているWordpressテーマに自動アップデート機能を付けたところ、「余計な機能をつけたせいでカスタマイズが全部消えてしまったじゃないか」と言われたことがあるので、1度子テーマの必要性について書いておこうと思いました。

子テーマを利用すると、親テーマのアップデートの恩恵を受けながら、カスタマイズにかけた手間を蓄積しておくことができます。

ですので、「親テーマをカスタマイズしていたら更新で消えてしまった」なんて方や、「親テーマをカスタマイズしているのでアップデートはしていない」なんて方がおられましたら、最初にかける手間以上の恩恵があるので、初期投資と思って利用してみることをおすすめします。

『WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など』へのコメント

  1. 名前:名無しさん 投稿日:2015/05/21(木) 16:41:41 ID:f3b5d76ef

    小テーマは有効にしておく必要がありますか?

  2. わいひら 名前:わいひら 投稿日:2015/05/21(木) 17:34:15 ID:5aa68f779

    施したカスタマイズを適用するなら、有効にする必要があります。

  3. 名前:がちょぴん 投稿日:2015/05/21(木) 19:23:36 ID:ca962ca7a

    お久しぶりです。

    子テーマのメリットを若干把握していながらも、
    親テーマのみでカスタマイズ等行っていました。

    今回この記事を拝見してお聞きしたい事があります。

    <?php //子テーマで利用する関数を書く

    このようにコメントアウトされているという事は、
    CSS以外に例えば人気記事を表示させるコードを記述しても大丈夫という事でしょうか?
    親テーマに元々functions.phpがあるので子テーマはCSSファイルだけだと思ってました。
    子テーマにもfunctions.phpを入れたら二重に反映されるのかなと思っていました。
    (また、functions.phpのコードが子テーマに反映される?と思ってました。)

  4. わいひら 名前:わいひら 投稿日:2015/05/21(木) 19:39:54 ID:5aa68f779

    お久しぶりです!
    そのコメントアウトは、ただ、子テーマfunctions.phpのの役割を書いただけです。
    機能に影響するような意味はないので、消してしまっても問題ありません。

    人気記事を表示させるようなコードを書いても大丈夫です。
    子テーマにfunctions.phpファイルを作成すると以下の順番で、関数が読み込まれます。

    子テーマのfunctions.phpの関数

    親テーマのfunctions.phpの関数

    CSSファイル以外にも、子テーマ側にテンプレートファイルを作成して、テーマの一部分だけをカスタマイズするということもできます。

  5. 名前:がちょぴん 投稿日:2015/05/21(木) 19:51:30 ID:ca962ca7a

    なるほどです!

    CODEX確認する前にコメントしてしまいました…
    (子テーマのfunctions.phpは、親テーマの機能を上書きしない事確認できました)

    P.S また、フォーラムでお手伝いできると思います~。

  6. わいひら 名前:わいひら 投稿日:2015/05/21(木) 22:51:23 ID:5aa68f779

    おお、そうですか。またよろしくお願いします!

  7. 名前:がちょぴん 投稿日:2015/05/24(日) 11:35:19 ID:87ad822d7

    どうしても不安の為、確認としてもう1点ご質問あります。

    反面、テンプレートファイルは子テーマにあるものが優先して読み込まれ表示されます。(親テーマのものは呼び出されない)

    例えば親テーマのfunctions.phpに、人気記事のタグを入れました。
    親テーマのfunctions.phpにある人気記事のタグを子テーマのfunctions.phpに入れました。
    両テーマのfunctions.phpに同じタグを入れても子テーマが優先されるので悪影響及ぼす事はないという事ですよね?

  8. わいひら 名前:わいひら 投稿日:2015/05/24(日) 12:52:49 ID:11f2389a4

    人気記事のタグ

    functions.phpは、基本的にPHPコードを入力するところです。
    タグというのは、人気記事を表示するコードということでよろしいでしょうか?
    コードということなら、本文中にもあるように、functions.php内のコードはどちらも呼び出されます。

    「style.css(スタイルファイル)」と「functions.php(関数ファイル)」の2つのファイルは「親テーマ」「子テーマ」双方のファイルがどちらも呼び出されます。

    ※4に書いたのはただ、子テーマが先に呼び出されるというだけで、親テーマも呼び出されます。
    なので、同名の関数とかがあるとエラーが出ます。

  9. 名前:がちょぴん 投稿日:2015/05/24(日) 20:04:40 ID:87ad822d7

    タグというのは、人気記事を表示するコードということでよろしいでしょうか?
    コードということなら、本文中にもあるように、functions.php内のコードはどちらも呼び出されます。

    なるほどです。
    人気記事を表示するコードでよろしいです。

    なので、同名の関数とかがあるとエラーが出ます。

    やっと全部ちゃんと把握できました。
    親テーマアップデート時にカスタマイズしていたタグが削除されるので、
    あくまで削除されたら困るタグ(カスタマイズ等)を子テーマのファイルに入力するという事なんですね。

  10. わいひら 名前:わいひら 投稿日:2015/05/24(日) 20:40:50 ID:11f2389a4

    そうです。
    親テーマにはない追加したい関数(コード)だけ書き込んで利用します。

  11. 名前:kisuke 投稿日:2015/06/16(火) 12:38:50 ID:9bad67037

    wordpress初心者です。
    こちらの記事はとても参考になっていつも読ませていただいております。

    親テーマのスタイルを子テーマに引き継ぐコードをfunctions.phpに記入し、完全レスポンシブ対応した場合、スマホでのレイアウトがはみ出して崩れるたり、ハンバーガーボタンが表示されないのですが、
    対処法があれば教えていただけますでしょうか?

    以下、記入したコードです。

  12. 名前:kisuke 投稿日:2015/06/16(火) 12:41:40 ID:9bad67037

    //ここまで

  13. わいひら 名前:わいひら 投稿日:2015/06/16(火) 14:12:03 ID:25e907f3d

    kisukeさん

    コードが表示されていません。
    ただ、コードはもしかしたら、サーバーかWordpressにより危険と判断され除外されたのかもしれません。
    あと、使用しているテーマは何でしょうか?
    もし、Simplicityの場合は、Simplicityサポートフォーラムに書き込んでください。
    ただ、サポート対象外のものにもあるように、カスタマイズにより起こった不具合は、原因が特定しづらいので、わからないこともあると思います。

  14. 名前:kisuke 投稿日:2015/06/16(火) 16:49:12 ID:9bad67037

    わいひらさん

    お忙しいところありがとうございます。

    使用しているテーマはSimplicityですので、Simplicityサポートフォーラムに書き込ませていただきます。

  15. 名前:名無しさん 投稿日:2015/06/29(月) 20:28:49 ID:090474413

    無駄な情報が多すぎて意味が分からん

  16. わいひら 名前:わいひら 投稿日:2015/06/29(月) 20:34:38 ID:35c19588b

    初めて利用する人にもなるべくわかりやすいようにと詳しく書いたつもりでしたが、後学のためにどの辺が無駄だったかお聞かせいただけますでしょうか。
    改善すべきところは、改善したく思います。

  17. 名前:tanotano 投稿日:2015/08/19(水) 12:52:04 ID:d06725c7f

    こんにちは。
    WPでWPとテーマの更新があり、うっかり押してしまったらダッシュボードにもサイトにも
    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘preview_theme’ not found or invalid function name in /home/users/0/私のアカウント/web/私のサイト/wp-includes/plugin.php on line 503
    との英文が表示され、サイドバーが表示されないなどの不具合が発生しました。
    現在はPCからは投稿記事を書こうとしてもテーマのカスタマイズをしようとしても、なにをしようとしてもエラーメッセージ?が英文で表示されるだけで何もできない状態です。
    当方WP始めてからまだ2ヶ月程度の初心者です。
    一応、子テーマは作ってたのですが…。
    この状態から回避して正常に戻す方法がわからないのですが、どうすればいいのかご指示頂けませんでしょうか?

  18. わいひら 名前:わいひら 投稿日:2015/08/19(水) 16:56:23 ID:d358b77f0

    現在使用されているテーマがわからないので、詳しいことは何とも言えませんが、今使用しているテーマをもう一度ダウンロードして、ファイルを解凍してフォルダごと、FTPでアップロードしてみてください。
    それでも、うまくいかない場合は、古いバージョンのテーマをダウンロードしてアップロードしてみてください。

  19. 名前:muu 投稿日:2015/10/18(日) 20:51:31 ID:70f675ea9

    Warning: reset() expects parameter 1 to be array, boolean given in /home/xxxxx/www/wp-content/themes/xeory_extension/lib/functions/head.php on line 140
    上記のエラーがヘッダー部分にでます。
    ・・経緯
    ①wpに子テーマを入れてカスタマイズ
    ②welcartというecカートプラグインをインストール
    ③カートのプラグインの商品登録をして表示をプレビューしたら新規の商品ページにのみ謎のエラーが表示されている。
    ④welcartにも小テーマを入れる必要があるのでしょうか?
    ご教授よろしくお願いいたします。

  20. わいひら 名前:わいひら 投稿日:2015/10/19(月) 12:47:21 ID:5cf30cf42

    エラーメッセージに書いてあるように、xeory_extensionテーマ内のhead.php 内で使われているreset()という関数の引数が正しく設定されていないのではないかと思います。
    エラーに関する詳しい解説は以下を参照してください。
    (PHP) expects parameter 1 to be array, null given..(3323)|teratail

    僕も、コード自体を見ているわけではないので、詳しいことはわからないのですが、子テーマが原因によるものではないような気がします。
    とりあえず、「親テーマのみにした場合同様のエラーが出るか?」や、「インストールしているプラグインを一つ一つ停止していきエラーは出るか?」などを確認すると原因を特定する上で良いかもしれません。

  21. 名前:みか 投稿日:2016/02/26(金) 01:07:21 ID:173abdf39

    始めたばかりの初心者です。
    わかりやすい説明ありがとうございます。質問なのですが、子テーマ有効後にカスタマイズする方法なのですが、ワードプレスのカスタマイザ機能は使ってはいけないのでしょうか?それとも子CSSファイルを直接編集するしかないのでしょうか?

  22. わいひら 名前:わいひら 投稿日:2016/02/27(土) 12:29:10 ID:b49faa0e1

    ワードプレスのカスタマイザ機能は使ってはいけないのでしょうか?

    そんなことはないと思います。大抵のテーマの場合は、テーマカスタマイザーの機能と、CSSのカスタマイズを併用して利用します。

    それとも子CSSファイルを直接編集するしかないのでしょうか?

    一般的なテーマの場合は、CSSでスタイルを編集するにはstyle.cssを直接編集するしかないかもしれません。

  23. 名前:ペコ 投稿日:2016/05/03(火) 08:50:22 ID:16280c897

    お世話になっております。

    ワードプレスをバージョンアップしたらカスタマイズのページ(項目リスト)が無くなってしまいました(>_<)

    また元に戻すことはできますか?
    今のところサイト自体に変化はないようですが…

    お返事お待ちしていますm(__)m

  24. わいひら 名前:わいひら 投稿日:2016/05/03(火) 12:31:47 ID:fb8539195

    テーマカスタマイザーが表示されないということですか?
    また、使用しているテーマはなんですか?