Wordpressで子テーマを作る際に知っておくべき仕組みと注意点

ホーム
ワードプレス
WordPressで子テーマを作る際に知っておくべき仕組みと注意点

ワードプレス

2017.04.10| Updated：2018.08.23

WordPressで子テーマを作る際に知っておくべき仕組みと注意点

知っとかないと、きっと困る。

WordPressでカスタマイズをするなら、「子テーマ」を作っておくと助かります。

テーマの更新通知がきてアップデートしたら・・カスタマイズが全部消えたっ！

サイト表示がボロボロ・・もももしや、重要な記述をうっかり消してしまったのか！？

ありがちな事件ですが、子テーマを作っておけば安心ですよね。アップデートしてもカスタマイズは消えません。何か不具合があったときにも元となる親テーマは無事なので対応しやすい。

下の記事では子テーマの「作り方」だけにフォーカスして紹介しました。
作るだけならたったの10分。

2016.10.13

「10分で終わらせてくるっ！」WordPress子テーマの作り方を2ステップで簡単解説！

とりあえず作りきる！知識は後半！記事ページをカスタマイズしたい。え？記事下にこんな「いいね！ボタン」も設置したいし。こんなオリジナルシェアボタンだって作りたい。せやでぇ？カスタイズしたいねんけど、直接テーマファイル触わるんコワ...

メリットが多くて導入もしやすい子テーマですが・・知っておくべきことがいくつかあります。例えば、実際にテーマのアップデート通知が来たらどうでしょう？

手探りのまま、安心してサクッとこなせますか？逆にサクッとテーマを”あやめて”しまいそうじゃないですか？サスペンスな夜を迎えそうでしょう？「結局、一方通行の愛だったんです」とか波打ち際の崖で淡々と語ってしまいそうでしょう？

・
・
・

失礼。取り乱しました。

ここでは【子テーマを導入していると、なぜカスタマイズが消えないのか？】という疑問を解決しながら、知っておくべき子テーマの仕組みや、導入後の注意点を紹介します。

子テーマの仕組み

「作り方」の記事で子テーマを作ったときに「functions.php」と「style.css」にコピーした記述。これらはあくまで、子テーマを認識させ、活用できるようにするための記述です。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:1.23
*/

そしてテーマ内のファイルは基本的に、「親テーマ→子テーマ」の順に読み込まれます。例えば、記事ページをカスタマイズするために子テーマに追加した「single.php」は、親テーマの「single.php」の後に読み込まれるということ。

上の図のようにデータは上書きされ、実際のサイトには、子テーマの「single.php」の内容が表示される、というわけです。だから子テーマ側のカスタマイズが反映されるんですね。

基本的にはどのテンプレートファイル（「●●.php」）も、子テーマ側の同名ファイルに上書きされてサイト表示されます。つまり「作り方」の記事と同じ手順で子テーマに入れておくだけで、どのファイルにも同じように”安心カスタマイズ”ができるようになる、ということです。

「functions.php」は例外。彼はテーマの神様のような存在。詳しくなるまでは「触らぬ神に祟りなし」の方向で。

「style.css」は”上書き”ではなく”追加”される

テンプレートファイル（「●●.php」）とは違い、「style.css」はちょっと特殊。同じように「親テーマ→子テーマ」の順に読み込まれますが、上書きされることはありません。

親テーマの「style.css」に、子テーマの「style.css」の内容を追加した形で出力されます。

思い出してみると・・そりゃそーですよね。子テーマを作り終わった時点では、「style.css」の中身はこれだけでした。

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:1.23
*/

この記述の後に追記したCSSは、親テーマがアップデートされても消えないので安心です。その他のテンプレートファイルと一緒。

追記例

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:1.23
*/

/***** フォント装飾 *****/
.dpblue {
	color: #0011aa
}
.dpred {
	color: #db0646
}

子テーマのCSSがうまく反映されない場合（プルダウン）

上記の記述で子テーマの認識はされるはずですが・・・

子テーマの「style.css」に追記したものがうまく反映されない！

という場合、下記を「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')
    );
}

この記述では、「親テーマの後に子テーマのスタイルシートをロードする」ことを、より明示的にしています。

なおTCDテーマであれば、テーマオプション内の「カスタムCSS」に追記してもOK。テーマをアップデートしてもそのまんま残ります。子テーマ同様の安心。優しさ。初心者への愛。