wordpressに少し慣れてくると、カスタマイズしたくなりませんか？
ここの色を変えたいなぁ、こういう配置に変えたいなぁ…など。
テーマを直接カスタマイズすると、テーマのアップデートがかかったときに
せっかくカスタマイズした内容は消えてしまいます。
そんなときに、役立つのが「子テーマ」の存在です。
元のテーマを「親」として、テーマは引き継いで「子」テーマで
カスタマイズすることができます。
この場合、アップデートがあっても、
アップデートをされるのは「親」テーマなので、「子」テーマで
カスタマイズした内容は残ります。
せっかく時間かけてなおしたのに…！！
ということがなくなります。
もくじ
子テーマをつくるのに必要なファイル
子テーマをつくるには、親テーマのようなテーマのディレクトリと
style.css、そしてfunction.phpが必要になります。
- style.css
- function.php
今まではstyle.cssで@importして親テーマのcssを呼んでいましたが、
変わったようです。
現在は@importを使用して子テーマをつくることは
非推奨となっているみたい。知らなかった…！
そしてimportを使うより、速度も速くなるそうですよ。
子テーマのディレクトリをつくろう
まずは、子テーマのディレクトリをつくりましょう。
たとえば、「twentyfifteen」というテーマを使う場合、
子テーマは「twentyfifteen-child」というようにテーマ名の後ろに
-childを追加しましょう！
style.cssをつくろう
まずは最初に、テーマの詳細について
style.cssに記述しましょう。
/*
Theme Name: twentyfifteen-child //子テーマのディレクトリ名
Template: twentyfifteen //親テーマのディレクトリ名
*/
function.phpをつくろう
お次は、function.phpで親テーマのスタイルシートを
読み込むコードを記述します。
これはコピペでOKです！
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
ただ、うまくいかないこともあるようです。
残念ながら私は上記のコードではうまくいかなかったので、
下のコードのように明確に子テーマのスタイルシートを読み込む必要がありました。
これで私はうまくいきました！
こちらもコピペでOKです！
<?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')
);
}
これで子テーマが完成しました。
こちらのサイトを参考にさせていただきました！
スライドで分かりやすく説明してあります。