WordPressの子テーマを簡単に作る方法

2016年5月25日 17:54
今までWordpressのテーマをそのままいじってしまい、更新できずに苦しんできました。
子テーマという存在は知っていたものの、面倒で後回しにしてたわけですが、死ぬほど簡単です。
とりあえず、紹介するのでやってみてください。
この記事は最終更新日から1年以上が経過しています。

ディレクトリ作成

利用しているテーマ名に少し名前を付けたしたディレクトリを作成。

例:親ディレクトリ名
mh-magazine-lite
↓
例:子テーマディレクトリ作成
mh-magazine-lite-child

子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます(ただし必須ではありません。)
自分は「_child」でも、「_small」でもいけます。複数サイトを運営していてディレクトリが被るのが面倒なので「_tawamure」としました。

CSS作成

子テーマにディレクトリ内に空のstyle.cssを作成し、下の記述を追加。

/*
Template:mh-magazine-lite
Theme Name:mh-magazine-lite-child
Author: Your Name
*/

記述はもっと細かくあるようですが、上記3行だけで問題はないので、これにしておきます。

functions.php作成

子テーマにディレクトリ内に空のfunctions.phpを作成し、下の記述を追加。

<?php //子テーマで利用する関数を書く
//CSSの追加 
function theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

親テーマのCSSの読み込みは必ずしておきましょう。

テーマ変更

外観->テーマへ。

2016-05-25 (3)

上の画像のように作成した子テーマディレクトリ名でテーマが現れるので有効に。
これで準備は完了。

利用したいファイルをコピー

ここからが本番です。
利用したいファイルを子テーマディレクトリにコピーしてください。

例:
index.phpをカスタマイズして利用したい場合は、コピーして子ディレクトリに入れます。
header.php、footer.phpなどもカスタマイズを加えたい場合はコピーしていきましょう。

ちなみに、戯れ問答の子テーマディレクトリは以下の画像のようになっています。
2016-05-25-2

JSディレクトリやCSSディレクトリを利用する場合、以下の関数を使います。

get_stylesheet_directory_uri()

総括

子テーマを利用するようにしてからというもの、テーマの更新に怯える必要がなくなりました。

テーマが更新されると、新機能が増えたりするので、その恩恵には預かりたいところですし。

これだけ簡単であれば、テーマを変える毎に子テーマ作成するのもそれほど苦にはならないことでしょう。

以上でした。

ブログ運営

株式会社ちょもらんま

https://qomolangma.jp