



WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc




WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp









WordPress子テーマは、親テーマの機能やデザインを引き継ぎながら独自のカスタマイズを安全に追加できる仕組みで、親テーマを更新してもカスタマイズが消えません。必要なファイルはstyle.cssとfunctions.phpの2つだけで、手順通りに作れば初心者でも10分ほどで作成できます。最重要ポイントはstyle.cssのTemplateの値を親テーマのフォルダ名と正確に一致させることで、CSSの追記・functions.phpへの機能追加・テンプレートファイルの上書きの3つが主な活用場面です。
生徒WordPressのテーマをカスタマイズしたら、テーマを更新したときに全部消えてしまいました…。子テーマってよく聞くけど、どうやって作ればいいんですか?
ペン博士それはつらかったね!この記事では、子テーマの仕組みから作成手順、実際の使いどころまでをステップごとに解説するよ。必要なファイルは2つだけ、初心者でも10分で作れるから安心して!
WordPressでサイトをカスタマイズする際、テーマのファイルを直接編集してしまうと、テーマ更新のたびに変更内容がすべて上書きされてしまいます。この問題を根本から解決するのが「子テーマ(Child Theme)」です。子テーマを使えば、親テーマを更新しても自分のカスタマイズは安全に保持されます。本記事では、子テーマの仕組みから作成手順、実践的な活用方法まで、初心者でもすぐに実装できるよう丁寧に解説します。
子テーマとは、既存のテーマ(親テーマ)の機能やデザインを引き継ぎながら、独自のカスタマイズを安全に追加できる仕組みです。親テーマのファイルには一切手を加えないため、テーマ更新によってカスタマイズが消える心配がありません。
WordPressがテンプレートファイルを読み込む際、まず子テーマのフォルダを検索し、該当ファイルがなければ親テーマのファイルを使用します。この「上書き」の仕組みを活用することで、必要な箇所だけを選択的にカスタマイズできます。
子テーマの作成に必要なファイルは、「style.css」と「functions.php」の2つだけです。難しいプログラミング知識は不要で、テキストエディタと FTPクライアント(またはサーバーのファイルマネージャー)があれば誰でも作れます。以下の手順に沿って進めてみましょう。
まず、WordPressのテーマフォルダ(wp-content/themes/)内に新しいフォルダを作成します。フォルダ名はわかりやすく命名しましょう。慣例として親テーマ名の末尾に「-child」を付けます。
twentytwentyfive-childswell-child作成したフォルダ内に「style.css」というファイルを作成し、以下の内容を記述します。このヘッダーコメントがWordPressに「これは子テーマです」と伝える役割を持っています。
/*
Theme Name: TwentyTwentyFive Child
Template: twentytwentyfive
Description: TwentyTwentyFiveの子テーマ
Author: あなたの名前
Version: 1.0.0
*/「Template」の値は親テーマのフォルダ名と完全に一致している必要があります。ここが間違っていると子テーマが正しく機能しません。親テーマのフォルダ名はFTPや管理画面の「テーマの編集」から確認できます。
同じフォルダ内に「functions.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'
);
}
この記述により、親テーマのCSSが正しく読み込まれます。かつては@importを使う方法が一般的でしたが、現在はfunctions.phpからwp_enqueue_styleで読み込む方法が推奨されています。パフォーマンス面でも優れています。
2つのファイルをサーバーにアップロードしたら、WordPress管理画面の「外観 → テーマ」を開きます。作成した子テーマが一覧に表示されているはずです。「有効化」ボタンをクリックすれば設定完了です。サイトが正常に表示されることを確認してください。
子テーマを有効化したら、実際にどんなカスタマイズに使えるのかを見ていきましょう。大きく分けると「CSSによるデザイン変更」「functions.phpによる機能追加」「テンプレートファイルの上書き」の3つが主な活用場面です。
子テーマのstyle.cssに追記するだけで、親テーマのデザインを自由に変更できます。フォントサイズの変更、色の調整、余白の修正など、細かなデザイン調整に活用してください。
/* 見出しの色を変更 */
h2 {
color: #2c3e50;
border-left: 4px solid #ffbf00;
padding-left: 12px;
}
/* フッターの背景色を変更 */
.site-footer {
background-color: #f8f9fa;
}子テーマのCSSは親テーマの後に読み込まれるため、同じセレクタに同じプロパティを書くだけで親テーマのスタイルを上書きできます。わざわざ「!important」を多用する必要はありません。
子テーマのfunctions.phpは親テーマのfunctions.phpよりも先に読み込まれます。フックやフィルターを使って既存の機能を拡張したり、新しいウィジェットエリアを追加したりするのに最適です。
WordPressは子テーマのフォルダに同名のテンプレートファイルがあれば、親テーマのファイルより優先して読み込みます。たとえば親テーマの「single.php」(個別投稿ページ)を変更したい場合は、子テーマフォルダに「single.php」をコピーして編集するだけです。
| 親テーマファイル | 用途 | 子テーマで上書きする場合 |
|---|---|---|
| single.php | 個別投稿ページ | 記事レイアウトを大幅変更したいとき |
| page.php | 固定ページ | ランディングページ専用レイアウトを作るとき |
| header.php | ヘッダー | ナビゲーション構造を変更したいとき |
| footer.php | フッター | コピーライト表記や構成を変更したいとき |
| functions.php | 機能定義 | 上書きではなく追記で機能を拡張 |
functions.phpだけは「上書き」ではなく「追記」で機能が拡張される点に注意してください。子テーマと親テーマ両方のfunctions.phpが読み込まれます。
子テーマは万能ですが、すべての場面で必要というわけではありません。状況に応じて正しく判断することが大切です。
SWELLやCocoon、Lightningなど、日本語対応の人気WordPressテーマを使用している場合も、基本的な子テーマの作り方は同じです。ただし、一部のテーマは公式が子テーマのひな形を配布していることがあるため、まず公式ドキュメントを確認するのがベストプラクティスです。
WordPress子テーマは、テーマ更新に強い安全なカスタマイズ環境を手軽に構築できる仕組みです。必要なファイルはstyle.cssとfunctions.phpの2つだけで、手順通りに作れば10分もかかりません。親テーマを直接編集する習慣があるなら、今すぐ子テーマに切り替えることを強くおすすめします。
・ポイント1:子テーマはstyle.cssとfunctions.phpの2ファイルで作成でき、Templateの値を親テーマフォルダ名と一致させることが最重要
・ポイント2:CSSの追記・functions.phpへの機能追加・テンプレートファイルの上書きの3つが主な活用場面
・ポイント3:SWELLやCocoonなど人気テーマは公式子テーマのひな形が配布されているため、公式ドキュメントを最初に確認するのがベスト
子テーマを正しく活用することで、安心してテーマ更新を続けながら、自分だけのオリジナルサイトを育てていけます。今日から子テーマを使ったカスタマイズを始めてみましょう!
A. 既存のテーマ(親テーマ)の機能やデザインを引き継ぎながら、独自のカスタマイズを安全に追加できる仕組みです。WordPressはテンプレート読み込み時にまず子テーマのフォルダを検索し、該当ファイルがなければ親テーマのファイルを使う「上書き」の仕組みで動きます。親テーマに手を加えないため、テーマ更新でカスタマイズが消える心配がありません。
A. style.cssとfunctions.phpの2つだけです。style.cssにはヘッダーコメントで子テーマであることを示し、Templateに親テーマのフォルダ名を正確に記述します。functions.phpにはwp_enqueue_styleで親テーマのスタイルシートを読み込む処理を記述します。
A. Templateの値が親テーマのフォルダ名と一致していない(大文字・小文字の違いでも機能しない)、functions.phpの文法エラーで有効化後にサイトが真っ白になる、ブラウザキャッシュでスタイルが反映されない、wp_enqueue_styleの記述ミスで親テーマのCSSが読み込まれない、といったミスが挙げられます。
A. あります。カスタマイザーやブロックエディタだけで完結する変更(データベースに保存されるため更新に強い)、独自テーマをゼロから開発している場合、プラグイン(Additional CSSやSEOプラグイン)で対応できるカスタマイズは、子テーマが不要です。
A. SWELLやCocoonなど人気テーマは公式が子テーマのひな形を配布していることが多いため、まず公式ドキュメントを確認してひな形を利用するのが確実です。テーマオプションの設定はデータベース保存のため子テーマ有効化後もそのまま引き継がれます。Cocoonではスキン機能と子テーマCSSが競合する場合、詳細度を上げて対応します。

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。
会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう!
WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。
公式サイト より
今すぐ
無料カウンセリング
を予約!