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

この記事は約6分で読めます。

最初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を付けてください)。

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

見出しの色が赤くなっていて、

ログアウトしたときにトップページに遷移しました。

ダッシュボードで

chocolatテーマの更新をします。その後、再度トップページを見たときに

やはりというか(^_^;、子テーマにカスタマイズをしているので文字の色のカスタマイズは変わらず赤い色で見出しが表示されています。

ログアウトしても、

ちゃんとトップページに戻る機能がいきています。

まとめ:途中から子テーマにするとき

親テーマに手を入れてしまっていて途中から子テーマにするときはとりあえず子テーマを作ってから、 おぼえている限りの修正 を子テーマに施しましょう。

変更してあるかどうかはファイルを詳細表示で見て、更新年月日が新しいもの、が怪しいと思います。

子テーマのstyle.css追加や変更をしたい部分だけを記述します。functions.php追加したい機能だけを記述します。この場合は親テーマのこれらのファイルの更新年月日が新しければ、自分で修正や追加した部分を子テーマの同じファイルに記述します。

index.phpなどのテンプレートを子テーマにコピーしてテンプレートごと修正することもできます。この場合はもし更新年月日の新しいファイルがあればそのファイルを子テーマにコピーしてみます。

ということで子テーマには「カスタマイズを施すためのファイルだけが存在」しています。テーマを丸ごとコピーして修正する、ということではないので(最初、そう思っていました(^_^;)ご注意ください。

今まで子テーマについていくつか記事を書いてきたのでよろしければ見てみてください

子テーマの記事
[amazon_searchlink search=”WordPressデザイン”]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ プラグイン
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。