Web制作コラム

子テーマとは|既製テーマを親にして、独自の部分だけを作る

用語・技術解説

Lightning や SWELL のような既製テーマを土台にしつつ、独自のデザインや機能だけを別に持つのが子テーマです。分担の決め方と、作り方、限界をまとめます。

子テーマとは、既製テーマ(親テーマ)の中身をそのまま使いながら、変えたい部分だけを別のフォルダに置く仕組みです。親テーマが更新されても、自分が書いた部分は残ります。

WordPress の案件では、ゼロからテーマを作るより、この作り方のほうが多いです。Lightning のような企業サイト向けのテーマを親にして、そのサイト固有のデザインやページだけを子テーマで作る、という進め方です。

なぜ親を借りるのか

既製テーマには、毎回必要になるものが最初から入っています。

  • ヘッダー・フッター・パンくず・ページ送りといった定型の部品
  • スマホ対応と、管理画面からの色や幅の設定
  • 投稿一覧・カテゴリ・検索結果・404 といった、見落としがちなページ
  • WordPress 本体の更新への追従(親の作者が対応してくれます)

ここを毎回作らずに済むので、独自性が要る部分に時間を使えます。そして親テーマが更新されても、子テーマに書いたものは消えません。

親テーマのファイルを直接書き換えると、更新のたびに上書きされて消えます。消えるだけでなく、消えるのが怖くて更新できなくなるほうが問題です。更新しないテーマは脆弱性が残り続け、改ざんの入口になります。

親によく使われるテーマ

日本の案件でよく親になるのは次のあたりです。いずれも子テーマでの拡張を前提にした作りになっています。

テーマ向いているサイト子テーマの扱い
Lightning企業サイト・サービスサイト公式の子テーマが配布されている。付属プラグインで機能を足す作りなので、子テーマ側は見た目と独自ページに集中できる
Snow Monkey作り込みが要る企業サイトカスタマイズ前提の設計で、子テーマ用のひな形と拡張の仕組みが用意されている
SWELLブログ・メディアブロックエディタ前提。公式の子テーマが配布されている
Cocoon個人サイト・ブログ無料。子テーマを使うことが前提として案内されている
Astra / GeneratePress軽さを優先する案件海外製で軽量。子テーマを自分で作って使う

※ 横にスクロールできます

配布状況やライセンスは変わります。採用する前に、子テーマが公式に用意されているか、商用利用と複数サイトでの利用が可能かを必ず公式サイトで確認してください。

どこまでを子テーマに持つか

これが一番大事な判断です。何でも子テーマに入れると、テーマを替えたときにサイトが成り立たなくなります。

もの置き場所理由
このサイト固有のデザイン調整子テーマ見た目はテーマの仕事
独自の固定ページテンプレート子テーマそのデザイン専用のもの
カスタム投稿の詳細ページの見た目子テーマ表示の話なので
カスタム投稿タイプ・カスタムタクソノミーの登録プラグインテーマを替えても記事は残したい
フォーム・会員機能などの仕組みプラグインサイトの機能はテーマから独立させる
アクセス解析やMAの計測タグプラグインテーマを替えた瞬間に計測が止まると困る

※ 横にスクロールできます

判断の基準は「テーマを替えたときに、一緒に消えてよいか」です。消えて困るものはプラグイン側に置きます。子テーマに register_post_type を書いてしまい、リニューアルでテーマを替えた瞬間に何百件もの投稿が管理画面から消えた、というのはよくある事故です。

作り方

公式の子テーマが配布されているなら、それを落として有効化するだけです。自分で作る場合は、テーマのフォルダに新しいフォルダを作り、style.css に親テーマのフォルダ名を書きます。

wp-content/themes/lightning-child/style.css

/*
Theme Name: Lightning child
Template: lightning
Version: 1.0.0
*/

Template に書くのは親テーマの表示名ではなく、フォルダ名です。ここを間違えると子テーマが有効になりません。

CSSの読み込み

子テーマの style.css は自動では読み込まれません。functions.php で読み込みます。親のCSSより後に読ませないと上書きできないので、親のハンドル名に依存させます。

functions.php

add_action("wp_enqueue_scripts", function () {
    wp_enqueue_style(
        "child-style",
        get_stylesheet_uri(),
        // 親テーマが登録しているハンドル名を入れる (テーマごとに違う)
        ["lightning-theme-style"],
        wp_get_theme()->get("Version")
    );
}, 20);

親のハンドル名はテーマごとに違います。親テーマの functions.php を grep するか、公式ドキュメントで確認してください。古い解説にある @import で読み込む方法は、読み込みが直列になって遅くなるため使いません。

ファイルの扱いが2種類ある

  • テンプレート(header.php、single.php など)… 同じ名前のファイルを置くと、親の代わりに使われます。差し替えです
  • functions.php … 置き換えではなく、親と両方が読み込まれます。追記です

ここを混同すると、親の処理が二重に動いたり、逆に必要な処理が消えたりします。テンプレートを差し替える場合は、親の同じファイルをコピーしてから必要な箇所だけ直してください。

フォルダの階層まで合わせる

Lightning や Snow Monkey のようなテーマは、部品を template-parts などの下に分けて持っています。差し替えたい部品が親の template-parts/loop/card.php にあるなら、子テーマでも同じ階層に置かないと使われません。ファイル名だけ合わせても効きません。

親テーマを更新したあとは見る

子テーマにコピーしたテンプレートは、親が更新されても置き換わりません。これは利点ですが、親が構造を変えた場合、子テーマの中だけ古い作りのまま残るという意味でもあります。

そのため、親テーマの大きな更新のあとは、差し替えているページを一通り見てください。コピーした枚数が少ないほど、この確認は軽くなります。触る必要のないファイルまでコピーしない、というのが結局いちばん効きます。

子テーマでは足りない場合

子テーマは万能ではありません。次のような状態なら、作り直すほうが結果的に早いことがあります。

  • 直したい箇所が多く、親のファイルをほとんどコピーしている
  • 親テーマが重く、使わない機能の読み込みを止められない
  • デザインが親の想定と大きく違い、CSSの打ち消しばかり書いている
  • 親テーマの更新が止まっている(作者が更新していない)

最後のものは特に注意が必要です。更新されないテーマは、子テーマを正しく作っていても脆弱性が残ります。また、1番と3番が重なっている場合、親を借りている利点がほとんど無くなっています。必要な機能だけのオリジナルテーマにしたほうが軽く、触りやすくなります。

ブロックテーマの場合

近年のブロックテーマでは、見た目の調整を管理画面の編集機能でできる範囲が広がっており、子テーマを作らずに済むことも増えました。テンプレートの差し替えも、画面上で編集した内容がデータベースに保存される形になります。

一方で、PHPで処理を足したい場合や、編集画面では届かない細かい調整が要る場合は、従来どおり子テーマかプラグインが必要です。どちらの作りのテーマなのかを先に確認してください。

分担の設計からご相談ください

当社では、既製テーマを親にした子テーマでの構築と、必要な機能だけのオリジナルテーマでの構築の両方に対応しています。どちらが適しているかは、デザインがどこまで独自か、誰が運用するか、将来テーマを替える可能性があるかで変わります。

既存サイトで「子テーマに何でも入っていて触れない」という状態の整理からのご相談にも対応しています。

「用語・技術解説」のコラム

この記事と同じカテゴリの記事です。

一覧に戻る

SERVICES

WordPressとECサイトの制作、
まとめてご相談いただけます

WordPress

WordPress制作・構築代行

デザインデータやコーディング済みHTMLを、オリジナルテーマとして構築します。プラグイン開発も対応。

構築基本費用 50,000円

詳しく見る
コーディング

コーディング代行

デザインデータをHTML/CSSに起こします。WordPress化まで通しでも、コーディングだけでも承ります。

1ページ 15,000円〜

詳しく見る
React

Reactコーディング代行

デザインデータをReactのコンポーネントとして実装します。既存アプリへの画面追加・UI改修だけでも承ります。

1ページ 18,000円〜

詳しく見る
Next.js

Next.js制作・コーディング代行

検索エンジンに読まれるHTMLを返せるNext.jsで構築します。静的書き出しでレンタルサーバーでも公開できます。

1ページ 18,000円〜

詳しく見る
EC / WordPress

WelcartでのECサイト構築

WordPress専用のネットショップ構築プラグイン。機能面まで踏み込んだカスタマイズができます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / EC-CUBE

EC-CUBEでのECサイト構築

国産オープンソースのECパッケージ。決済・受注・在庫まわりを業務に合わせて作り込めます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / ASPカート

ECサイト制作代行

Shopify・MakeShop・カラーミーなどのカートに、オリジナルデザインを組み込みます。

構築基本費用 100,000円

詳しく見る

制作のご相談も承っています

デザインデータと画面数をお知らせいただければ、お見積りと納期をご提示します。