WordPressで子テーマを作成する方法

2018年8月3日WordPress

Contents

1. WordPressで子テーマを作成する方法

WordPressで子テーマを作成する方法

WordPressでWEBサイトを作成するとき、既存のテーマを利用するとたくさんのメリットがあります。
テンプレートができているので、最初からサイト作りをする必要がなく時間と手間を節約することができます。
また、管理画面から簡単にカスタマイズすることができるのでWEBサイト制作の知識がない人でもサイト作りをすることができます。
このように、既存テーマを使うことで様々なメリットがあります。

今回は、既存テーマに子テーマを新たに作成し、子テーマでカスタマイズできるようにします。

※子テーマ・・・既存テーマ(親テーマ）の機能とスタイルを継承したテーマ

子テーマのメリット

子テーマを作成することにはメリットがあります。
親テーマ(既存テーマ）を直接カスタマイズすると、その親テーマにアップデートされたときにカスタマイズしたファイルがすべて新しいものに上書きされてしまい、ファイルがすべて消えてしまいます。
子テーマをカスタマイズすると、アップデートがあってもファイルが上書きされることがなく、それまでカスタマイズした内容が維持されます。

また、親テーマの元のソースコードを残して置けるというメリットもあります。
親テーマをカスタマイズしてしまうと、ソースコードを別に保存しておかない限り、元のソースコードに戻したいときに困難になります。
子テーマをカスタマイズすると親テーマのソースコードはそのままにしておくことができます。

子テーマ作成

子テーマのフォルダを作成します

親テーマフォルダと同じ階層に新しいフォルダを作成します。

wordpress > wp-admin > themes

新しいフォルダには任意の名前をつけますが、「親テーマの名前ーchild」のようにわかりやすいものにします。
以下のような配置になります。

themes > 親テーマのフォルダ
　　　　> 子テーマのフォルダ（新しく作成したフォルダ）

次に、作成した子テーマのフォルダに以下の2つのファイルを作成します。

・style.css
・functions.php

style.css

style.cssには以下のソースコードを記述します。

以下のコードがなければ子テーマとして認識してくれません。
また、スペルミスや大文字小文字などの違いなどでも認識されません。

/*
Template:親テーマの名前（例　twentyseventeen）
Theme Name:子テーマの名前（例　twentyseventeen-child）
*/

functions.php

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’ );
wp_enqueue_style( 'child-style’, get_stylesheet_directory_uri() . '/style.css’, array('parent-style’)
);
}
?>