子テーマとは？WordPressのテーマをいじる前に知っておきたい仕組みと注意点

WordPressのテーマをカスタマイズしようとすると、「子テーマを使いましょう」という説明によく出会います。
先に答えると、子テーマは、親テーマを更新しても、自分の変更を残しておくための仕組みです。
テーマの設定画面だけで済むなら、要らない場合もあります。CSSやPHPのファイルを編集するなら使います。
このブログも、2026年9月末までCocoonの子テーマで動いていました。
そのときの経験と一緒に、子テーマの基本をまとめます。

子テーマとは？(一言で)

子テーマは、親テーマ(CocoonやSWELLなど、サイトの土台になるテーマ)とは別のフォルダに置く、小さなテーマです。
親テーマのファイルには手を入れず、変えたいところだけを子テーマのフォルダに書きます。

WordPressの公式ドキュメントでは、子テーマを使うと、親テーマを更新してもカスタマイズが失われない、と説明されています。
親テーマのファイルに直接書いたCSSは、親テーマを更新すると、新しいファイルで上書きされて消えます。
子テーマに書いておけば、親テーマの更新とは別のフォルダなので残ります。
ただ、親テーマ側のHTMLやCSSが変わって、見た目がずれることはあります。更新したあとは、表示を一度確認しておくと安心です。

実物はこんな感じでした。
このブログで使っていた子テーマ(cocoon-child-master)のstyle.cssの先頭です。

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
*/

大事なのはTemplate:の行。
ここに親テーマのフォルダ名を書くと、「このテーマは、cocoon-masterの子どもです」という意味になります。

どんなときに出てくる？

• CocoonやSWELLなどの既存テーマで、見た目を自分好みに変えたいとき
• テーマの一部のテンプレート(トップページなど)だけを作り変えたいとき
• テーマの機能に、PHPで処理を足したいとき

子テーマの基本

最低限、必要なのはstyle.cssだけ

公式ドキュメントによると、子テーマに絶対に必要なファイルはstyle.cssだけです。
先頭のコメントに、テーマの名前(Theme Name:)と、親テーマのフォルダ名(Template:)を書きます。
フォルダ名は完全に一致させます。1文字でも違うと、親テーマとして認識されません。

CocoonやSWELLのように、テーマの配布元が子テーマも用意しているなら、それを使うのがいちばん確実です。
使い始める手順は、これだけです。

1. 親テーマと子テーマを、両方とも配布元からダウンロードする
2. 「外観」→「テーマ」→「新規追加」から、両方アップロードする
3. 子テーマのほうだけを有効化する(親テーマは入れておくだけでOK)

すでに親テーマだけで運用しているサイトなら、先にバックアップを取ってから切り替えて、切り替えたあとにカスタマイザーの設定やメニュー・ウィジェットと表示を確認します。
テーマによっては、設定がテーマごとに保存されていて、切り替えると元に戻ることがあるからです。

同じ名前のテンプレートを置くと、親の代わりに使われる

子テーマのフォルダの同じ場所に、親テーマと同じ名前のテンプレートファイル(例: front-page.php)を置くと、親のほうの代わりに子テーマのファイルが使われます。
親テーマにはない種類のテンプレート(WordPressがページを表示するときに使うもの)を、子テーマに足すこともできます。

functions.phpは、置き換わらずに両方読み込まれる

functions.phpだけは、テンプレートと違って置き換わりません。
子テーマのものが先に読み込まれて、そのあとに親テーマのものも読み込まれます。
なので、親のfunctions.phpを丸ごと子テーマにコピーすると、同じ名前の関数が2回定義されることがあります。
そうなると、重大なエラーになって、画面が表示されなくなることがあります。
子テーマのfunctions.phpには、足したい処理だけを書きます。

自分はこう使ってました

既存テーマに慣れていなかったので、まず子テーマから

本業では、テーマをいちから作ることがほとんどです。
既存のテーマを使ったことは、ほぼありませんでした。
なので、このブログをCocoonで始めたときも、Cocoonが用意している子テーマを入れて、CSSやPHPで足す変更は、全部そこに書いていました。

最後のほうは、子テーマのstyle.cssが約1,800行、functions.phpが約600行。
front-page.phpのようなテンプレートも、子テーマに置いて作り変えていました。
親のCocoonには、一度も手を入れていません。

機能がありすぎて、ちょっと不便だった

Cocoonは、とにかく機能が多いテーマです。
そのぶん、自分の思いどおりの見た目にしたいとき、親テーマ側の機能やCSSとぶつかることがありました。

たとえば、Cocoonが出す目次の見た目を変えたとき。
子テーマに書いても、Cocoon本体の指定のほうが強く(CSSの指定の強さを決める「詳細度」が高く)て、効きませんでした。
子テーマだから負ける、ではなく、CSSの強さで決まります。
最後は、目次を囲む要素の#tocから書き始めて、指定を強くして上書きしています。

今のcat’s handは、子テーマではなく、オリジナルのテーマで動いています。
移した話はCocoonからオリジナルテーマに移した記事に書いています。

子テーマでハマった例

• 同じCSSの罠に、3回目も引っかかってた話 … 子テーマに書いたCSSが、Cocoon本体のスマホ用の指定に負けて効かなかった
• Cocoonでmarginが効かない原因は、CSSの詳細度だった話 … 子テーマのCSSより、親テーマの指定のほうが強かった
• Cocoonの目次(TOC)デザインをカスタマイズしたら、CSSの詳細度沼にハマった話 … 親テーマが出す目次の見た目を、子テーマから変えようとした

迷ったときの確認ポイント

1. 今有効になっているのが、親テーマか子テーマか、「外観」→「テーマ」で確認する
2. 色や文字の大きさなど、テーマの設定画面で変えられるならそれで済ませる。CSSやPHPのファイルを編集するなら、子テーマを使う
3. ファイルに書く変更は、親テーマのファイルではなく、子テーマに書く
4. 子テーマのCSSが効かないときは、ブラウザの開発者ツールで、どの指定が実際に当たっているかを見る。親テーマのCSSのほうが強い(詳細度)のは、よくある原因の1つ
5. 親のfunctions.phpは丸ごとコピーしない。足したい処理だけを書く