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

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

スポンサーリンク

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

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

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

この部分のcolor:#41250c;

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

変更前は

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

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

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

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

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

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

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

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

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

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

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

更新が完了します。

表画面を見ると、

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

ログアウトしてみると

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

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

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

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

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

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

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

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

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

chocolatと全く同じものです。

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

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

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

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

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

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

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

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

ダッシュボードで

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

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

ログアウトしても、

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

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

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

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

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

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

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

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

子テーマの記事

[Amazon sponsored link] WordPressデザイン 関連本

兎本美佳

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

シェアする

フォローする

スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

スポンサーリンク
スポンサーリンク
トップへ戻る