テーマを修正するときは必ず子テーマで！元のテーマを直したらどうなる？

2015年10月22日

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

最初WordPressに触り始めたときにすごく分からなかったのが「子テーマ」というものの存在でした。「子テーマ」って何なんだ？？と。実際にサイトを運用し始めて色々直したいところや機能を追加したいことが起きてきたときに初めて「あー、子テーマってそういうものか」ということがわかりました。
最近WordPress勉強会などでもサイト作成をしてカスタマイズをしているのに子テーマは何のためにあるの？ということを聞かれることが多かったので、子テーマでカスタマイズしないとどうなるかについて書きたいと思います。

記事をざっと見る

文字の色を変えて、ログアウトしたときにトップページに戻るようにしてみる

chocolatというテーマを使って、テーマそのものを修正するとどうなるか？について検証してみました。

まずは文字の色を変えてみます。chocolatフォルダの直下にあるstyle.cssを開き、

/* ------------------------------------
hedding Base Style
------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
     color: #41250c;
     clear: both;
     line-height: 1.3;
     margin: 1em 0;
}

この部分のcolor:#41250c;を

/* ------------------------------------
hedding Base Style
------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
     color: #f00;
     clear: both;
     line-height: 1.3;
     margin: 1em 0;
}

color: #f00;にしてみます。

変更前は

こういう表示だったのが、

このように見出し文字が赤くなりました。

functions.phpに機能を追加して、ログアウトしたときにトップページに戻るようにしてみます。

chocolatフォルダの直下にあるfunctions.phpを開いて、一番最後に

add_filter( 'logout_redirect', 'my_logout_redirect', 10, 3 );

function my_logout_redirect( $redirect_to, $requested_redirect_to, $user ) {
    return home_url();
}

を追加しました。今まではログアウトしたときに

ログイン画面が表示されていましたが、追加後にログアウトすると、

トップページに戻るようになります。

テーマの更新をするとどうなるか？

この状態で、テーマの更新をするとどうなるか見てみます。

このようにテーマの更新に数字が出ているのでクリック

chocolatの更新が来ているので、選択して　テーマの更新 をクリック

更新が完了します。

表画面を見ると、

見出しの色が戻っています。

ログアウトしてみると

このようにログイン画面になります。

つまり、テーマを直接カスタマイズしたときはそのテーマが更新されるとカスタマイズ部分が上書きされてしまうのでカスタマイズを再度やり直さないといけないということになります。

ですのでテーマをカスタマイズして修正する場合は必ず子テーマで行わないと、テーマのカスタマイズで行った自分の作業が消えてしまうことになってしまいます。

子テーマで同じカスタマイズをしてみる

ということで子テーマで同じカスタマイズをしてみます。子テーマを作るのがちょっと面倒だったので自作の「子テーマメーカー」というプラグインをインストールして、子テーマを作りました。
* ダウンロードはこちら

インストール方法などは上記のblogに書いてあります。

子テーマメーカーで、こんな感じに入力して　chocolat-child　という子テーマを作りました。

ダッシュボード　外観＞テーマ　で

今作った子テーマを有効化します。この時点では

chocolatと全く同じものです。

親テーマのchocolatのstyle.cssから

/* ------------------------------------
hedding Base Style
------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
     color: #41250c;
     clear: both;
     line-height: 1.3;
     margin: 1em 0;
}

この部分をchocolat-child　直下の　style.cssに追加貼り付けして

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

    @import url("../chocolat/style.css");

/* ------------------------------------
hedding Base Style
------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #f00;
    clear: both;
    line-height: 1.3;
    margin: 1em 0;
}

color: #f00;　にして、保存します。

chocolat-child直下のfunctions.phpを開いて

<?php
add_filter( 'logout_redirect', 'my_logout_redirect', 10, 3 );

function my_logout_redirect( $redirect_to, $requested_redirect_to, $user ) {
    return home_url();
}

先ほど追加したのと同じ行を追加します(頭に<?phpを付けてください)。

ここまで修正してから表示すると、