WordPress：@importを使わない子テーマの作り方（STINGER PLUS+）
2019/07/30
WordPressで子テーマの必要性
WordPressで何らかのカスタマイズを施したい場合、テーマそのものを編集すると、テーマがバージョンアップした際、折角カスタマイズした情報が失われてしまいます。またテーマを編集している段階でミスしますと、サイトが崩れたり開けなくなるかもしれません。
子テーマを作れば親テーマを変更することなくカスタマイズすることができます。親テーマは編集しませんから、バージョンアップしたとしてもカスタマイズした子テーマの内容は引き継ぐことができます。さらに親テーマにいつでも戻すことができると言うメリットもあります。親を編集してしまうとオリジナルは失われてしまいますので、万が一戻すときには一手間かけなければなりません。
@importを使わずに子テーマを作る方法
今使っているWordPressのテーマ、STINGER PLUS+を例に取りながら子テーマを作ってみます。少し前までは@importを使って親スタイルを呼び出していましたが、パフォーマンスが悪くなるため推奨されていません。本家STINGER PLUS+の子テーマのサンプルも@importを使っているので、こちらの方法に変更されることをおすすめします。
なお今回は自分が使っているSTINGER PLUS+の例を書いていますが、やり方はどテーマでも同じです。
具体的な方法は、
- 子テーマ用のディレクトリ（フォルダ）を作る
- そのディレクトリにカスタマイズするためのファイルを作る
- テーマから子テーマを選ぶ
このようにして「子テーマから親テーマを呼び出す」ようにします。ディレクトリ名は「親テーマの名前-child」になります。実際の場所は以下のようになります。通常のテーマを入れる場所と同じです。
/wp-content/themes/stingerplus-child
このディレクトの中に「style.css」と「functions.php」というように上書きしたいファイルを配置します。それぞれのCodeの中身は子テーマのstyle.cssですが、前述のように@import url('../stingerplus/style.css');で読み込むとパフォーマンスが悪くなるので最近では勧められていませんから、今回は推奨されている子テーマの functions.php で wp_enqueue_script()を使用する方法にします。
functions.php
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
これで親テーマのcssを読み込んでくれます。
そしてstyle.cssにカスタマイズしたい部分を書いてゆきます。
style.css
/* Template:STINGERPLUS Theme Name:stingerpluschild */
これで準備は完了です、テーマで「stingerpluschild」を選べばいつもと変わらないサイトが表示されるはずです。あとはテーマの編集はこの子テーマに対して行ないます。