WordPress子テーマとは?初心者でも失敗しない作り方・必要性・有効化手順を完全解説
はじめに
WordPressでサイトを運営していると、「デザインを少し変えたい」「functions.phpにコードを追加したい」「親テーマを更新してもカスタマイズを残したい」と感じる場面があります。そのときに重要になるのが、WordPress子テーマです。
子テーマを使わずに親テーマを直接編集すると、テーマのアップデート時に変更内容が上書きされ、せっかく調整したCSSやテンプレートが消えてしまうことがあります。特に、Cocoon、SWELL、Lightning、AFFINGER、JIN、SANGOなどのテーマを長く使う場合、子テーマの理解は欠かせません。
この記事では、WordPress子テーマとは何か、なぜ必要なのか、初心者でも失敗しにくい作り方、有効化手順、よくあるエラーの対処法までわかりやすく解説します。公式のWordPress開発者向けドキュメントでも、子テーマは親テーマのコードを直接編集せずにカスタマイズする方法として説明されています。
1. WordPress子テーマとは?初心者向けにわかりやすく解説
WordPress子テーマとは、すでに存在するテーマをベースにして、必要な部分だけを上書き・追加できるテーマのことです。元になるテーマを「親テーマ」、そこから派生して作るテーマを「子テーマ」と呼びます。
たとえば、現在使っているテーマのデザインや機能はそのまま使いながら、「見出しの色だけ変えたい」「フッターの文言を変えたい」「独自のCSSを追加したい」といった場合に、子テーマが役立ちます。
1-1. 子テーマとは親テーマを安全にカスタマイズするためのテーマ
子テーマの最大の役割は、親テーマを直接編集せずに安全にカスタマイズできる状態を作ることです。
WordPressテーマは定期的にアップデートされます。アップデートには、セキュリティ対策、不具合修正、WordPress本体への対応、機能改善などが含まれます。しかし、親テーマのファイルを直接編集していると、更新時にファイルが新しいものへ置き換わり、編集内容が消えてしまう可能性があります。
子テーマを使えば、カスタマイズ内容を親テーマとは別の場所に保存できます。そのため、親テーマを更新しても、子テーマ側に記述したCSS、functions.phpの追記、テンプレートの上書きなどを残しやすくなります。
1-2. 親テーマと子テーマの違い
親テーマは、サイト全体のデザインや機能を持つ完成されたテーマです。WordPressにインストールして有効化すれば、そのままサイトの見た目やレイアウトを構成できます。
一方、子テーマは親テーマを前提に動くテーマです。子テーマ単体では成立せず、必ず対応する親テーマが必要です。子テーマは親テーマの機能やテンプレートを引き継ぎつつ、必要な箇所だけを変更します。
簡単に言うと、親テーマは「土台」、子テーマは「土台を壊さずに加えるカスタマイズ用の層」です。
| 項目 | 親テーマ | 子テーマ |
|---|---|---|
| 役割 | サイト全体の基本デザイン・機能を提供 | 親テーマを引き継いで一部を変更 |
| 単体利用 | できる | 基本的にできない |
| 更新対象 | テーマ開発者が配布する更新を適用 | 自分のカスタマイズを保持 |
| 編集の安全性 | 直接編集は非推奨 | カスタマイズに適している |
1-3. 子テーマで引き継がれるもの・引き継がれないもの
子テーマを有効化すると、基本的には親テーマのデザイン、テンプレート、機能を引き継ぎます。WordPress公式の解説でも、子テーマは親テーマのデザインや機能を含みつつ、親テーマのファイルを直接変更せずにカスタマイズできる仕組みとされています。
引き継がれる主なものは、次のとおりです。
親テーマの基本デザイン
親テーマのテンプレートファイル
親テーマの機能
親テーマが読み込むCSSやJavaScript
テーマ独自の設定項目
ただし、すべてが完全に同じ状態で引き継がれるとは限りません。テーマによっては、子テーマを有効化したタイミングで、カスタマイザー設定、メニュー位置、ウィジェット配置、ロゴ設定などを再確認する必要があります。
特に、テーマ側が「有効化中のテーマごとに設定を保存する」仕様になっている場合、子テーマに切り替えたあとに設定が消えたように見えることがあります。実際にはデータが消えたのではなく、子テーマ側で再設定が必要になっているケースもあります。
1-4. 子テーマを使うとWordPressの更新で何が変わるのか
子テーマを使っている場合でも、WordPress本体、親テーマ、プラグインの更新は通常どおり行います。変わるのは、親テーマを更新しても自分のカスタマイズを守りやすくなる点です。
親テーマの更新では、親テーマフォルダ内のファイルが新しいものに置き換わります。しかし、子テーマは別フォルダとして管理されているため、子テーマ側に書いたCSSやPHP、テンプレートファイルは基本的に残ります。
ただし、注意点もあります。親テーマの大きな仕様変更により、子テーマで上書きしているテンプレートが古くなったり、関数名やフックの変更によって一部のカスタマイズが動かなくなったりすることがあります。そのため、子テーマを使っていても、更新後の表示確認は必須です。
2. WordPressで子テーマが必要な理由
WordPress子テーマが必要とされる理由は、単に「カスタマイズできるから」ではありません。より重要なのは、安全に、継続的に、メンテナンスしやすくカスタマイズできるからです。
特にブログ、企業サイト、アフィリエイトサイト、店舗サイト、オウンドメディアなど、長く運用するサイトでは、子テーマの有無が将来の管理しやすさに大きく影響します。
2-1. 親テーマを直接編集するとアップデートで変更が消える
子テーマが必要な一番の理由は、親テーマを直接編集すると、アップデート時に変更内容が消える可能性があるためです。
たとえば、親テーマのstyle.cssに直接CSSを追加したとします。その後、テーマ開発者が新しいバージョンを配布し、WordPress管理画面からテーマを更新すると、親テーマのファイルが更新版に置き換わります。その結果、自分で追記したCSSが失われることがあります。
同じことは、functions.php、header.php、footer.php、single.phpなどでも起こります。特にPHPファイルを直接編集していた場合、変更が消えるだけでなく、どこを編集していたのか後から追跡しづらくなります。
子テーマを使えば、カスタマイズ内容を親テーマとは別に管理できるため、アップデート時の上書きリスクを減らせます。
2-2. CSS・functions.php・テンプレートを安全に編集できる
子テーマでは、主に次のようなカスタマイズができます。
CSSによるデザイン調整
functions.phpによる機能追加
テンプレートファイルの上書き
独自テンプレートの追加
ショートコードの追加
フックやフィルターを使った出力変更
たとえば、「見出しの余白を変えたい」「スマホ表示だけボタンサイズを変えたい」といった軽微な変更なら、子テーマのstyle.cssにCSSを追加します。
「投稿ページの下に独自の案内文を出したい」「特定のスクリプトを読み込みたい」といった場合は、子テーマのfunctions.phpにコードを追加します。
さらに、header.phpやfooter.phpなどを子テーマにコピーして編集すれば、親テーマのファイルを直接触らずにテンプレートを変更できます。
2-3. 不具合が起きても親テーマに戻しやすい
子テーマを使うメリットは、トラブル時に原因を切り分けやすい点にもあります。
たとえば、子テーマに追加したコードが原因で表示崩れが起きた場合、親テーマに一時的に切り替えれば、親テーマ側の問題なのか、子テーマ側の問題なのかを確認できます。
親テーマを直接編集していると、どの変更が原因なのか探すのに時間がかかります。しかし、子テーマであれば「自分が追加したファイルやコード」を中心に確認すればよいため、修正しやすくなります。
2-4. 長期運用するサイトほど子テーマが重要になる
短期間だけ使うテストサイトであれば、子テーマを作らなくても問題にならないことがあります。しかし、長期運用するサイトでは、テーマの更新、WordPress本体の更新、プラグインの更新が何度も発生します。
そのたびに親テーマへ直接加えた変更が消えたり、不具合が出たりすると、サイト管理の負担が大きくなります。
特に、以下のようなサイトでは子テーマの利用がおすすめです。
収益化しているブログ
企業サイト
店舗サイト
会員サイト
長期運用予定のメディア
複数人で管理しているサイト
コードを追加してカスタマイズしているサイト
子テーマを使うことで、カスタマイズ内容を整理しやすくなり、将来の保守性も高まります。
3. 子テーマが必要なケース・不要なケース
WordPress子テーマは便利ですが、すべてのサイトで必ず必要というわけではありません。子テーマを作るべきかどうかは、「どの程度カスタマイズするか」「どの方法で変更するか」によって変わります。
ここでは、子テーマが必要なケースと不要なケースを整理します。
3-1. 子テーマを作るべきケース
子テーマを作るべきなのは、親テーマのファイルに影響するカスタマイズを行う場合です。
具体的には、次のようなケースです。
style.cssに独自CSSを多く追加したいfunctions.phpにPHPコードを追加したいheader.phpやfooter.phpを編集したい投稿ページや固定ページのテンプレートを変更したい
テーマのフックやフィルターを使って機能を追加したい
親テーマのアップデート後もカスタマイズを残したい
複数サイトで同じカスタマイズを再利用したい
特に、PHPファイルを編集する場合は子テーマを使うのが基本です。親テーマのfunctions.phpへ直接コードを追記すると、更新時に消えるだけでなく、構文ミスによってサイト全体が表示されなくなるリスクもあります。
3-2. 子テーマが不要なケース
一方で、子テーマが不要なケースもあります。
たとえば、次のような場合です。
テーマの設定画面だけでデザインを調整する
WordPress標準のカスタマイザーだけで完結する
ブロックエディターでページを編集するだけ
追加CSSに数行だけCSSを書く
プラグイン設定だけで目的を達成できる
テーマファイルを一切編集しない
WordPress管理画面の「外観」やテーマ独自設定で色、フォント、レイアウト、ヘッダー、フッターなどを調整できる場合、子テーマを作らなくても十分なことがあります。
ただし、将来的にコード編集を行う可能性があるなら、早い段階で子テーマを用意しておくと安心です。
3-3. 追加CSSやプラグインだけで対応できるケース
ちょっとしたデザイン変更であれば、WordPressの「追加CSS」でも対応できます。
たとえば、以下のような変更です。
CSS.entry-title {
font-size: 28px;
}
.site-footer {
background: #f5f5f5;
}
数行から数十行程度のCSSで済むなら、追加CSSでも問題ありません。また、アクセス解析タグの設置、目次の表示、SEO設定、吹き出し、表作成などは、専用プラグインで対応したほうが管理しやすい場合もあります。
ただし、追加CSSが増えすぎると管理しづらくなります。どこに何を書いたのかわからなくなったり、テーマ変更時に整理が必要になったりします。CSSを本格的に管理したい場合は、子テーマのstyle.cssにまとめるほうが適しています。
3-4. ブロックテーマ・フルサイト編集では子テーマが必要か
WordPressには、従来のクラシックテーマに加えて、ブロックテーマがあります。ブロックテーマはWordPress 5.9以降で使える仕組みで、HTMLやtheme.jsonを中心に構成され、サイトエディターでサイト全体を編集できるテーマです。
ブロックテーマでは、サイトエディター上でヘッダー、フッター、テンプレート、スタイルを編集できます。そのため、軽微な変更であれば子テーマを作らずに対応できる場面が増えています。
ただし、以下のような場合はブロックテーマでも子テーマが有効です。
複数サイトで同じデザインを使い回したい
theme.jsonを管理したいテンプレートファイルをファイルとして保持したい
サイトエディターの変更をテーマ化したい
本格的なカスタマイズをバージョン管理したい
つまり、ブロックテーマでは「必ず子テーマが必要」というより、カスタマイズをどこで管理したいかによって判断します。管理画面だけで完結するなら不要、ファイルとして安全に管理したいなら子テーマを使う、という考え方がわかりやすいです。
4. WordPress子テーマを作る前に準備するもの
WordPress子テーマは比較的簡単に作れますが、事前準備をせずに作業すると、表示崩れやエラーが起きたときに復旧が難しくなります。
子テーマを作る前に、最低限次の準備をしておきましょう。
4-1. 親テーマの正式なテーマ名を確認する
子テーマを作るには、親テーマの正式なフォルダ名を確認する必要があります。
特に重要なのが、style.cssに記述するTemplateです。これは親テーマの表示名ではなく、通常はwp-content/themes内にある親テーマのフォルダ名を指定します。WordPress公式のLearn WordPressでも、Templateの値は親テーマのフォルダ名、つまりテーマのスラッグに一致させる必要があると説明されています。
たとえば、親テーマがTwenty Twenty-Fourの場合、フォルダ名は次のようになります。
twentytwentyfour
この場合、子テーマのstyle.cssには次のように書きます。
CSSTemplate: twentytwentyfour
親テーマ名が「Twenty Twenty-Four」だからといって、Template: Twenty Twenty-Fourと書くと、親テーマが見つからないエラーになる可能性があります。
4-2. バックアップを取る
子テーマ作成前には、必ずバックアップを取りましょう。
最低限バックアップしておきたいものは、次の3つです。
WordPressファイル一式
データベース
現在のテーマ設定
特に、すでに運営中のサイトで作業する場合は、バックアップなしでテーマを切り替えるのは危険です。子テーマを有効化しただけで大きな問題が起こることは多くありませんが、テーマ設定やウィジェット配置が変わって見える場合があります。
バックアップは、サーバーのバックアップ機能、WordPressバックアッププラグイン、手動ダウンロードなどで取得できます。
4-3. FTPソフトまたはサーバーのファイルマネージャーを用意する
子テーマを手動で作る場合、WordPressのテーマフォルダにファイルをアップロードする必要があります。
よく使われる方法は次の2つです。
FTPソフトを使う
レンタルサーバーのファイルマネージャーを使う
FTPソフトを使う場合は、FileZillaなどのツールでサーバーに接続し、wp-content/themesフォルダを開きます。
サーバーのファイルマネージャーを使う場合は、レンタルサーバーの管理画面から直接フォルダやファイルを作成できます。初心者の場合は、ファイルマネージャーのほうがわかりやすいこともあります。
4-4. テキストエディタを用意する
子テーマのstyle.cssやfunctions.phpを作成するには、テキストエディタが必要です。
Windowsのメモ帳でも作成はできますが、コード編集には次のようなエディタがおすすめです。
Visual Studio Code
Sublime Text
Atom系のコードエディタ
サーバー管理画面内のコードエディタ
コード編集では、全角スペースや不要な記号が混ざるとエラーの原因になります。特にfunctions.phpはPHPファイルなので、1文字のミスでサイトが表示されなくなることがあります。コードエディタを使うと、構文の見落としを減らせます。
4-5. 公式配布の子テーマがないか確認する
有料テーマや人気テーマの中には、開発元が公式の子テーマを配布しているものがあります。
たとえば、テーマ購入者向けページや公式マニュアルで「子テーマダウンロード」「Child Theme」などの名称で配布されている場合があります。
公式配布の子テーマがあるなら、基本的にはそれを使うのがおすすめです。親テーマの仕様に合わせて作られているため、手動で作るよりも失敗しにくいからです。
特に、SWELL、Cocoon、Lightning、AFFINGER、THE THOR、JIN、SANGOなどのテーマを使っている場合は、まず公式サイトやマニュアルで子テーマの有無を確認しましょう。
5. WordPress子テーマの作り方
ここからは、WordPress子テーマを手動で作る方法を解説します。
子テーマ作成の基本的な流れは、次のとおりです。
子テーマ用フォルダを作る
style.cssを作成するfunctions.phpを作成する必要に応じて
screenshot.pngを用意する子テーマフォルダをZIP化する
WordPress管理画面からアップロードする
5-1. 子テーマ用フォルダを作成する
まず、子テーマ用のフォルダを作成します。
フォルダ名は自由に決められますが、一般的には親テーマ名に-childを付けます。
例として、親テーマがtwentytwentyfourの場合は、次のようなフォルダ名にします。
twentytwentyfour-child
FTPやサーバーのファイルマネージャーで作業する場合は、以下の場所に作成します。
wp-content/themes/twentytwentyfour-child
ローカルPC上で作成してからZIP化し、WordPress管理画面からアップロードしても問題ありません。
5-2. style.cssを作成して必要情報を記述する
次に、子テーマフォルダの中にstyle.cssを作成します。
style.cssは、子テーマをWordPressに認識させるために必要な重要ファイルです。WordPress公式ドキュメントでも、子テーマにはstyle.cssが必要で、ファイルヘッダーを記述すると説明されています。
基本形は次のとおりです。
CSS/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://example.com/
Description: Twenty Twenty-Fourの子テーマです。
Author: Your Name
Author URI: https://example.com/
Template: twentytwentyfour
Version: 1.0.0
Text Domain: twentytwentyfour-child
*/
特に重要なのは、次の2つです。
CSSTheme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Theme Nameは子テーマの名前です。WordPress管理画面のテーマ一覧に表示されます。
Templateは親テーマのフォルダ名です。ここを間違えると、子テーマが親テーマを認識できません。
5-3. functions.phpを作成して親テーマのCSSを読み込む
次に、子テーマフォルダ内にfunctions.phpを作成します。
functions.phpは、CSSの読み込みや機能追加に使うファイルです。子テーマのfunctions.phpは親テーマのfunctions.phpを上書きするのではなく、親テーマのfunctions.phpとは別に読み込まれます。公式ドキュメントでも、子テーマのfunctions.phpは親テーマのものを置き換えるのではなく、両方が読み込まれると説明されています。
基本的な記述例は次のとおりです。
PHP<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_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' ),
wp_get_theme()->get( 'Version' )
);
}
このコードでは、親テーマのstyle.cssを先に読み込み、その後に子テーマのstyle.cssを読み込んでいます。
ただし、テーマによっては親テーマ側ですでに子テーマのCSSを読み込む設計になっている場合があります。その場合、同じCSSを二重に読み込む必要はありません。親テーマのマニュアルに子テーマ用の記述例がある場合は、そちらを優先してください。
また、functions.phpの最後に閉じタグ?>は基本的に書かないほうが安全です。余計な空白や改行が出力され、エラーの原因になることがあるためです。
5-4. screenshot.pngを用意する
screenshot.pngは、WordPress管理画面のテーマ一覧に表示される画像です。必須ではありませんが、用意しておくと管理しやすくなります。
ファイル名は次のようにします。
screenshot.png
設置場所は、子テーマフォルダの直下です。
twentytwentyfour-child/screenshot.png
画像がなくても子テーマは動作しますが、テーマ一覧で見分けにくくなります。複数テーマを管理している場合は、簡単な画像でもよいので用意しておくと便利です。
5-5. 子テーマフォルダをZIP化する
WordPress管理画面から子テーマをアップロードする場合は、作成した子テーマフォルダをZIP化します。
フォルダ構成は次のようになっていれば問題ありません。
twentytwentyfour-child
├── style.css
├── functions.php
└── screenshot.png
ZIPファイルを作るときは、フォルダごと圧縮します。style.cssやfunctions.phpだけを直接ZIPに入れるのではなく、子テーマフォルダの中にファイルが入っている状態にしてください。
正しいZIP構成は次の形です。
twentytwentyfour-child.zip
└── twentytwentyfour-child
├── style.css
├── functions.php
└── screenshot.png
5-6. WordPress管理画面からアップロードする
ZIP化した子テーマは、WordPress管理画面からアップロードできます。
手順は次のとおりです。
WordPress管理画面にログインする
「外観」→「テーマ」を開く
「新しいテーマを追加」をクリックする
「テーマのアップロード」をクリックする
作成したZIPファイルを選択する
「今すぐインストール」をクリックする
インストール後、すぐに有効化できます。ただし、本番サイトで作業する場合は、有効化前にバックアップがあることを確認しておきましょう。
6. 子テーマを有効化する手順
子テーマを作成・アップロードしたら、WordPress管理画面から有効化します。子テーマの有効化自体は簡単ですが、有効化後の確認作業がとても重要です。
6-1. 外観からテーマ画面を開く
まず、WordPress管理画面にログインし、左側メニューから「外観」→「テーマ」を開きます。
ここには、現在インストールされているテーマが一覧表示されます。正しく子テーマが作成されていれば、テーマ一覧に子テーマ名が表示されます。
表示されない場合は、次の点を確認してください。
子テーマフォルダが正しい場所にあるか
style.cssが子テーマフォルダ直下にあるかstyle.cssのヘッダー情報にミスがないかTemplateに親テーマのフォルダ名を書いているかZIPファイルの階層が深くなりすぎていないか
6-2. 作成した子テーマをインストールする
管理画面からアップロードする場合は、「新しいテーマを追加」→「テーマのアップロード」からZIPファイルを選択し、インストールします。
FTPでアップロードする場合は、子テーマフォルダを次の場所に設置します。
wp-content/themes/
設置後、WordPress管理画面の「外観」→「テーマ」に戻ると、子テーマが表示されます。
6-3. 子テーマを有効化する
子テーマが表示されたら、「有効化」をクリックします。
子テーマを有効化すると、WordPressは子テーマを現在のテーマとして扱います。ただし、見た目や機能の多くは親テーマから引き継がれます。
有効化後にサイトを開き、まずトップページ、投稿ページ、固定ページ、カテゴリー一覧、問い合わせページなど、主要なページを確認しましょう。
6-4. サイトの表示崩れがないか確認する
子テーマを有効化したら、必ず表示確認を行います。
確認すべきポイントは次のとおりです。
ヘッダーが崩れていないか
グローバルメニューが表示されているか
トップページのレイアウトが維持されているか
投稿ページの本文幅や装飾が崩れていないか
サイドバーやフッターが正しく表示されているか
スマホ表示に問題がないか
画像やアイコンが消えていないか
CSSが二重読み込みされていないか
特に、親テーマのCSSが正しく読み込まれていない場合、サイト全体のデザインが大きく崩れます。その場合は、functions.phpのCSS読み込みコードを見直してください。
6-5. カスタマイザー・メニュー・ウィジェットの設定を確認する
子テーマを有効化したあと、カスタマイザー、メニュー、ウィジェットの設定が変わって見えることがあります。
確認する場所は次のとおりです。
「外観」→「カスタマイズ」
「外観」→「メニュー」
「外観」→「ウィジェット」
テーマ独自の設定画面
サイトロゴ設定
トップページ設定
ヘッダー・フッター設定
メニューが表示されない場合は、メニューの「表示位置」が外れている可能性があります。ウィジェットが消えたように見える場合は、「使用停止中のウィジェット」などに移動していないか確認しましょう。
7. 子テーマでできる主なカスタマイズ
WordPress子テーマでは、デザイン変更から機能追加、テンプレートの上書きまで幅広いカスタマイズができます。
ただし、何でも子テーマで行えばよいわけではありません。目的に応じて、CSS、functions.php、テンプレート、プラグインを使い分けることが大切です。
7-1. style.cssでデザインを変更する
子テーマのstyle.cssでは、サイトの見た目を変更できます。
たとえば、見出しのデザインを変更する場合は、次のように記述します。
CSSh2 {
border-left: 5px solid #333;
padding-left: 12px;
}
.entry-content p {
line-height: 1.9;
}
.site-header {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
子テーマのCSSは、親テーマのCSSより後に読み込まれるように設定すれば、親テーマのデザインを上書きできます。
よくあるCSSカスタマイズには、次のようなものがあります。
見出しデザインの変更
ボタンデザインの変更
文字サイズや行間の調整
余白の調整
ヘッダー・フッターの色変更
スマホ表示の調整
サイドバーのデザイン変更
CSSだけで済む変更なら、比較的安全にカスタマイズできます。
7-2. functions.phpで機能を追加する
子テーマのfunctions.phpでは、WordPressやテーマに機能を追加できます。
たとえば、ショートコードを追加する場合は、次のように書けます。
PHP<?php
function my_notice_shortcode() {
return '<div class="my-notice">お知らせ内容をここに表示します。</div>';
}
add_shortcode( 'notice', 'my_notice_shortcode' );
投稿内で次のように入力すると、ショートコードが表示されます。
[notice]
ほかにも、functions.phpでは次のようなカスタマイズができます。
CSSやJavaScriptの読み込み
ショートコード追加
ウィジェットエリア追加
アイキャッチ画像サイズ追加
管理画面の調整
独自関数の追加
フックやフィルターによる出力変更
ただし、functions.phpはミスがあるとサイト全体に影響します。編集前に必ずバックアップを取り、可能であればテスト環境で確認してから本番に反映しましょう。
7-3. header.php・footer.phpなどのテンプレートを上書きする
子テーマでは、親テーマのテンプレートファイルを上書きできます。
たとえば、親テーマにあるfooter.phpを変更したい場合、親テーマのfooter.phpを子テーマフォルダにコピーして編集します。
親テーマ/footer.php
↓ コピー
子テーマ/footer.php
WordPressは、子テーマ内に同じ名前のテンプレートファイルがある場合、子テーマ側のファイルを優先して読み込みます。
よく上書きされるファイルには、次のようなものがあります。
header.phpfooter.phpsingle.phppage.phparchive.phpcategory.phpsearch.php404.php
ただし、テンプレートファイルの上書きはCSS変更よりも影響範囲が大きくなります。親テーマの更新でテンプレート構造が変わった場合、子テーマ側の古いテンプレートが原因で不具合が起きることもあります。
7-4. 固定ページ・投稿ページのレイアウトを変更する
子テーマでは、投稿ページや固定ページのレイアウトも変更できます。
たとえば、投稿ページのレイアウトを変更したい場合は、親テーマのsingle.phpを子テーマにコピーして編集します。固定ページならpage.phpが対象になることが多いです。
さらに、特定の固定ページだけに専用テンプレートを使いたい場合は、カスタムページテンプレートを作成できます。
PHP<?php
/*
Template Name: LP用テンプレート
*/
get_header();
?>
<main class="lp-page">
<h1><?php the_title(); ?></h1>
<div class="lp-content">
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile;
?>
</div>
</main>
<?php get_footer(); ?>
このファイルを子テーマ内に保存すれば、固定ページ編集画面からテンプレートとして選択できるようになります。
7-5. 子テーマで編集してはいけないファイル・注意点
子テーマは便利ですが、何でも編集してよいわけではありません。
特に注意したいのは、次のような作業です。
親テーマの
functions.phpを丸ごとコピーする親テーマの全ファイルを子テーマにコピーする
WordPress本体のファイルを編集する
プラグイン本体のファイルを直接編集する
よく理解しないままPHPコードを貼り付ける
古いテンプレートを長期間放置する
公式ドキュメントでも、親テーマのfunctions.phpを子テーマへ直接コピーすると、関数名の重複などで致命的なエラーにつながる可能性があると説明されています。
子テーマに置くべきなのは、「変更したいファイル」や「追加したいコード」だけです。親テーマ全体をコピーしてしまうと、親テーマ更新のメリットが薄れ、管理も難しくなります。
8. プラグインで子テーマを作る方法
WordPress子テーマは手動でも作れますが、初心者にはプラグインを使う方法もあります。
プラグインを使えば、親テーマの情報を自動で取得し、必要なファイルを作成してくれるため、Templateの書き間違いやフォルダ構成のミスを減らせます。
8-1. 子テーマ作成プラグインを使うメリット
子テーマ作成プラグインを使うメリットは、作業が簡単になることです。
主なメリットは次のとおりです。
管理画面から子テーマを作れる
FTP操作が不要な場合がある
親テーマのフォルダ名を自動取得できる
style.cssやfunctions.phpを自動生成できる初心者でもミスを減らせる
作成後すぐに有効化しやすい
特に、FTP操作に慣れていない人や、ファイル作成に不安がある人には便利です。
8-2. プラグインで子テーマを作る基本手順
プラグインによって画面は異なりますが、基本的な流れは次のとおりです。
WordPress管理画面にログインする
「プラグイン」→「新規追加」を開く
子テーマ作成プラグインを検索する
プラグインをインストールして有効化する
親テーマを選択する
子テーマ名を入力する
子テーマを作成する
作成された子テーマを有効化する
表示確認を行う
作成後は、子テーマが正しく有効化されているか、デザイン崩れがないかを確認します。
また、子テーマ作成後にプラグインが不要になるタイプであれば、無効化・削除しても問題ない場合があります。ただし、プラグインの仕様によって異なるため、説明を確認してから対応しましょう。
8-3. 手動作成とプラグイン作成の違い
手動作成とプラグイン作成には、それぞれメリットがあります。
| 方法 | メリット | デメリット |
|---|---|---|
| 手動作成 | 構造を理解しやすい、不要な設定が少ない | FTPやコード編集の知識が必要 |
| プラグイン作成 | 初心者でも簡単、ミスが少ない | プラグインの仕様に依存する |
手動作成は、WordPressの仕組みを理解したい人に向いています。一方、プラグイン作成は、できるだけ短時間で安全に子テーマを作りたい人に向いています。
どちらの方法でも、最終的に作られる子テーマの基本構造は大きく変わりません。重要なのは、親テーマを直接編集しない状態を作ることです。
8-4. 初心者はどちらの方法を選ぶべきか
初心者の場合、まずは公式配布の子テーマがあるか確認しましょう。公式の子テーマがあるなら、それを使うのが最も簡単で安全です。
公式の子テーマがない場合は、次の基準で選ぶとよいでしょう。
FTPやコード編集に抵抗がある人:プラグイン作成
WordPressの仕組みを学びたい人:手動作成
有料テーマを使っている人:テーマ公式マニュアルを優先
本番サイトで作業する人:バックアップ後に慎重に作業
初心者にとって大切なのは、完璧に手動で作ることではなく、親テーマを直接編集しない運用に切り替えることです。
9. WordPress子テーマでよくある失敗と対処法
子テーマ作成では、いくつか定番の失敗があります。原因を知っておけば、トラブルが起きても落ち着いて対処できます。
9-1. 子テーマを有効化したらデザインが崩れる
子テーマを有効化した直後にデザインが崩れる場合、親テーマのCSSが正しく読み込まれていない可能性があります。
確認するポイントは次のとおりです。
functions.phpで親テーマのCSSを読み込んでいるかCSSの読み込み順が正しいか
親テーマ側で独自のCSS読み込み処理をしていないか
style.cssのTemplateが正しいかキャッシュが残っていないか
まずはブラウザキャッシュ、WordPressキャッシュ、サーバーキャッシュ、CDNキャッシュを削除して確認しましょう。それでも崩れる場合は、functions.phpの記述を見直します。
9-2. style.cssが反映されない
子テーマのstyle.cssにCSSを書いたのに反映されない場合、次の原因が考えられます。
子テーマの
style.cssが読み込まれていないCSSの優先順位が親テーマに負けている
セレクタが間違っている
キャッシュが残っている
別のCSSに上書きされている
メディアクエリの条件が合っていない
まず、ブラウザの検証ツールで子テーマのstyle.cssが読み込まれているか確認します。読み込まれていない場合は、functions.phpのCSS読み込み処理を確認してください。
読み込まれているのに反映されない場合は、CSSの指定をより具体的にする必要があります。
CSSbody .entry-content h2 {
color: #333;
}
ただし、安易に!importantを多用すると後から管理しづらくなるため、必要最小限にしましょう。
9-3. functions.phpのエラーで画面が真っ白になる
functions.phpの編集ミスで、サイトが真っ白になることがあります。これはPHPの構文エラーや関数名の重複などが原因です。
よくある原因は次のとおりです。
セミコロン
;の付け忘れ括弧
{}の閉じ忘れ関数名の重複
全角スペースの混入
PHP開始タグ
<?phpの前に空白がある存在しない関数を呼び出している
親テーマの
functions.phpを丸ごとコピーしている
画面が真っ白になった場合は、FTPまたはサーバーのファイルマネージャーから子テーマのfunctions.phpを編集し、直前に追加したコードを削除します。
管理画面に入れない場合でも、サーバー上のファイルを直接修正すれば復旧できることがあります。
9-4. 親テーマが見つからないと表示される
「親テーマが見つかりません」「The parent theme is missing」のような表示が出る場合、style.cssのTemplate指定が間違っている可能性が高いです。
確認すべきポイントは次のとおりです。
親テーマがインストールされているか
親テーマのフォルダ名を正しく書いているか
大文字・小文字を間違えていないか
スペースや全角文字が入っていないか
子テーマの
style.cssが正しい場所にあるか
たとえば、親テーマのフォルダ名がlightningなら、次のように書きます。
CSSTemplate: lightning
テーマ名の表示が「Lightning」でも、Templateにはフォルダ名を書く点に注意してください。
9-5. カスタマイザーの設定が消えたように見える
子テーマを有効化したあと、ロゴ、メニュー、ウィジェット、色設定などが消えたように見えることがあります。
これは、子テーマに切り替えたことで、テーマ設定の紐づきが変わったように見えているケースがあります。
対処法は次のとおりです。
カスタマイザー設定を再確認する
メニューの表示位置を再設定する
ウィジェットの配置を確認する
テーマ独自設定を見直す
親テーマに戻して設定が残っているか確認する
バックアップから設定内容を確認する
多くの場合、投稿や固定ページの本文が消えたわけではありません。テーマの表示設定が変わっているだけのことが多いので、落ち着いて確認しましょう。
9-6. 子テーマを削除・無効化したいときの対応
子テーマを使わなくなった場合は、親テーマに切り替えることで子テーマを無効化できます。
手順は次のとおりです。
「外観」→「テーマ」を開く
親テーマを有効化する
サイト表示を確認する
問題がなければ子テーマを削除する
ただし、子テーマにCSSやPHP、テンプレートのカスタマイズを追加している場合、親テーマに戻すとその変更は反映されなくなります。
削除前には、子テーマ内のファイルを必ずバックアップしておきましょう。後から「やっぱり必要だった」となっても、バックアップがあれば復元できます。
10. 子テーマを安全に運用するための注意点
子テーマは安全なカスタマイズ方法ですが、使い方を間違えるとトラブルの原因になります。ここでは、子テーマを長く安全に運用するための注意点を紹介します。
10-1. 編集前に必ずバックアップを取る
子テーマを編集する前には、必ずバックアップを取りましょう。
特に、functions.phpやテンプレートファイルを編集する場合は、1文字のミスでサイト全体に影響することがあります。
最低限、編集前に次のファイルを保存しておくと安心です。
子テーマの
style.css子テーマの
functions.php編集対象のテンプレートファイル
WordPressデータベース
テーマ設定
小さなCSS変更だけなら大きなトラブルにはなりにくいですが、PHP編集ではバックアップが重要です。
10-2. 親テーマ本体は直接編集しない
子テーマを作ったあとも、親テーマ本体を直接編集してしまうと意味がありません。
カスタマイズは、原則として子テーマ側に記述します。
CSS変更:子テーマの
style.css機能追加:子テーマの
functions.phpテンプレート変更:子テーマにコピーして編集
大規模機能:専用プラグイン化も検討
親テーマのファイルを直接編集すると、アップデートで変更が消える可能性があります。子テーマを使う目的を忘れず、親テーマはなるべく元の状態のまま保ちましょう。
10-3. WordPress・テーマ・プラグイン更新前に表示確認する
子テーマを使っていても、更新前後の確認は必要です。
特に、次のような更新の前後には注意しましょう。
WordPress本体のメジャーアップデート
親テーマの大きなアップデート
ページビルダー系プラグインの更新
ブロックエディター関連の更新
PHPバージョン変更
WooCommerceなど大規模プラグインの更新
更新前にバックアップを取り、更新後にはトップページ、投稿ページ、固定ページ、フォーム、購入導線、スマホ表示を確認しましょう。
10-4. コード編集はテスト環境で行う
本番サイトで直接functions.phpやテンプレートを編集するのは避けましょう。
可能であれば、次のようなテスト環境を用意します。
ローカル環境
ステージング環境
サーバーのテストサイト
複製した検証用サイト
テスト環境で表示確認をしてから本番に反映すれば、サイト停止や表示崩れのリスクを減らせます。
特に、企業サイトや収益化サイトでは、数分の表示崩れでも機会損失につながることがあります。
10-5. 不要なカスタマイズを増やしすぎない
子テーマは便利ですが、不要なカスタマイズを増やしすぎると管理が難しくなります。
たとえば、古いCSSが残ったままになっていたり、使っていない関数がfunctions.phpに残っていたりすると、後から不具合の原因を探すのが大変です。
子テーマを管理しやすくするには、次の点を意識しましょう。
何のためのコードかコメントを書く
使わないCSSや関数は削除する
テンプレートの上書きは必要最小限にする
変更履歴をメモする
大きな機能はプラグイン化も検討する
子テーマは「何でも詰め込む場所」ではなく、「テーマに関係するカスタマイズを整理して管理する場所」と考えると運用しやすくなります。
11. WordPress子テーマに関するよくある質問
最後に、WordPress子テーマについてよくある質問に回答します。
11-1. 子テーマは後から作っても大丈夫?
はい、子テーマは後から作っても大丈夫です。
ただし、すでに親テーマのカスタマイザー設定やウィジェット設定を作り込んでいる場合、子テーマに切り替えたあとに一部設定を再確認する必要があります。
また、すでに親テーマのファイルを直接編集している場合は、その変更内容を子テーマへ移す作業が必要です。親テーマに直接加えた変更をそのまま放置すると、親テーマ更新時に消えてしまう可能性があります。
11-2. すでに親テーマを編集している場合はどうすればいい?
すでに親テーマを直接編集している場合は、まず編集箇所を洗い出しましょう。
確認するファイルは、主に次のとおりです。
style.cssfunctions.phpheader.phpfooter.phpsingle.phppage.phpその他編集したテンプレートファイル
そのうえで、CSSは子テーマのstyle.cssへ、追加関数は子テーマのfunctions.phpへ、テンプレート変更は子テーマ側の同名ファイルへ移します。
ただし、親テーマのfunctions.phpを丸ごと子テーマへコピーするのは避けてください。関数の重複でエラーが起きる可能性があります。必要な追加コードだけを移すのが基本です。
11-3. 有料テーマでも子テーマは必要?
有料テーマでも、コードを編集するなら子テーマは必要です。
有料テーマはアップデート頻度が高く、機能改善や不具合修正も行われることが多いため、親テーマを安全に更新できる状態にしておくことが重要です。
ただし、有料テーマの多くは独自の設定画面が充実しているため、管理画面だけでカスタマイズが完結する場合もあります。その場合、必ずしも子テーマを使う必要はありません。
判断基準はシンプルです。
コードを編集する:子テーマ推奨
設定画面だけで変更する:子テーマなしでも可
公式子テーマが配布されている:公式子テーマを使うのがおすすめ
11-4. Cocoon・SWELL・Lightningなどのテーマでも子テーマは使うべき?
Cocoon、SWELL、Lightningなどの人気テーマでも、コードを編集するなら子テーマを使うべきです。
これらのテーマはアップデートされることがあるため、親テーマを直接編集すると更新時にカスタマイズが消える可能性があります。
一方で、テーマ独自設定やカスタマイザーだけで完結する範囲なら、子テーマがなくても運用できます。
特に、以下のような作業をする場合は子テーマを使うと安心です。
独自CSSを本格的に追加する
PHPコードを追加する
テンプレートを変更する
独自パーツを作成する
広告や計測タグをコードで管理する
テーマごとに推奨される子テーマの作り方が異なる場合があるため、必ず公式マニュアルを確認しましょう。
11-5. 子テーマを使うとサイト表示速度は遅くなる?
子テーマを使うだけで、サイト表示速度が大きく遅くなることは通常ありません。
ただし、子テーマに大量のCSSやJavaScriptを追加したり、重い処理をfunctions.phpに書いたりすると、表示速度に影響することがあります。
速度に影響しやすいのは、子テーマそのものではなく、追加したカスタマイズ内容です。
表示速度を保つには、次の点を意識しましょう。
不要なCSSを書かない
JavaScriptを増やしすぎない
外部ファイルを読み込みすぎない
重いPHP処理を避ける
画像やフォントの読み込みを最適化する
キャッシュプラグインを適切に使う
適切に作られた子テーマであれば、表示速度への影響は小さいと考えてよいでしょう。
11-6. 子テーマを有効化しても親テーマは削除してよい?
いいえ、子テーマを使っている場合、親テーマは削除してはいけません。
子テーマは親テーマを前提に動きます。親テーマを削除すると、子テーマは必要なテンプレートや機能を読み込めなくなり、サイトが正常に表示されなくなる可能性があります。
削除してよいのは、使っていない別テーマです。現在の子テーマが依存している親テーマは、必ずインストールしたままにしてください。
また、親テーマは削除せず、定期的に更新することも大切です。子テーマを使う目的は、親テーマを安全に更新しながらカスタマイズを維持することです。
まとめ
WordPress子テーマとは、親テーマを直接編集せずに、安全にカスタマイズするためのテーマです。親テーマのデザインや機能を引き継ぎながら、CSS、functions.php、テンプレートファイルなどを子テーマ側で変更できます。
子テーマが特に必要なのは、次のような場合です。
親テーマを直接編集せずにカスタマイズしたい
テーマ更新後も変更内容を残したい
CSSやPHPを追加したい
テンプレートを上書きしたい
長期運用するサイトを安全に管理したい
一方で、テーマ設定、カスタマイザー、追加CSS、プラグインだけで対応できる軽微な変更なら、子テーマが不要な場合もあります。
子テーマを作る際は、親テーマのフォルダ名を確認し、style.cssのTemplateを正しく記述することが重要です。functions.phpでは親テーマと子テーマのCSS読み込み順に注意し、PHPコードを編集する前には必ずバックアップを取りましょう。
WordPress子テーマを正しく使えば、親テーマのアップデートに強く、長期的に管理しやすいサイト運用ができます。これからWordPressを本格的にカスタマイズするなら、早めに子テーマを導入し、安全な編集環境を整えておきましょう。

