WordPressで子テーマの作り方【親テーマをカスマイズ】

2020年2月19日

WordPressの子テーマってどうやって作るの？そもそも子テーマって何のためにあるの？

WordPressでブログを作ったら、テーマをカスタマイズしたくなる！テーマのカスタマイズに欠かせないのが子テーマの作成だ！

今回はテーマのカスタマイズに欠かせない「子テーマ」について、その意味と子テーマの作り方について、実際に作りながら解説していこう！

WordPressの「子テーマ」って何のために作るの？

子テーマは、基本的に「親テーマ」を直接編集するのを避ける為に作るのだ。

なぜ親テーマを直接編集するのを避けるのかというと、「親テーマを編集」してカスタマイズしてしまうと、親テーマがバージョンアップしてリリースされた時に、親テーマをアップデートしたら、これまでせっかくカスタマイズした編集内容が、全部上書きされて消えてしまうからだ。

子テーマの作り方

今回は、シンプルなデザインで有名な「habakiri」というテーマの子テーマを作るという形で、実際に作りながら解説していこう。

子テーマでシンプルにわかりやすくカスタマイズする為に、背景色を#cccに変更するという簡単なカスタマイズの例で進めていこう。

子テーマに最低限必要な材料

style.css
function.php

最低限必要なのは上記の２点だけだ。子テーマ用のフォルダを作成してそこに任意の名前をつけて、上記の２点をファイルを入れておけばOK。

それぞれの作り方を順番に解説していこう。

style.cssの作り方

子テーマのためにCSSファイルをstyle.cssという名前で作成する。

style.cssには、親テーマと紐付ける為に必須の記述があるので確認しておこう。

/*
 Theme Name:   habakiri-child
 Template:     habakiri
*/

body{
    background-color: #ccc !important;
}

上記のCSSファイルの中の「Theme Name:」と「Template:」という記述が、最低限必須になってくる。

「Theme Name:」は子テーマの名前の記述であり、任意の名前でOK。今回はわかりやすく「habakiri-child」と命名。

「Template:」には、親テーマの「フォルダ名」をつける決まりになっている。

「habakiriテーマ」の場合テーマ名と同じ「habakiri」というフォルダ名なので、そのままhabakiri記述。

あとは、今回適用させる、背景色を#cccにするCSSの記述を追記すればOKだ。

function.phpの作り方

function.phpは以下の記述をそのままコピーして入れるだけで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')
);
}
?>

簡単に言えば、親テーマのCSSファイルと子テーマのCSSファイルについての記述だ。