初級者~中級者向け 基本

【基本】WordPressの親テーマと子テーマって何?

WordPressのカスタマイズ
この記事は約6分で読めます。

文中の説明画像をクリックすると拡大します。

親テーマと子テーマって何?

WordPressのテーマを編集するとき、「子テーマを作って編集すべき」と言いますが、この「子テーマ」って何でしょうか。

まず「親テーマ」とは、単なる「テーマ」のことです。

「子テーマ」との関係において「親テーマ」と呼ぶだけです。

そして「子テーマ」とは、カスタマイズ専用のテーマのことです。

「子テーマ」は、「(親)テーマ」とは別ファイルでありながら、「親テーマ」と同時に読み込まれて、「親テーマ」の機能やスタイルを引き継ぐテーマです。

つまり、WordPressは、「親テーマ」と「子テーマ」の両方を読み込んでサイトを表示するのです。

もちろん、「子テーマ」が存在しない場合には、一つのテーマ(「親テーマ」)を読み込んで、サイトを表示します。

どちらの方法でも、WordPressは困りません。

そもそも、テーマって何だっけという方は、こちらをご覧ください。

【基本】WordPressの「テーマ」って要するに何?
WordPressで「テーマ」といえば、サイトの外観を決める「スキン」のような性質もあり、独自の機能も併せ持つ、いわば「サイトの表示パッケージ」のようなものです。管理画面にてワンクリックで変更することができます。

では、なぜ子テーマが必要なの?

では、なぜ「子テーマ」を使うのでしょうか。

それは、親テーマがアップデート(更新)を続けることに理由があります。

有料テーマでも無料テーマでも、配布されている既存のテーマは、定期的にあるいは不定期に、アップデートをしてセキュリティを向上させたり、機能を高めたり、最新版のWordPressのに対応したりします。

アップデートは、必要なことです。

しかしそのさい、カスタマイズした箇所がアップデートによって失われてしまう可能性があるのです。

つまり、更新によって上書きされてしまうのですね。カスタマイズ部分が、初期化されて無効になってしまうということです。

これは、深くカスタマイズしていればいるほど、大変な損害です。

そこで、アップデートの影響を受けない「分身」のような存在を作り、その「分身」をカスタマイズすることで、アップデートによるカスタマイズ部分の消失を防ぐのです。

この「分身」こそが、「子テーマ」です。

「子テーマ」は「親テーマ」と連携するため、「子テーマ」で行なったカスタマイズは、画面に反映されます。

例えば、「子テーマ」で文字やスタイルを変更したり、サイドバーに広告を入れたり、フッタにメニューを入れたりすると、それはテーマに反映され、サイトに表示されます。

しかし、「親テーマ」のアップデートの影響は、受けません

「親テーマ」は無事アップデート(更新)し、「子テーマ」はそのまま保たれてカスタマイズした状態を維持できる、ということです。

親テーマと子テーマの違い

フォルダ名・テーマ名が違う

「テーマ(親テーマ)」と「子テーマ」は、物理的には別なテーマですから、フォルダ名もテーマ名も違います

例えば、「テーマ(親テーマ)」が「theme」であれば、「子テーマ」は「theme-child」という具合です(あくまでも例です)。

フォルダ名に「-child」とか「_chiid」とつけておくと、運営者にとっては、管理上親子関係がわかりやすいかもしれません。

もちろん、(後述するstyle.cssで、親テーマのフォルダ名を明記しておけば)関連性のないテーマ名でもOKです。

親テーマ名が「theme」、子テーマ名が「mysite」などでもOKです。

※ただし、親テーマのフォルダ名・テーマ名を変えてしまうと、アップデートが受けられないことになりますので、親テーマの方では変更しないでください。

最近では、テーマ配布元のサイトに、親テーマと子テーマの両方が設置されているケースも多いようです。

例えば、Cocoonがそうですね。参考までに、ダウンロードページをご覧ください。

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

ファイルの数が違う

通常は、「親テーマ」は膨大なファイルがありますが、「子テーマ」は必要最小限しかありません。

「子テーマ」に最低限必要なのは、以下の2ファイルだけです。

  • functions.php
    機能を登録するファイル
  • style.css
    デザイン・体裁を制御するファイル

子テーマは編集するけど親テーマは編集しない

前述の通り、アップデートからカスタマイズ部分を守るのであれば、子テーマのファイルは編集しますが、親テーマのファイルは編集しません

親テーマはテーマの本体であり、最初の状態のまま編集せずにおいて、アップデートの対象になるのです。

もしも「親テーマのこのファイルを編集したい」と思ったら、親テーマからそのファイルをコピーして子テーマのフォルダに入れ、それから編集します。

つまり、そのファイルを子テーマに複製してから編集します。

そうすれば、親テーマには手を付けることなく、カスタマイズが可能です。

子テーマとは、読んで上書きするためのテーマである

言い換えると、「子テーマ」とは、「親テーマ」の一部を「上書き」するためのテーマと言えます。

「上書き」と言っても、実際に「親テーマ」を書き換えるのではなく、「親テーマ」の情報を上書きするということです。

どういうことか、WordPressがテーマファイルを読む順番を見るとわかります。

  1. 最初に、必要とするファイルを「子テーマ」のフォルダで探す
  2. 「子テーマ」のフォルダに必要ファイルがあったら、それを読む
  3. 「子テーマ」のフォルダに必要ファイルがなかったら、「親テーマ」のファイルを読む

しかし、style.cssとfunctions.phpは上書きではない

ただし、style.cssは、違います。「上書き」ではありません。

style.cssは、「親テーマ」→「子テーマ」の順に読み込まれますが、「上書き」されるのではなく「追加」されるのです。

functions.php(機能を登録するファイル)も上書きではありません。以下のように読まれます。

  1. 先に、子テーマのfunctions.phpが読まれる
  2. 次に、親テーマのfunctions.phpが読まれる

こうして、親テーマと子テーマ両方のfunctions.phpが動く状態になります。

子テーマのstyle.cssとfunctions.phpの中身

子テーマのstyle.cssに記述すること

style.cssの最初に、最低限以下のような記述をします(書こうと思えば項目はもっとありますが、理解しやすいようにシンプルに記載します)。

【style.css】

/*
Theme Name : Cocoon child(子テーマの名前)
Template : cocoon-master(親テーマのフォルダ名)
*/

このstyle.cssに書かれたこの部分によって、WordPressが「これは子テーマなのだ」と認識するので、重要な記述です。

cocoon-master(親テーマのフォルダ名)」この部分が重要です。

親テーマのフォルダ名を正確に書かないと、子テーマとして認識されませんので、ご注意ください。

この記述ができたら、WordPressの「外観」→「テーマ」を開くと、「テーマ(親テーマ)」と「子テーマ」の両方が認識されます(下図は「子テーマ」を有効化した状態です)。

style.cssには、最初の記述さえあれば、中身が何もなくても、「子テーマ」と認識されます。中身がなければ、「親テーマ」のstyle.cssの中身だけが反映されることになります。

まとめ

  • WordPressの「子テーマ」とは、「(親)テーマ」とは別ファイルでありながら、機能とスタイルを引き継いだカスタマイズ専用のテーマである。
  • 「子テーマ」は「(親)テーマ」と連携するため、「子テーマ」で行なったカスタマイズは画面に反映される。
  • 「(親)テーマ」がアップデート(更新)で初期化されても、「子テーマ」で行なったカスタマイズは守られる。
タイトルとURLをコピーしました