WordPressの子テーマの作り方

みなさんはどのようなWordPressテーマを利用していますか?

多くの人が無料のWordPressテーマを利用し、次いで購入したり、情報商材に付属していたWordPressテーマを利用し、ごく一部の方は自分で制作したWordPressテーマを利用していると思います。

自分で制作した場合は子テーマを利用していることがほとんどでしょうが、他の人が制作したWordPressテーマを利用している方は子テーマを利用していますか?

子テーマとは、WordPressの親テーマに手を加えることなくカスタマイズできるテーマのことで、親テーマに大きな修正やバージョンアップがあった場合でも、子テーマのカスタマイズを維持したまま上書きできるので便利です。

もし、親テーマに直接カスタマイズを施していると、上書きしたらそれまでのカスタマイズが消えてしまうと理解していただければわかりやすいでしょう。

したがって、WordPressをカスタマイズするときは、必ず子テーマを利用してください。

私が作ったWordPressテーマ FlashWork-sも当然、子テーマを用意しています。

子テーマを利用しているかどうかの確認

子テーマは、最初にテーマを2つアップロードしている時はまず間違いなく利用しているでしょう。

アップロードした時のことを忘れている場合は、WordPressにログインして、外観 » テーマの順に進み、選択したテーマの名前にchildなど子テーマを表す文字が含まれていれば子テーマを利用しています。

親テーマを直接利用している場合でも変更を加えていないのであれば、次の手順によりWordPressの子テーマを作れますが、直接カスタマイズしてしまっている時は諦めるしかありません。

（1）フォルダを作る

まずはフォルダを作りますが、親テーマのフォルダ名-childにしてください。

これで、どのテーマの子テーマであるかの判別が簡単になります。

もちろん、他の名前でも構いませんが、わかりにくくなるだけですし、SEO面でも全く関係ないので、上記のように簡単にするのがおすすめです。

（2）ファイルを作成する

まずはよく利用するstyle.cssとfunctions.phpを作りますが、TeraPadなどの文字コード・改行コードを指定できるテキストエディタで「文字コード：UTF-8N」、「改行コード：LF」にします。

ただし、WordPressインストール時に他の文字コードを選んだ方はこれだと文字化けしてしまうので、環境に合わせて保存してください。

（3）functions.phpへの記入

functions.phpは、WordPressテーマにカスタム背景やパンくずリストなどの機能を持たすことができるファイルですが、とりあえず今は使わないので、以下のphpの開始タグと終了タグだけ記入しておきます。

<?php

?>

通常はこれで問題なく親テーマのcssが適用されるはずですが、もし反映されていない場合は、functions.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' );
}

?>

これは親テーマのcssを子テーマ適用時にも読み込むプログラムです。

ここで注意しておいて欲しいのが、functions.phpは親テーマのファイルが優先されるので、同一の内容のプログラムを子テーマに記入しても無視されます。

したがって、変更するときは親テーマのfunctions.phpを別の場所にバックアップした上で直接親テーマに手を加え、新しいカスタマイズをするときに子テーマを利用すると良いでしょう。

もし、バックアップを取らないならば、そのプログラムをコピーして、片方を保存用に以下のタグで囲みコメントアウトしてください。

/*

*/

（4）style.cssへの記入

style.cssの先頭に次の記入を施します。

Theme Nameはテーマを識別するのに必要ですし、Templateは親テーマと結びつけるのに必要なので、最低でもこの2つは必ず記述してください。

@charset "UTF-8";

/*
Theme Name: 子テーマの名前
Theme URI: 子テーマのURI
Template: 親テーマのディレクトリ名
Description: 子テーマの説明
Template Version: バージョン情報
Author: 制作者の名前
Author URI: 制作者のURI
*/

cssファイルは子テーマが優先されるので、この下に自作のcssを記述してください。

（5）テンプレートファイルのカスタマイズ

phpファイルを改造するときは、親テーマのphpファイルをコピーして、子テーマフォルダ内に同じ名前でペーストします。

そして、子テーマにコピペしたphpファイルをカスタマイズしてアップロードしてください。

functions.php以外のphpファイルは、子テーマのファイルが優先されます。

（6）スクリーンショット用の画像を用意する

WordPressにログイン » 外観 » テーマの順に進むと、利用している子テーマに画像が表示されていないはずです。

必須ではありませんが、時間的に余裕があれば画像を用意しましょう。

方法は簡単で、幅880px X 高さ660pxの任意の画像を用意して、screenshot.pngの名前で書き出し、子テーマのフォルダに保存した後、アップロードするだけです。

親テーマのscreenshot.pngをそのまま使う人もいるでしょうが、親テーマか子テーマかわかりにくくなるだけなので、別の画像を利用するのが良いでしょう。

関連記事