子テーマのフォルダ

親テーマを更新してしまいすべてがデフォルトになった

子テーマとは

WordPressでサイトを作る際、1から作れればいいのですが、工数を減らすためや既存テーマのデザインを利用してカスタマイズする機会もあると思います。

直接テーマ内のテンプレートファイルをカスタマイズしてしまうと、テーマを更新した際に、カスタマイズしたところがすべて上書きされてしまいます。

怖い例としては、twentySeventeenを使用しているWordPressサイトで、何も知らないお客さん(管理者権限)がテーマの更新のお知らせがあったので、更新したらデフォルトの状態に戻ってしまったということになってしまいます。
テーマのバックアップがあればいいですが、ない場合はもう戻しようがありません。

そういったことにならない更新に強いテーマにしたいとき、使いたいのが「子テーマ」機能です。

メリットとしては、親テーマをいじらなくていいので、テーマのバージョンアップが可能になること、子テーマにテンプレートがない場合親テーマのテンプレートを使えるので、記述コードを減らせること

デメリットとしては、カスタマイズに少しコツ(後述)があるので詰まると調べる時間が増える位でしょうか。

■設定手順

・子テーマを入れるフォルダを作る

例)seventeen_child

子テーマのフォルダ

・子テーマフォルダ内に style.css, functions.phpを作成する

子テーマのフォルダ内のstye.css, functions.php

style.cssの中身

/*
	Template:twentyseventeen
	Theme Name:child
*/

※解説
Template:親テーマのフォルダ名
Theme Name:自分のテーマ名
とすることで、子テーマとして認識させることができます。

funtions.phpの中身

[code class=”php”]add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles()
{ wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
} [/code]
※解説
上記のコードで、親テーマのスタイルを引き継げます。

以上ができたら、WordPressの管理画面で[外観]→[テーマ]で子テーマを選択することで、子テーマの設定が完了です。

テーマ変更画面

■コツ

・子テーマ内のテーマフォルダのルートにあるstyle.cssを読み込みたい時
header.phpで
[code]<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">[/code]

・子テーマ内のテンプレートファイルで画像を入れたい時
画像パスが子テーマ用のパスになる get_template_directory_uri(); → get_stylesheet_directory_uri();になります。

[code]<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png">[/code]

・functions.phpの読み込み順序が子テーマfunctions.php → 親テーマのfunctions.phpになるので、重複した場合にエラーが発生します

是非、子テーマ機能を活用して更新に強いWordPressテーマを作りましょう。

この記事が気に入ったら
いいね ! しよう

Twitter で