WordPress関連コラム  2020.10.16

ワードプレスの子テーマって何?安心してカスタマイズするために設定しよう

サイトを作ろうとしているときに、「子テーマ」という文字を目にしたことはありませんか?

実はこの子テーマ、サイトを安心して長期間運営するのにとても大切なものなんです。

今回は、子テーマとは何なのかや自作する方法をご紹介します。

テーマを編集していても、今から子テーマを設定することができるので心配はいりません。

子テーマについて知って、安心してサイトを運営していきましょう。

ワードプレスのカスタマイズに必須の子テーマとは?


子テーマとは、元の親テーマを崩さずにサイトデザインを編集できるテーマです。

テーマにはそもそもの元となる「親テーマ」があり、「子テーマ」は親テーマを元にして作られています。

親テーマに直接カスタマイズはできますが、上書きしてしまうとエラーが出たり重要なデータを消してしまうことも。

安心して長期間のサイト運営を行うために、子テーマを使っているユーザーは多いです。

テーマによって開発者側で子テーマを用意しているところもありますが、自分で用意しないといけないケースもあります

自分で子テーマを用意すると聞くと、難しそうに感じるかもしれませんが、実はとても簡単にできるので安心してください。

今使っているテーマに子テーマがあるのかは、公式サイトをチェックすればわかるのでまずは見ておきましょう。

子テーマはワードプレス初心者こそ設定しておこう!

子テーマを使うことで、安心して長期間に渡るサイト運営をすることが可能になります。

ワードプレス初心者が親テーマを直接カスタマイズして起こるトラブルはエラーです。

サイトを運営していると、「この部分の色だけ変更したい!」とカスタマイズしたいと思うことがありますよね。

自分好みにサイトを作り上げていくのは無料のサイト作成サービスでは難しいこともあるので、ワードプレスのサイトならではの楽しみでもあります。

一方で、もしも子テーマを設定せずに親テーマに直接カスタマイズや変更を加えてしまうと、エラーが起こったり重要なデータを消してしまいかねません。

カスタマイズした部分の表示が思ったようにできないどころか、サイトが表示されなかったりデータが消えてしまうことにもつながります

子テーマを使うことで親テーマに手を加えずに編集できる上に、データの上書きによるエラーやトラブルを防止することが可能です。

すべての人に子テーマの利用をおすすめしますが、特にHTMLやCSSなどの専門知識がない人は設定しましょう。

余計な不安無く安心してサイトカスタマイズやサイト運営ができますよ。

次の項目では子テーマを使う大きなメリットである、アップデートの影響を受けなくなることについてご紹介します。

アップデートをすると起こる影響やテーマのアップデートの理由と必要性もご紹介しているので、チェックしてみてください。

子テーマを使えばアップデートの影響を受けなくて済む!

テーマはアップデートが入ることがあり、主な要因は以下の通りです。

  • セキュリティーの強化
  • 不具合の対応
  • 機能やデザインの変更

アップデートにはいろいろな種類がありますが、どれも利用者が快適にサイト運営をできるようにされるものです。

ワードプレスを動かすために必要なシステムやプログラム言語も日々虚弱性の対策のためにアップデートされています。

元となるシステムやプログラムに合わせて、テーマも一緒にアップデートをすることで、セキュリティの強化をしているんです。

同一のテーマを使用していたとしても、人によって導入しているプラグインやシステムは違います。

そのため、一部で正常な動作ができなかったりエラーが出るので、その都度開発側はアップデートして不具合を修正をします。

管理機能の追加や改善、テーマデザインの修正や改善など、効率や利便性を向上させるためにアップデートを行うことも多いです。

以上のような様々なメリットがあるので、ワードプレスのテーマにアップデートが入った際は積極的に行うようにしましょう。

ただし、アップデートが入ったときに親テーマのみをカスタマイズしていると、新しいデータに上書きされてカスタマイズがリセットされてしまいます

カスタマイズをリセットさせないために使うのが、子テーマです。

テーマアップデートの影響を受けないので、アップデートが何度入っても子テーマで作り上げたデザインは崩れることがありません

再度カスタマイズしなおす手間が省けてエラーも回避できるので、子テーマはぜひ利用しましょう。

ちなみに、「今のままで問題がないしテーマをアップデートしなければ良いんじゃないの?」と思う人もいるかもしれません。

ですが、アップデートをしないまま使用しているとサイトがうまく表示されなかったりセキュリティが甘くなってしまいます。

不具合が起きやすくなる上に、最新バージョンのテーマでなければサポート対応してもらえないケースもあるので、もしもアップデートが入ったら必ずやっておきましょう。

ワードプレスの子テーマの使い方は?有効化するだけ!

ワードプレスの子テーマは、圧縮された.zip形式のファイルをワードプレスのテーマの管理画面からインストール後有効化することで使用可能です。

テーマアップロード画面

ここで注意なのが、ワードプレスの子テーマは親テーマがワードプレスにインストールされていないと使用できません。

あらかじめ、使いたいテーマの親テーマをインストールしましょう。

有効化すると、親テーマを読み取ってくれます。

しかし、テーマによっては子テーマが用意されていないものもありますよね。

そんな時は自分で作ってしまいましょう。

「自分で子テーマを作るなんてできるの?」と思うかもしれませんが、実は簡単な3ステップで子テーマを自分で作れるんです。

ここからは、子テーマがない場合に自分で作る簡単な方法をご紹介します。

今使っている、使おうとしているテーマに子テーマが用意されていない人は必見の内容です。

参考にしながら、一緒に作ってみましょう。

子テーマは自作できる!たった3つの簡単なステップとは?


「わたしの使っているテーマには子テーマがない!」そんな人も安心してください。

子テーマは自分で作れます。

しかもたった3ステップでとても簡単です。

  • 子テーマのためのフォルダを新しく作る
  • 2つの新規ファイルをフォルダ内に作る
  • 子テーマ用のコードをコピペしてアレンジする

ワードプレス初心者や難しい作業が苦手な人でも大丈夫なので、順を追って一緒に作ってみましょう。

ステップ1.子テーマのためのフォルダを新しく作る

まず子テーマのためのフォルダを作りましょう。

場所はどこでも大丈夫ですが、今回はわかりやすいようにパソコンのデスクトップに作ります。

デスクトップの何もない場所で右クリックをします。

Windowsの場合は「新規作成」>「フォルダー」、Macの場合は「新規フォルダ」です。

作ったらファイル名をつけましょう。

フォルダー名は「〇〇(テーマ名)-child」にすると後々わかりやすいです

「〇〇(テーマ名)-child」と名前をつける

もちろん、自分で好きな名前にしてもOK。

ステップの1つ目はこれで終了です。

次は今作ったフォルダ内に、新しくファイルを2つ作っていきます。

ステップ2.2つの新規ファイルをフォルダ内に作る

子テーマを作るのに必要なファイル「style.css」と「functions.php」の2つです。

2つのファイルはエディタツールを使って作ります

ワードプレスなら「メモ帳」Macなら「テキストエディット」などエディタツールを使いましょう。

エディタツールを開いたら、ファイル名を「style.css」にして先ほど作ったフォルダに保存します。

保存したらもう1つ新規のエディタを開いてファイル名を「functions.php」にして先程のフォルダに保存。

2つのファイルをフォルダ内に作る

これでステップの2つ目は終了です。

次のステップでは、今作った二つのファイルにコードをコピペして一部自分用に書き換えます。

ステップ3.子テーマ用のコードをコピペしてアレンジする

子テーマ用のコードをコピペして自分の使っているテーマ用に一部分を簡単にアレンジしましょう。

「style.css」と「functions.php」について、迷わないようにそれぞれ解説します。

「style.css」のファイルにコピペ

style.cssのエディタツール開いたら以下のコードをコピペしてください。

style.cssのコード
/*
Theme Name:
Template:
Version:
*/

コピペしたら、コードを自分用に書き換えましょう。

「Theme Name:」の後ろには、子テーマのテーマ名にしたい名前を入力します。

わかりやすいのは「親テーマ名child」です。

「Template:」の後ろには、親テーマのフォルダ名を間違えずに入力しましょう。

「Version:」の後ろには、親テーマと同じバージョンを入力します。

間違いやすい項目が「Template:」です。

特に注意していただきたいのが、親テーマのフォルダ名がテーマ名ではないこと。

かなり間違えやすいので注意しておくとトラブルを避けられます。

バージョンの数値がわからないときは、ワードプレス管理画面の「外観」の「テーマ編集」を見てみましょう。

「style.css」が表示されていて、その中に「Version:」という項目があります。

その右横に書かれている数字が親テーマのバージョン情報です。

この作業が完了したら、保存してください。

「functions.php」のファイルを作る

functions.phpのエディタツール開いたら以下のコードをコピペしてください。

HTML
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

functions.phpのコードは書き換え不要です。

そのまま保存しましょう。

書き換えてしまうとうまく動作しない可能性があるので、コピペしたら触らずに保存することがポイントです。

これで子テーマは完成!

フォルダを圧縮して、テーマ管理画面からアップロードして有効化すれば使用可能です。

子テーマがあるだけでアップデートの影響を受けることなく自由にカスタマイズできます。

3ステップでできて簡単なので、今の段階で子テーマを使用していない人は自作して使ってみてください。

「すでに親テーマを編集しちゃっているんだけど……」と思っている人はいませんか?

そんな人も大丈夫なので、ご安心ください。

今からでも子テーマに変更することは不可能ではありません。

ここからは、親テーマをすでに編集してしまった人向けに、子テーマを設定する方法をご紹介します。

親テーマを編集していても編集したデータをそのまま子テーマに移すことができるので、今のカスタマイズを保ったまま子テーマに移行することが可能です。

親テーマを使っている人は設定方法を参考に、安心してテーマ編集できる状態にしましょう。

既に親テーマを編集していても大丈夫!今からでも子テーマを設定しよう!


カスタマイズ済みの親テーマから子テーマに編集箇所を移す方法は以下の3ステップです。

  1. 管理画面から子テーマを有効化する
  2. 親テーマから変更済みの部分を子テーマにコピペして移す
  3. 親テーマを編集していない新しいものに変える

テンプレートファイルの名前を変えない限りは、子テーマの設定や変更点が反映されます。

変更点をコピペして子テーマに移しましょう。

作業はたったこれだけです。

子テーマは親テーマが元になっているので、変更した部分を移すだけでOK。

すでに親テーマを利用している人も、今からでも大丈夫なので焦らずに子テーマを設定してみましょう。

現在の親テーマの状態でバックアップをとっておいたほうが、もしもデータが破損してしまった時に安心です。

まとめ

ワードプレスでサイトを作るなら、子テーマを設定しておくと安心してカスタマイズできます。

親テーマだけだと、カスタマイズした内容がアップデートなどで上書きされて消えてしまうことがあるためです。

子テーマの設定は手順を知っていれば初心者でもできるので、ぜひ行っておきましょう。

親テーマにすでに直接カスタマイズしてしまっていても、子テーマに移行する方法のあるので、今からでも間に合います。

長期的にサイトを安心して運営するためにも子テーマを設定しておくと良いでしょう。