【WordPressテーマカスタマイズ】初心者でも分かる！子テーマの作り方徹底解説
この記事で解決できる問題点・疑問点
  • WordPressテーマのスタイルシート（css）を直接編集してカスタマイズいるけど、使用しているテーマがアップデートされたり、別のテーマに変更したい時、せっかくカスタマイズした内容がリセットされてしまうのではないか？

WordPressでテーマのカスタマイズをする際、このような問題に直面したことがある方は多いのではないでしょうか？

実はその通りで、使用しているテーマのcssファイルやphpファイルを直接編集している場合は、テーマ自体を変更した場合、せっかく頑張って行ったカスタマイズがリセットされてしまいます。

では、テーマを変更してもカスタマイズを引き継ぎたい場合はどうすればよいのでしょうか？

この記事では、上記のような疑問に応える形で、テーマを変更してもカスタマイズの内容を引き継げる、子テーマを利用したテーマカスタマイズの方法について紹介します。

子テーマとは？｜なぜ子テーマを使うとテーマの変更の影響を受けずにカスタマイズを引き継ぐことができるのか？

子テーマとは、親テーマの機能やデザインを継承したうえで、様々なカスタマイズをするためのテーマのことで、基本的に親テーマと子テーマがセットとなってひとつのWordpressサイトが出来上がります。ここでいう親テーマとは、カスタマイズの元となるテーマのことです。当サイトだと、「賢威」というテーマを利用しているので、この「賢威」というWordpressテーマが親テーマだということになります。

では、なぜ直接親テーマを編集するのではなくわざわざ子テーマを利用してテーマのカスタマイズを行う必要があるのでしょうか？

その答えは、苦労してカスタイマイズをした機能やスタイルを、親テーマのアップデート時や別のテーマへの変更時に失われないようにするためです。

基本的に、Wordpressのテーマというのは、インターネット環境の変化に合わせてより良い方向に改善されていくためアップデートが繰り返し行われます。そのアップデートの際、テーマを構成するCSSやPHPといったファイルは上書きされてしまいます。つまり、直接親テーマを編集してカスタイマイズを行っていた場合、アップデートによるファイルの上書きにより編集していた内容が失われてしまいます。子テーマを利用して親テーマとは別にカスタマイズした内容を独立させて管理することで、アップデートによるカスタマイズ内容の紛失を防ぐことができます。これがカスタマイズに子テーマを利用する最も大きな理由です。

◆子テーマを使うことのメリット
  • 親テーマがアップデートされてもカスタマイズ内容を引き継ぐことができる。
  • テーマのカスタマイズ内容が管理しやすくなる。

親テーマアップデート時の注意点

上記で子テーマを使うことによって親テーマがアップデートされてもカスタマイズした内容を引き継ぐことができるという話をしてきましたがひとつだけ注意が必要です。それは、親テーマがアップデートされた際、クラス名が変更されてないということが前提にあるということです。子テーマを利用してカスタマイズを行う際、cssにしろphpにしろクラス名を使ってカスタマイズするケースがほとんどです。つまり、親テーマのクラス名が変わった場合は、カスタマイズを引き継ぐことができません。

このような場合は、子テーマで使用しているクラス名を変更することでカスタマイズを引き継ぐことができるようになります。といっても１からカスタイマイズすることと比べたら圧倒的に楽な作業ですので、親テーマに何かしらの変更があった場合はこの部分だけでも確認するようにしましょう。

次からは具体的に子テーマを利用したカスタマイズの方法を見ていきます。

子テーマを構成するファイル

子テーマを構成するファイルは非常にシンプルで、基本的には「style.css」と「functions.php」の２つのファイルだけあれば成立します。

子テーマ構成ファイル

ちなみに、「style.css」、「functions.php」とは、以下のような役割を持つファイルです。

style.cssの役割

テーマのデザインを定義する役割を持つファイル

functions.phpの役割

WordPressに機能を追加する役割をもつファイル

「style.css」と「functions.php」以外のファイルについては、例えば、「header.php」や「index.php」などのファイルがありますが、このようなファイルについては必要に応じて追加すれば大丈夫ですし、親テーマのファイルをコピペするだけなので非常に簡単です。

では、「style.css」と「functions.php」にどのようなソースコードを記述していけばいいのでしょうか？

具体的に見ていきましょう。

子テーマの記述方法

style.cssの記述方法

style.cssには以下のような内容を記述していきます。

/*
Theme Name: ○○の子テーマ （子テーマの名前を記述）
Description: （子テーマの説明を記述）
Version: 0.0.0（親テーマのversionを記述）
Template: 親テーマ名（親テーマの具体的なファイル名を記述）
*/

以上でstyle.cssの記述は完了です。

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')
);
}
?>

以上でfunctions.phpの記述は完了です。

コードの内容を説明すると、

  • 2行目のadd_actionは、WordPressに機能を追加する関数で、ここでは子テーマのCSSとJavascriptを読み込んでいます。
  • 4行目のwp_enqueue_styleは、親テーマのCSSを読み込んでいます。
  • 5行目のwp_enqueue_styleは、子テーマのCSSを読み込んでいます。

このように、親テーマのCSSを読み込んでから（4行目）、子テーマのCSSを読み込むように（5行目）することで、子テーマでカスタマイズした内容を上書きできるようになります。

以上で、子テーマを構成する2つのファイルができました。

あとは、この2つのファイルを子テーマフォルダに入れてWordpressにアップロードすれば親テーマを引き継いだ子テーマの完成です。

子テーマをWordpressテーマとして適用する方法

まず、作成した「style.css」と「functions.php」の2つのファイルを作成した子テーマフォルダの中に入れます。

子テーマ

続いて、子テーマをWordpressにアップロードできるようにするため、子テーマフォルダを圧縮します。

子テーマ圧縮

次に、Wordpressのテーマ管理画面から「新規追加」を選択します。

テーマを追加画面に遷移するので「テーマのアップロード」を選択します。

「ファイルを選択」から作成した子テーマの圧縮ファイルを選択しアップロードを行います。

最後に、テーマの有効化を行えば、子テーマの適用は完了です

まとめ

この記事では、子テーマとは何かの説明から始まり、子テーマの記述方法、子テーマの適用方法まで紹介してきましたがいかがだったでしょうか？

この記事で、説明した方法で子テーマを適用したらあとは実際にカスタマイズを進めていくだけです。当サイトでは、Wordpressのカスタマイズ方法についても紹介しているので、困ったことがあればぜひ参考にしてください。

WordPressのテーマ編集をDREAMWEAVER CCで行うための全設定手順
WordPressのテーマ編集をDREAMWEAVER CCで行うための全設定手順
この記事で解決できる問題点・疑問点 この記事では、このような疑問に答える形で、Word Press(ワードプレス)とADOBE製のテキストエディタであるDREAMWEAVER CC（ドリームウィーバー）を連動する方法を初 […]

 

無料体験

techacademyWordPressコース

Wordpressをしっかり学びたいなら・・・

TechAcademy　WordPressプログラミングコース

  • パーソナルメンターによる学習サポート
  • HTML/CSS/PHPが身につくカリキュラム
  • Wordpressテーマの作成スキルが身につく

TechAcademy公式サイト TechAcademy公式サイト

 

この記事の執筆者

きつね
きつね