初級者~中級者向け

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

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

LINEで送る
Pocket

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

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

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

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

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

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

なぜ子テーマが必要なの?

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

テーマとは、改善・進化するためにアップデート(更新)をすることがあり、アップデートのときにはせっかく行なったカスタマイズ部分が初期化されて無効になってしまいます。

ところが、「子テーマ」をカスタマイズしておけば、「親テーマ」がアップデート(更新)されてもその影響を受けません。

「親テーマ」は無事アップデートし、「子テーマ」はそのまま保たれてアップデート後もカスタマイズした状態を引き継げる、ということです。

まさにそのために、「子テーマ」を作るのです。

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

フォルダ名が違う

「テーマ(親テーマ)」と「子テーマ」は、フォルダ名を変えます。例えば「テーマ(親テーマ)」が「simplicity2」であれば「simplicity2-child」という具合です。フォルダ名に「-child」とか「_chiid」とつけておくとわかりやすいと思います。

Simplicity2のダウンロード

ファイルの数が違う

「テーマ(親テーマ)」にはたくさんの構成ファイルがありますが、「子テーマ」に必要なのは最低限以下の2ファイルだけです。

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

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

子テーマのファイルは編集しますが、親テーマのファイルは編集しません。まさにそのために、子テーマを作るのです。親テーマは最初の状態のまま編集せずにおいて、アップデートの対象になるのです。

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

あくまでも親テーマは編集しないのです。

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

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

「上書き」と言っても、実際に「親テーマ」を書き換えるのではなく(前述の通り親テーマは編集しません)。「親テーマ」の情報を上書きする、ということです。

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

  1. 最初に、必要とするファイルを「子テーマ」のフォルダ(例:simplicity2-child)で探す
  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 : Simplicity2 child(子テーマの名前)
Template : simplicity2(親テーマの名前)
*/

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

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

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

子テーマのfunctions.phpに記述すること

子テーマのfunctions.phpの中では、「親テーマはどれか」を明示する必要はありません。下記のとおりの書き方になります。WordPressの「wp_enqueue_script()」によって、親テーマのCSSを読込みます。

【functions.php】

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

 

まとめ

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