WithCodeMedia-1-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
previous arrowprevious arrow
next arrownext arrow

WordPress子テーマの作り方と使いどころ|テーマ更新に強い安全なカスタマイズ手順

目次

この記事の結論

WordPress子テーマは、親テーマの機能やデザインを引き継ぎながら独自のカスタマイズを安全に追加できる仕組みで、親テーマを更新してもカスタマイズが消えません。必要なファイルはstyle.cssとfunctions.phpの2つだけで、手順通りに作れば初心者でも10分ほどで作成できます。最重要ポイントはstyle.cssのTemplateの値を親テーマのフォルダ名と正確に一致させることで、CSSの追記・functions.phpへの機能追加・テンプレートファイルの上書きの3つが主な活用場面です。

生徒

WordPressのテーマをカスタマイズしたら、テーマを更新したときに全部消えてしまいました…。子テーマってよく聞くけど、どうやって作ればいいんですか?

ペン博士

それはつらかったね!この記事では、子テーマの仕組みから作成手順、実際の使いどころまでをステップごとに解説するよ。必要なファイルは2つだけ、初心者でも10分で作れるから安心して!

WordPressでサイトをカスタマイズする際、テーマのファイルを直接編集してしまうと、テーマ更新のたびに変更内容がすべて上書きされてしまいます。この問題を根本から解決するのが「子テーマ(Child Theme)」です。子テーマを使えば、親テーマを更新しても自分のカスタマイズは安全に保持されます。本記事では、子テーマの仕組みから作成手順、実践的な活用方法まで、初心者でもすぐに実装できるよう丁寧に解説します。


WordPress子テーマとは?親テーマとの違いを理解しよう

子テーマとは、既存のテーマ(親テーマ)の機能やデザインを引き継ぎながら、独自のカスタマイズを安全に追加できる仕組みです。親テーマのファイルには一切手を加えないため、テーマ更新によってカスタマイズが消える心配がありません。

WordPressがテンプレートファイルを読み込む際、まず子テーマのフォルダを検索し、該当ファイルがなければ親テーマのファイルを使用します。この「上書き」の仕組みを活用することで、必要な箇所だけを選択的にカスタマイズできます。

親テーマを直接編集するリスク

  • テーマ更新時の上書き:テーマ開発者がアップデートを配信すると、直接編集した内容がすべて消えてしまいます
  • セキュリティリスク:更新を怖がって放置すると、脆弱性が修正されないまま運用する危険な状態になります
  • バックアップの複雑化:変更箇所の管理が難しくなり、復元作業が煩雑になります

子テーマを使うメリット

  • 更新への耐性:親テーマを何度更新してもカスタマイズ内容が保持されます
  • 変更の一元管理:自分のカスタマイズは子テーマフォルダに集約されるため、管理が簡単です
  • 安全なテスト環境:親テーマに影響を与えずに新しいデザインや機能を試せます
  • バックアップの簡易化:子テーマフォルダだけをバックアップすれば変更内容を保全できます

WordPress子テーマの作り方|必要なファイルは2つだけ

子テーマの作成に必要なファイルは、「style.css」と「functions.php」の2つだけです。難しいプログラミング知識は不要で、テキストエディタと FTPクライアント(またはサーバーのファイルマネージャー)があれば誰でも作れます。以下の手順に沿って進めてみましょう。

ステップ1:子テーマ用フォルダを作成する

まず、WordPressのテーマフォルダ(wp-content/themes/)内に新しいフォルダを作成します。フォルダ名はわかりやすく命名しましょう。慣例として親テーマ名の末尾に「-child」を付けます。

  • 例(親テーマがTwentyTwentyFiveの場合):twentytwentyfive-child
  • 例(SWELLの場合):swell-child
  • 注意:フォルダ名に日本語や空白は使用禁止。半角英数字とハイフンのみ使用してください

ステップ2:style.cssを作成する

作成したフォルダ内に「style.css」というファイルを作成し、以下の内容を記述します。このヘッダーコメントがWordPressに「これは子テーマです」と伝える役割を持っています。

/*
Theme Name: TwentyTwentyFive Child
Template:   twentytwentyfive
Description: TwentyTwentyFiveの子テーマ
Author:      あなたの名前
Version:     1.0.0
*/
  • Theme Name:子テーマの名前(管理画面に表示される名前)
  • Template:親テーマのフォルダ名を正確に記述(大文字・小文字を正確に)
  • Description:任意の説明文

「Template」の値は親テーマのフォルダ名と完全に一致している必要があります。ここが間違っていると子テーマが正しく機能しません。親テーマのフォルダ名はFTPや管理画面の「テーマの編集」から確認できます。

ステップ3:functions.phpを作成して親テーマのスタイルを読み込む

同じフォルダ内に「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で読み込む方法が推奨されています。パフォーマンス面でも優れています。

ステップ4:子テーマを有効化する

2つのファイルをサーバーにアップロードしたら、WordPress管理画面の「外観 → テーマ」を開きます。作成した子テーマが一覧に表示されているはずです。「有効化」ボタンをクリックすれば設定完了です。サイトが正常に表示されることを確認してください。


子テーマでできること|実践的な使いどころ3選

子テーマを有効化したら、実際にどんなカスタマイズに使えるのかを見ていきましょう。大きく分けると「CSSによるデザイン変更」「functions.phpによる機能追加」「テンプレートファイルの上書き」の3つが主な活用場面です。

①CSSでデザインをカスタマイズする

子テーマのstyle.cssに追記するだけで、親テーマのデザインを自由に変更できます。フォントサイズの変更、色の調整、余白の修正など、細かなデザイン調整に活用してください。

/* 見出しの色を変更 */
h2 {
    color: #2c3e50;
    border-left: 4px solid #ffbf00;
    padding-left: 12px;
}

/* フッターの背景色を変更 */
.site-footer {
    background-color: #f8f9fa;
}

子テーマのCSSは親テーマの後に読み込まれるため、同じセレクタに同じプロパティを書くだけで親テーマのスタイルを上書きできます。わざわざ「!important」を多用する必要はありません。

②functions.phpで機能を追加・変更する

子テーマのfunctions.phpは親テーマのfunctions.phpよりも先に読み込まれます。フックやフィルターを使って既存の機能を拡張したり、新しいウィジェットエリアを追加したりするのに最適です。

  • カスタム投稿タイプの追加:register_post_type()でポートフォリオや商品などの独自コンテンツを追加
  • ショートコードの作成:繰り返し使うHTML部品をショートコード化して再利用可能に
  • 管理画面のカスタマイズ:不要なメニュー項目を非表示にしてクライアント向けに整理
  • 外部スクリプトの読み込み:wp_enqueue_scripts フックでJavaScriptやCSSを安全に追加

③テンプレートファイルを上書きする

WordPressは子テーマのフォルダに同名のテンプレートファイルがあれば、親テーマのファイルより優先して読み込みます。たとえば親テーマの「single.php」(個別投稿ページ)を変更したい場合は、子テーマフォルダに「single.php」をコピーして編集するだけです。

親テーマファイル用途子テーマで上書きする場合
single.php個別投稿ページ記事レイアウトを大幅変更したいとき
page.php固定ページランディングページ専用レイアウトを作るとき
header.phpヘッダーナビゲーション構造を変更したいとき
footer.phpフッターコピーライト表記や構成を変更したいとき
functions.php機能定義上書きではなく追記で機能を拡張

functions.phpだけは「上書き」ではなく「追記」で機能が拡張される点に注意してください。子テーマと親テーマ両方のfunctions.phpが読み込まれます。


子テーマを使うべきケース・不要なケースの判断基準

子テーマは万能ですが、すべての場面で必要というわけではありません。状況に応じて正しく判断することが大切です。

子テーマが必須なケース

  • 外部配布テーマを使いながらCSSやPHPを直接編集したい:更新で変更が消えるリスクがあるため子テーマが必須
  • テンプレートファイル(single.phpなど)を改変したい:親テーマのファイルを直接編集せず子テーマで上書きする
  • 長期運用するサイトのカスタマイズ:セキュリティ更新を継続しつつカスタマイズを維持するために必要

子テーマが不要なケース

  • カスタマイザーやブロックエディタだけで完結する変更:管理画面から変更できる内容はデータベースに保存されるため更新に強い
  • 独自テーマをゼロから開発している:自分で作ったテーマはそのまま編集してOK
  • プラグインで対応できるカスタマイズ:CSSの微調整なら「Additional CSS」やSEO設定ならSEOプラグインで対応可能

子テーマ作成時のよくあるミスと対処法

  • Templateの値が間違っている:親テーマのフォルダ名を正確にコピー&ペーストしましょう。大文字・小文字の違いでも機能しません
  • 有効化後にサイトが真っ白になる:functions.phpのPHPコードに文法エラーがある可能性が高いです。FTPでfunctions.phpを削除して再確認してください
  • スタイルが反映されない:ブラウザのキャッシュが原因のことが多いです。Ctrl+F5(強制リロード)で確認しましょう
  • 親テーマのCSSが読み込まれない:functions.phpのwp_enqueue_styleの記述を再確認してください

SWELLなど人気テーマで子テーマを使う際の注意点

SWELLやCocoon、Lightningなど、日本語対応の人気WordPressテーマを使用している場合も、基本的な子テーマの作り方は同じです。ただし、一部のテーマは公式が子テーマのひな形を配布していることがあるため、まず公式ドキュメントを確認するのがベストプラクティスです。

SWELLで子テーマを使う場合のポイント

  • 公式子テーマを使用:SWELL公式サイトでは子テーマのひな形が配布されているため、それを利用するのが確実です
  • SWELLのブロック機能はそのまま利用可能:子テーマ有効化後もSWELL独自ブロックはすべて使えます
  • テーマオプションの設定はそのまま引き継がれる:外観設定やカスタマイザーの値はデータベース保存のため影響なし

Cocoonで子テーマを使う場合のポイント

  • Cocoonも公式子テーマあり:配布ページから「Cocoon Child」をダウンロードしてそのまま使えます
  • style.cssへの追記でOK:CSSカスタマイズは子テーマのstyle.cssに書くだけで反映されます
  • スキンとの競合に注意:Cocoonのスキン機能と子テーマCSSが競合する場合は、詳細度(Specificity)を上げて対応します

まとめ

WordPress子テーマは、テーマ更新に強い安全なカスタマイズ環境を手軽に構築できる仕組みです。必要なファイルはstyle.cssとfunctions.phpの2つだけで、手順通りに作れば10分もかかりません。親テーマを直接編集する習慣があるなら、今すぐ子テーマに切り替えることを強くおすすめします。

・ポイント1:子テーマはstyle.cssとfunctions.phpの2ファイルで作成でき、Templateの値を親テーマフォルダ名と一致させることが最重要
・ポイント2:CSSの追記・functions.phpへの機能追加・テンプレートファイルの上書きの3つが主な活用場面
・ポイント3:SWELLやCocoonなど人気テーマは公式子テーマのひな形が配布されているため、公式ドキュメントを最初に確認するのがベスト

子テーマを正しく活用することで、安心してテーマ更新を続けながら、自分だけのオリジナルサイトを育てていけます。今日から子テーマを使ったカスタマイズを始めてみましょう!


よくある質問(FAQ)

Q1. 子テーマとは何ですか?

A. 既存のテーマ(親テーマ)の機能やデザインを引き継ぎながら、独自のカスタマイズを安全に追加できる仕組みです。WordPressはテンプレート読み込み時にまず子テーマのフォルダを検索し、該当ファイルがなければ親テーマのファイルを使う「上書き」の仕組みで動きます。親テーマに手を加えないため、テーマ更新でカスタマイズが消える心配がありません。

Q2. 子テーマの作成に必要なファイルは何ですか?

A. style.cssとfunctions.phpの2つだけです。style.cssにはヘッダーコメントで子テーマであることを示し、Templateに親テーマのフォルダ名を正確に記述します。functions.phpにはwp_enqueue_styleで親テーマのスタイルシートを読み込む処理を記述します。

Q3. 子テーマ作成でよくあるミスは何ですか?

A. Templateの値が親テーマのフォルダ名と一致していない(大文字・小文字の違いでも機能しない)、functions.phpの文法エラーで有効化後にサイトが真っ白になる、ブラウザキャッシュでスタイルが反映されない、wp_enqueue_styleの記述ミスで親テーマのCSSが読み込まれない、といったミスが挙げられます。

Q4. 子テーマが不要なケースはありますか?

A. あります。カスタマイザーやブロックエディタだけで完結する変更(データベースに保存されるため更新に強い)、独自テーマをゼロから開発している場合、プラグイン(Additional CSSやSEOプラグイン)で対応できるカスタマイズは、子テーマが不要です。

Q5. SWELLやCocoonで子テーマを使うときの注意点は?

A. SWELLやCocoonなど人気テーマは公式が子テーマのひな形を配布していることが多いため、まず公式ドキュメントを確認してひな形を利用するのが確実です。テーマオプションの設定はデータベース保存のため子テーマ有効化後もそのまま引き継がれます。Cocoonではスキン機能と子テーマCSSが競合する場合、詳細度を上げて対応します。


関連記事


参考リンク(公式・一次情報)


AIスキルで、未来の自分をアップデート!

今なら完全無料でAIを学べる!WithAI

今なら完全無料でAIを学べる!

  • 動画や実践で楽しく学べる:初心者でも安心のカリキュラム
  • スマホ・PCどちらでもOK:好きな時間に学習できる
  • 料金は一切ナシ0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう!

この記事を書いた人

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。

– service –WithGroupの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう!

    詳細はこちら
  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう!

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
予約!

目次