2025年度 第25回 「子テーマ」で安全にカスタマイズしよう

WordPressでサイトをカスタマイズする際、子テーマは安全かつ効率的に編集するための基本テクニックです。

親テーマのファイルを直接いじってしまうと、アップデートのたびに変更が上書きされてしまいますが、子テーマを使えば独自のデザインや機能を保ったまま親テーマを更新できます。

授業では、子テーマの仕組みと作り方、そして実際のカスタマイズ手順を通して、WordPressをより柔軟に扱うための基礎を身につけていきます。

子テーマとは

「子テーマ」は、既存のテーマ(=親テーマ)を土台にして、その上に自分のカスタマイズだけを載せるための“上乗せテーマ”です。

WordPressのテーマは、本来「そのまま使う」ことを前提に作られていますが、実際のサイト制作では、

  • 色や余白などのデザインを変えたい
  • 特定のページだけレイアウトを変えたい
  • 独自の機能(ショートコードやウィジェットなど)を追加したい

といった「あと一歩、自分用にカスタマイズしたい」という場面が必ず出てきます。

このとき、親テーマのファイルそのものを書き換える方法と、
子テーマを作って「上書きレイヤー」として使う方法の2パターンがあります。

親テーマを直接いじると、

  • どこをどのように変更したかが、時間が経つと自分でも分からなくなる

といった問題が起こります。
そこで登場するのが「子テーマ」です。


子テーマの基本的な考え方

子テーマは、「親テーマを継承して、一部だけ差し替えるためのテーマ」です。

  • 親テーマ:
    デザインやレイアウト、機能の「本体」。開発者がアップデートを提供する部分。
  • 子テーマ:
    親テーマを前提にして、自分が変更したい部分だけを置き換えるためのファイルを置く場所。

たとえば、

  • style.css … デザインの上書き(色・フォント・余白など)
  • single.php … 投稿ページのレイアウトを変えたいときに、親からコピーして上書き
  • functions.php … 親テーマにちょっとした機能を“足す”ときの置き場所

といったイメージです。

何も用意していない部分は、すべて親テーマのものがそのまま使われます
必要なところだけを子テーマで用意すると、そこだけが差し替わります。


子テーマを使うと何が嬉しいか(メリット)

  1. 親テーマを安心して更新できる
    セキュリティ対応や不具合修正のためにテーマを更新しても、
    子テーマ側の変更はそのまま残ります。
  2. カスタマイズの“責任範囲”がはっきりする
    どこを自分が変えたのかが、子テーマの中だけを見れば分かります。
    将来、別の人がサイトを引き継いだときにも理解しやすくなります。
  3. 「やりすぎ」を防ぎやすい
    親テーマの設計を活かしながら、必要な部分だけを変更する、という
    “適度なカスタマイズ”の癖が付きます。

ざっくりした仕組み

WordPressは、テーマを読み込むときに次のような順番でファイルを探します。

  1. まず「有効化されている子テーマ」の中に、そのファイルがあるかを見る
  2. 見つかれば、子テーマ側のファイルを使う
  3. なければ「親テーマ」の同名ファイルを使う

この「子テーマがあれば優先、なければ親を使う」という仕組みによって、

  • 親テーマのアップデート → 機能やセキュリティは最新のまま
  • 子テーマのファイル → 自分のカスタマイズは維持

という両立ができるようになっています。

親テーマを直接いじると何が問題か

子テーマの話に入る前に、「そもそも親テーマを直接いじると何がまずいのか」をはっきりさせておきます。ここを押さえておくと、「子テーマを使う必然性」が腑に落ちます。


テーマ更新でカスタマイズが消える

親テーマの style.css や single.php をその場しのぎで直接編集すると、

  • 開発者が配布するテーマのアップデートを適用した瞬間に、編集したファイルがまるごと上書きされます。
  • 結果として、自分で書いたコードやデザインの修正がすべて消えることになります。

実運用では、

  • セキュリティホールの修正
  • PHP / WordPress 本体の仕様変更への対応
  • バグ修正や機能追加

のために、テーマを最新状態に保つことはほぼ必須です。
「更新しないで放置」は安全面のリスクが大きい一方で、「更新するとカスタマイズが消える」というジレンマが生まれます。


どこをどう変えたか、時間が経つと自分でも分からない

親テーマを直接いじっていると、

  • どのファイルの
  • どの行を
  • どう書き換えたのか

を、数ヶ月後の自分がすべて正確に覚えていることはまずありません。

結果として、

  • 不具合が出ても「元がどうだったか」が分からず、原因切り分けが難しい
  • 元のテーマの仕様書やサポート情報が、そのままでは当てはまらなくなる
  • テーマの制作者に問い合わせても、「改造済みならサポート対象外です」と言われやすい

といった問題が起こりやすくなります。


サイトを引き継ぐときに“ブラックボックス”になる

授業ではあまり実感が湧きにくいかもしれませんが、実務では、

  • 制作会社 → クライアント
  • 担当者A → 担当者B
  • フリーランス → 次の制作者

といった形で、サイトが他人に引き継がれることがよくあります。

このとき、

  • 親テーマのあちこちに直接コードが書き足されている
  • 変更点がドキュメント化されていない

と、引き継いだ人から見ると完全なブラックボックスになります。

結果的に、

  • ちょっとした改修のたびに「どこを触ると何が壊れるか分からない」という恐怖
  • 「だったら一から作り直したほうが早い」という、コストの高い選択

につながってしまいます。


テーマの再利用性が下がる

親テーマに直接手を入れてしまうと、

  • 同じテーマを別サイトでも使いたい
  • 元のテーマに近い状態で再インストールしたい

といったときに、

  • 「改造済みのテーマ」と
  • 「素の状態のテーマ」

がごっちゃになり、“きれいな親テーマ”という基準点が失われてしまいます

子テーマを使っていれば、

  • 親テーマ:そのまま再配布・再インストール可能な“純正品”
  • 子テーマ:サイトごとのカスタマイズを閉じ込めた“アドオン”

という整理ができるため、テーマの再利用性・保守性が大きく変わります。


まとめ:親テーマは「触らない前提」の資産

以上をまとめると、親テーマを直接いじることの問題点は、

  • 更新のたびに変更が消える(=安全に更新できない)
  • 変更履歴が散らばって「どこをどう触ったか分からない」
  • 引き継ぎが難しくなり、将来の開発コストが上がる
  • 元のテーマとしての“基準形”が失われる

という形で、短期的にも長期的にもコストとリスクを増やしてしまう点にあります。

そのため、実務の世界では、

親テーマは“触らない資産”。カスタマイズは子テーマ側に閉じ込める

という考え方が基本になります。

次の章から、その考え方を実現するための仕組みとして「子テーマ」を具体的に使っていきます。

子テーマが必要になるケース / いらないケース

子テーマは「とりあえずいつでも作るもの」ではなく、“どこまでカスタマイズするか” によって必要かどうかが変わる仕組みです。ここでは、実際の現場でもよくあるパターンに分けて整理しておきます。


子テーマが「いらない」ケース

まず、「わざわざ子テーマを作らなくてもいい」パターンから。

(1) 管理画面だけで完結する軽い調整

  • 外観 > カスタマイズ(カスタマイザー)の設定変更
    • サイトタイトル・キャッチフレーズ
    • 色・背景画像・ヘッダー画像の設定
    • ウィジェットの配置 など
  • ブロックテーマの「サイトエディター」でできる編集
    • ヘッダー・フッターのブロック構成
    • テンプレートのブロック単位の変更
  • プラグインの設定変更

これらは テーマのファイルを直接触らずに GUI で完結しているため、
子テーマを作らなくても、安全に変更が保存されます。

(2) ちょっとした見た目の変更(追加CSSで足りるもの)

  • フォントサイズを少し大きくしたい
  • 余白を少し増やしたい
  • 特定の見出しだけ色を変えたい

といった「ほんの少しの見た目調整」であれば、

  • 外観 > カスタマイズ > 追加 CSS
    または
  • 外観 > エディター > スタイル(ブロックテーマの場合)

の 「追加CSS」機能だけで対応できることが多いです。

こうした「ピンポイントの装飾変更」だけの段階では、
まだ無理に子テーマを作らなくても構いません。

子テーマが「必要になる」ケース

一方で、テーマのファイル構造や機能に踏み込む場合は、子テーマがほぼ必須になります。

(1) テンプレートファイルを編集・追加したいとき

  • 投稿ページのレイアウトを変えたい → single.php
  • 固定ページのレイアウトを変えたい → page.php
  • 一覧ページの表示件数や構造を変えたい → archive.phpcategory.php など
  • 404ページや検索結果ページのデザインを変えたい → 404.phpsearch.php などなど

こうした PHPのテンプレートファイルを編集する場合は、

  • 親テーマから該当ファイルを子テーマにコピーして、
  • 子テーマ側のファイルを編集する

という形をとります。
この時点で 子テーマなしに進めるのはNG だと考えてください。

(2) functions.php で機能を追加したいとき

  • アイキャッチ画像のサイズを追加したい
  • メニューやウィジェットのエリアを追加したい
  • ショートコードや独自関数を定義したい
  • 管理画面のメニュー構成を少し変えたい…などなど

これらを functions.php に書き始めるということは、テーマ自体のふるまいに手を入れているということです。

  • 親テーマの functions.php を直接編集するのではなく、
  • 子テーマ側に functions.php を用意して、そこに追記していきます。

このレベルまで来たら、子テーマを使わないと更新で確実に壊れます。

(3) 親テーマの CSS を“がっつり”変えたいとき

「ちょっと色を変える」程度なら追加CSSでよいのですが、

  • メインのレイアウト(2カラム → 1カラム など)をガッツリ変える
  • グローバルナビやフッターのデザインをかなり作り替える
  • 各種ブロック/パーツの見た目をサイト全体で統一的に変更する

といった 大規模なスタイル変更をしたい場合は、

  • 子テーマの style.css に、必要なスタイルを書いていく
  • 必要に応じて @import や wp_enqueue_style() で読み込み順を制御する

といった「テーマレベルの CSS 設計」が必要になります。

この状況も、子テーマなしでは現実的ではありません。

(4) 親テーマのテンプレートパーツ(ヘッダー・フッターなど)を変えたいとき

クラシックテーマの場合:

header.php や footer.php などを変更したいときは、

  • 親テーマから子テーマへコピーし、
  • 子テーマ版を編集して上書きするのが基本です。

ブロックテーマの場合:

サイトエディターだけで完結しないような細かい構造変更(PHPで書かれた部分の修正など)をしたいときは、

  • 子テーマ側にテンプレートパーツを用意して差し替える必要があります。

このように、HTML構造そのものを変えたいときは、ほぼ確実に子テーマが登場します。

判断基準のシンプルなルール

ざっくりとしたルールにまとめると、次のようになります:

  • 管理画面の設定や追加CSSだけで済む → 子テーマ「なし」でOK
  • テーマの中の PHPファイルや CSSファイルを編集したくなった → 子テーマ「あり」が必須

つまり、

コードを書いてテーマを“改造”し始めたら、その瞬間が子テーマを作るタイミング

と覚えておくと分かりやすいです。

このあと実際に、

  • 簡単なケース(CSSの上書き)
  • テンプレートの差し替え(single.php のコピー)
  • functions.php による機能追加

などを通して、「この変更は子テーマが必要なパターンだな」という感覚を、手を動かしながら身につけていきます。

実践!子テーマをつくってみよう

ここからは、実際に手を動かして 「更新しても消えないカスタマイズの土台」 を作っていきます。
流れはこの3ステップです。

  1. 子テーマ用のフォルダと style.css を用意する
  2. テンプレートファイルをコピーして、子テーマ側で上書きする
  3. functions.php に簡単な機能を追加してみる

子テーマフォルダと style.css

まずは「子テーマ」という“空の箱”を作るところから始めます。

子テーマ用フォルダを作る

  1. wp-content/themes/ フォルダを開く
  2. いま使っている 親テーマのフォルダ名を確認する
    • 例:twentytwentyfour や core-cafe-theme など
  3. その隣に、新しく 子テーマ用フォルダ を作る
    • フォルダ名の例:
      • 親テーマ名-child
      • 例:twentytwentyfour-child

フォルダ名はなんでもよいですが、
「親テーマ名+-child」としておくと、あとから見て分かりやすくなります。


子テーマ用の style.css を作る

  1. 子テーマフォルダの中に、新規ファイル style.css (名称は固定)を作る
  2. その中に、次のようなヘッダー情報を書きます:
/*
 Theme Name:  親テーマ名 Child
 Template:    親テーマのフォルダ名
 Description: 親テーマをカスタマイズするための子テーマ
 Author:      (自分の名前や授業名)
 Version:     1.0
*/
  • Theme Name: … 管理画面の「テーマ一覧」に表示される名前
  • Template: … 親テーマの「フォルダ名」(スペルミス注意)
  • その他の項目(Description, Author, Version)は任意ですが、入れておくと分かりやすいです。

子テーマ用のfunctions.phpをつくる

<?php
add_action( 'wp_enqueue_scripts', function() {
    // 親テーマのstyle.cssを読み込む
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
});

子テーマを有効化してみる

  1. WordPress管理画面を開く
  2. 「外観 > テーマ」を表示する
  3. 先ほど Theme Name に書いた名前のテーマが、新しく現れているはずです
  4. そのテーマを選んで「有効化」する

この時点では、まだ何もカスタマイズしていないので、
見た目は「親テーマのまま」 です。

子テーマを有効化した瞬間から、
「これからのカスタマイズは子テーマ側に書いていく」という体制になります。


テンプレートをコピーして上書きする

次に、「子テーマが親テーマを“上書き”(オーバーライド)する」動きを体験してみます。
ここでは例として、投稿ページ(single.php)に一言メッセージを足す練習をします。


親テーマからテンプレートをコピーする

  1. wp-content/themes/親テーマ名/ フォルダを開く
  2. 中から single.php を探す
  3. 見つかったら、そのファイルを コピー して、
  4. wp-content/themes/親テーマ名-child/ に ペースト する

ここで重要なのは、「編集するファイルは親テーマからコピーして、子テーマ側で作業する」という流れです。


子テーマ側のテンプレートに変更を加える

  1. 子テーマフォルダにコピーした single.php を開く
  2. 記事本文が表示されていそうな部分(the_content(); の近く)を探す
  3. 本文の手前に、次のような一文を追加してみます:
<?php echo '<p class="notice">※このページは授業でカスタマイズしたサンプルです。</p>'; ?>
  1. ファイルを保存し、ブラウザで投稿ページを表示してみる

→ 投稿本文の上に、追加したメッセージが表示されていれば成功です。


「子テーマが優先される」ことを確認する

  • 試しに、子テーマ側の single.php に書いたメッセージの文言を変えて保存し、再読み込みしてみる
    → すぐに表示が変わる
  • さらに、子テーマ側の single.php を一時的に別名に変更してみる(例:single-backup.php
    → この場合は、再び親テーマ側の single.php の内容が使われます

これで、

  • 「同じ名前のファイルが子テーマにあれば、それが優先される」
  • 「子テーマになければ、親テーマが使われる」
    という基本ルールを、実際に体験できます。
テンプレートを子テーマにコピーして、表示を上書きする流れ

functions.php で機能を追加する

最後に、子テーマの functions.php を使って、テーマに小さな機能を追加する体験をします。

ここでは例として、

  • 「記事のタイトルの後ろにサイト名を自動で付ける」

という、シンプルな機能を追加してみます。


子テーマに functions.php を作る

  1. 子テーマフォルダ(親テーマ名-child)を開く
  2. まだ functions.php がなければ、新しいファイル functions.php を作る
  3. ファイルの先頭に、次のようなコードを書きます:
<?php
// 子テーマ用の functions.php

// ここに子テーマ独自の機能を追加していく

<?php をファイルの一番上に書き忘れるとエラーになるので注意。


シンプルな機能を追加してみる

例として、「ページタイトルの末尾にサイト名を追加する」フィルターを付けてみます。

<?php
// 子テーマ用の functions.php

// ページタイトルの末尾にサイト名を追加する
function my_childtheme_filter_title( $title ) {
    // 管理画面ではタイトルを書き換えない
    if ( is_admin() ) {
        return $title;
    }
    return $title . ' | ' . get_bloginfo( 'name' );
}
add_filter( 'the_title', 'my_childtheme_filter_title' );
  1. このコードを functions.php に書いて保存
  2. サイトのフロント画面を再読み込みして、ブラウザのタブタイトル欄を確認
    → 「記事タイトル | サイト名」のような形式になっていれば成功です

実務では別のフック(document_title_parts など)を使うことも多いですが、
ここでは「add_filter() でテーマのふるまいを変えられる」という体験を重視します。


「functions.php は子テーマ側に積み上げていく」感覚

  • 親テーマにも functions.php はありますが、それには手を触れません。
  • 自分が追加したい機能は、すべて子テーマ側の functions.php に書いていきます。
  • こうしておくことで、
    • 親テーマを更新しても、自分の追加機能が失われない
    • 「自分が何を足したか」が、子テーマだけ見れば分かる

という状態を保つことができます。


Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x