WordPressでは既存テーマに独自のカスタマイズを施したい場合、そのテーマ（親テーマ）の子テーマを作成することが推奨されています。今回は子テーマ作成に必要な最低限のルールをご紹介します。

子テーマを利用するメリット

子テーマを作成するメリットは、元になる親テーマがあることで、ゼロからテーマを作成・開発する手間が省けることです。また、カスタマイズしたファイルだけを子テーマのフォルダで管理するので、どのファイルに変更や修正を行えばいいか一目瞭然となりメンテナンスも簡単になります。

子テーマを作成せずに親テーマへ直接変更や修正を加えてしまうと、テーマが更新された際に変更した部分がリセットされてしまいます。それを防ぐのも、子テーマを作成する重要なポイントです。

最低限必要なのは、子テーマのフォルダと２つのファイル

子テーマの作成をはじめるにあたって、最低限必要なのは次の３点です。

 

• その子テーマのフォルダ
• style.css
• functions.php

 

子テーマのフォルダ名は自由に命名してもOKですが、公式には親テーマのフォルダ名に ‘-child’ を付けた形にすることが推奨されます。

親テーマが abc というフォルダだったなら、abc-child といった具合です。

style.css に必要な２つの項目

子テーマを有効化するために style.css には、２つの必須項目を冒頭に記述する必要があります。

 

• Theme Name:　子テーマ名
• Template:　親テーマのフォルダ名

 

この２つを設定することで、管理画面から子テーマが選択できるようになります。

それ以外の詳細な項目は、子テーマ – WordPress Codex 日本語版より転記しておきます。

必要な箇所を自分のテーマに関する情報へ書き直して記載してください。

※黄色文字列が必須項目になります。

/*
 Theme Name: Twenty Fifteen Child
 Theme URI: http://example.com/twenty-fifteen-child/
 Description: Twenty Fifteen Child Theme
 Author: John Doe
 Author URI: http://example.com
 Template: twentyfifteen
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain: twenty-fifteen-child
*/

 

functions.php で親テーマのCSSを読み込む

子テーマに親テーマの style.css を正しく反映させるために、下記の記述を追加します。

親テーマが style.css 以外のCSS を使用している場合は、それも追記してください。

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

 

これで親テーマのCSS の後に、子テーマの style.css が読み込まれます。

 

以上で、子テーマの作成をはじめるための準備が整いました。

子テーマファイルをアップして 外観 > テーマ に移動して、子テーマが表示されていることを確認してみてください。

参考サイト

子テーマ – WordPress Codex 日本語版