WordPressの子テーマとは?作成方法と使い方を初心者向けに解説

「WordPressの子テーマって何だろう?」「テーマをカスタマイズしたいけど、直接編集して大丈夫かな?」——そんな疑問を感じていませんか。WordPressを使い始めると、子テーマという言葉を目にする機会が増えますよね。

子テーマは、WordPressのデザインや機能を安全にカスタマイズするために欠かせない仕組みです。仕組みを理解して手順どおりに進めれば、初心者の方でもスムーズに導入できます。

この記事では、WordPress制作のプロが、子テーマの基本から作り方、カスタマイズ例、トラブル対処法までわかりやすくお伝えします。読み終わる頃には「子テーマを作ってみよう」と自信を持てるはずです。

この記事を書いた人

Webデザイナー・Webコンサルタント
Web制作会社、Web担当者を経て独立。17年以上の実務経験で培った制作スキルとSEOノウハウを活かし、現在はSTARRY代表としてWordPressサイト制作・集客サポートを提供。ランサーズ認定ランサー。ランキング上位受賞多数。

目次

WordPressの子テーマとは?

WordPressの子テーマとは、親テーマ(かんたんに言うと、サイトのデザインや機能の土台となるテーマのこと)の機能を引き継ぎながら、独自のカスタマイズだけを追加できる仕組みです。

通常、WordPressのテーマにはデザインや機能に関するファイルがまとめて入っています。このテーマを直接編集してカスタマイズすることも可能ですが、テーマのアップデートが来ると「編集した内容がすべて上書きされてしまう」という問題があります。

子テーマを使えば、カスタマイズした内容は子テーマ側に保存されるため、親テーマをアップデートしても変更が消えません。これが子テーマを使う最大の理由です。

親テーマと子テーマの関係

親テーマと子テーマは、セットで使うものです。子テーマは単体では動作しません。

仕組みはシンプルです。テンプレートファイルやCSSの場合、WordPressは子テーマのファイルを優先的に読み込み、子テーマに存在しないファイルは親テーマから読み込みます。つまり、変更したい部分だけを子テーマに用意すればよいのです。

なお、functions.phpは少し仕組みが異なります。テンプレートファイルのように「上書き」されるのではなく、「子テーマのfunctions.phpが先に読み込まれたあと、親テーマのfunctions.phpも読み込まれる」という動作になります。つまり、親テーマの機能を維持したまま、子テーマで機能を追加できる仕組みです。

たとえば、サイトの見た目を少し変えたい場合、子テーマにCSS(かんたんに言うと、デザインを指定するための言語のこと)ファイルだけを置けば、その部分だけが上書きされます。それ以外のデザインや機能は、親テーマの内容がそのまま使われます。

子テーマが必要な理由

子テーマが必要な理由は、「カスタマイズの安全性を確保するため」です。

実際の制作現場では、親テーマを直接編集してカスタマイズしたあと、テーマのアップデートですべてが元に戻ってしまう——というトラブルを多く見てきました。アップデートには、セキュリティの修正や機能改善が含まれているため、更新しないという選択もリスクがあります。

子テーマを使えば、「カスタマイズを維持しながら親テーマも安全にアップデートできる」という、両方のメリットを両立できます。

WordPressで子テーマを使うメリット・デメリット

子テーマの導入を検討するうえで、メリットとデメリットの両方を知っておくことが大切です。ここでは、それぞれを整理してお伝えします。

子テーマを使う3つのメリット

子テーマを使う主なメリットは、次の3つです。

1つ目は「親テーマをアップデートしてもカスタマイズが消えない」ことです。これが最大のメリットになります。テーマの更新が来ても、子テーマに記述した変更内容はそのまま維持されます。

2つ目は「カスタマイズの管理がしやすい」ことです。変更した箇所が子テーマにまとまるため、どこを編集したのかが一目で分かります。プロの視点では、この管理のしやすさがサイト運用を長く続けるうえで非常に重要です。

3つ目は「元に戻しやすい」ことです。カスタマイズに失敗しても、子テーマを無効化するだけで親テーマの状態に戻せます。初心者にとって、この安心感は大きいでしょう。

子テーマを使うデメリット

一方で、デメリットも理解しておく必要があります。

まず「作成に手間がかかる」点です。子テーマを作るには、いくつかのファイルを用意する必要があります。ただし、手順自体は決まっているため、この記事の手順どおりに進めれば問題ありません。

次に「親テーマの大幅な仕様変更に影響を受ける可能性がある」点です。親テーマが大型アップデートでファイル構造を大きく変えた場合、子テーマで上書きしていたテンプレートファイルが正常に動作しなくなることがあります。多くの制作案件で見てきた中で、この問題が起きる頻度は高くありませんが、知っておくと安心です。

また、子テーマを使うことでサイトの読み込み速度がわずかに遅くなるケースもあります。ただし、体感できるほどの差になることはほとんどないため、過度に心配する必要はないでしょう。

子テーマは本当に必要?追加CSSとの使い分け

「子テーマって自分にも必要なのかな?」と迷っている方も多いのではないでしょうか。結論から言うと、すべてのWordPressユーザーに子テーマが必要なわけではありません。

WordPressには「追加CSS」(かんたんに言うと、管理画面からCSSを直接書き込める機能のこと)という機能があります。ちょっとした見た目の変更であれば、追加CSS機能で十分に対応できます。

使い分けの基準は以下のとおりです。

「追加CSS」で十分なケース

文字の色やサイズの変更、余白の調整、簡単な装飾の追加など、CSSの変更だけで済む軽微なカスタマイズを行いたい場合。

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

テンプレートファイル(かんたんに言うと、ページのレイアウトや表示内容を決めるPHPファイルのこと)を編集したい場合、functions.php(かんたんに言うと、テーマの機能を追加・変更するためのファイルのこと)に独自のコードを追加したい場合、CSSの変更量が多く管理画面での管理が煩雑になる場合。

プロの視点では、「今は追加CSSだけで十分だけど、将来的にテンプレートファイルも編集するかもしれない」という場合は、最初から子テーマを作っておくことをおすすめします。あとから子テーマに切り替えると、追加CSSに書いた内容の移行作業が発生するためです。

WordPressの子テーマの作り方

ここからは、子テーマを実際に作成する手順を解説します。WordPress公式ドキュメントによると、子テーマに唯一必須のファイルは「style.css」です。ただし、親テーマのCSSを正しく読み込むためにfunctions.phpもあわせて用意するのが一般的なため、この記事では「子テーマ用のフォルダ」「style.css」「functions.php」の3つを作成する手順を紹介します。

子テーマのフォルダを作成する

まず、パソコン上に子テーマ用のフォルダを1つ作成します。

フォルダ名は「親テーマのフォルダ名-child」とするのが一般的です。たとえば、親テーマが「sample」という名前であれば、「sample-child」というフォルダ名にします。

フォルダ名は半角英数字で、スペースを含めないようにしてください。これはWordPressがフォルダ名を正しく認識するために必要なルールです。

なお、親テーマのフォルダ名が分からない場合は、WordPress管理画面の「外観」→「テーマ」で親テーマの「テーマの詳細」を確認するか、FTPソフト(かんたんに言うと、サーバー上のファイルを操作するためのソフトのこと)で wp-content/themes フォルダの中を確認してみてください。

style.cssを作成する

次に、作成したフォルダの中にstyle.cssというファイルを作ります。テキストエディタ(Windowsのメモ帳でも可能です)を開き、以下の内容を記述してください。

▼ style.css に記述するコード(※WordPressへの入稿時は「コード」ブロックで挿入してください)

/*
Theme Name: Sample Child
Template: sample
*/

「Theme Name」には子テーマの名前を記入します。WordPress管理画面に表示される名前になるため、分かりやすい名前をつけましょう。「Template」には親テーマのフォルダ名を正確に記入します。ここを間違えると子テーマが正しく動作しないため、「大文字・小文字の区別も含めて正確に」入力してください。

記述が終わったら、ファイル名を「style.css」として保存します。文字コードは「UTF-8」を選んでください。

functions.phpを作成する

続いて、同じフォルダ内にfunctions.phpを作成します。このファイルの役割は、親テーマのCSSを子テーマから正しく読み込むことです。ただし、親テーマがすでに自身のstyle.cssと子テーマのstyle.cssの両方を読み込む設計になっている場合は、このファイルは不要なケースもあります。

テキストエディタで新しいファイルを作り、以下のコードをそのまま記述してください。

▼ functions.php に記述するコード(※WordPressへの入稿時は「コード」ブロックで挿入してください)

<?php
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );
function my_child_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_parent_theme_file_uri( 'style.css' )
    );
}

このコードは、親テーマのstyle.cssを読み込む処理を行っています。get_parent_theme_file_uri()は、WordPress公式Theme Handbookで現在推奨されている関数です。子テーマのstyle.cssはWordPressが自動的に読み込むため、このコードでは親テーマのCSSのみを明示的に指定しています。

なお、親テーマによってはスタイルシートの読み込み方法が異なる場合があります。うまく反映されない場合は、ご利用の親テーマの公式ドキュメントを確認してみてください。

ファイル名を「functions.php」として、文字コードは「UTF-8(BOMなし)」で保存してください。実際の制作現場では、「BOMあり」で保存してしまい画面が真っ白になるトラブルをよく見かけます。BOM(かんたんに言うと、ファイルの先頭に付く目印のようなデータのこと)が含まれるとPHPが正しく動作しないため、注意が必要です。

子テーマをアップロードして有効化する

作成した子テーマのフォルダをZIP形式に圧縮します。Windowsの場合はフォルダを右クリックして「ZIPファイルに圧縮」、Macの場合は「”フォルダ名”を圧縮」を選択してください。

アップロードの手順は次のとおりです。

  • WordPress管理画面の「外観」→「テーマ」を開く
  • 「新しいテーマを追加」をクリック
  • 「テーマのアップロード」をクリック
  • 作成したZIPファイルを選択してアップロード
  • アップロード完了後に「有効化」をクリック

有効化する前に、「親テーマもインストール済みであること」を必ず確認してください。子テーマは親テーマがないと動作しません。

有効化したら、サイトの表示を確認しましょう。親テーマと同じデザインが表示されていれば、子テーマの導入は成功です。

子テーマのカスタマイズ例

子テーマの導入が完了したら、実際にカスタマイズしてみましょう。ここでは、よく使われる2つのカスタマイズ方法を紹介します。

CSSでデザインを変更する

子テーマのstyle.cssにCSSを追記することで、サイトのデザインを自由に変更できます。

たとえば、見出し(h2タグ)の下に青い線を引きたい場合は、以下のCSSを子テーマのstyle.cssに追記してください。

▼ CSSカスタマイズ例:見出しの下線(※WordPressへの入稿時は「コード」ブロックで挿入してください)

h2 {
    border-bottom: 3px solid #0073aa;
    padding-bottom: 10px;
}

また、本文のフォントサイズと行間を変更したい場合は、次のように記述します。

▼ CSSカスタマイズ例:フォントサイズと行間の変更(※WordPressへの入稿時は「コード」ブロックで挿入してください)

body {
    font-size: 16px;
    line-height: 1.8;
}

CSSの変更は、子テーマのstyle.cssに追記していくだけなので、比較的取り組みやすいカスタマイズです。変更を加える際は、「WordPress管理画面の「外観」→「テーマファイルエディター」からも編集できる」ことを覚えておくと便利でしょう。

なお、CSSの変更がうまく反映されない場合は、CSSの優先度(詳細度)が関係していることがあります。親テーマのCSSのほうが詳細度が高いと、子テーマのCSSが負けてしまうのです。そのような場合は、セレクタ(かんたんに言うと、CSSでどの要素にスタイルを適用するかを指定する記述のこと)をより具体的に書くことで解決できます。

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

子テーマでは、親テーマのテンプレートファイルを上書きすることも可能です。

たとえば、ヘッダー部分のレイアウトを変えたい場合は、親テーマのheader.phpを子テーマのフォルダにコピーして編集します。WordPressは子テーマ内に同名のテンプレートファイルがあれば、そちらを優先的に読み込む仕組みになっています。

テンプレートファイルの上書きは、CSSだけでは実現できないレイアウト変更や機能追加に有効です。ただし、PHPファイルの編集はCSSよりも影響範囲が大きいため、「編集前に必ずバックアップを取る」ことを強くおすすめします。

上書きできるテンプレートファイルの例としては、header.php(ヘッダー部分)、footer.php(フッター部分)、single.php(個別投稿ページ)、page.php(固定ページ)などがあります。必要なファイルだけを子テーマにコピーして編集するのがポイントです。

多くの制作案件で見てきた中で、テンプレートファイルの編集ミスによるエラーは決して珍しくありません。万が一のときにすぐ復元できるよう、バックアップの習慣をつけておきましょう。

子テーマが反映されないときの対処法

子テーマを有効化したのに変更が反映されない——これは初心者がつまずきやすいポイントです。原因はいくつか考えられますが、多くの場合、以下の方法で解決できます。

まず確認していただきたいのは「ブラウザのキャッシュ」です。ブラウザが以前のCSSを記憶している場合、新しいCSSが表示に反映されません。ブラウザのキャッシュをクリアするか、スーパーリロードを試してください。Chrome・Firefox・Edgeの場合、Windowsの場合はCtrl+F5、Macの場合はCommand+Shift+Rで実行できます。Safariをお使いの場合は、Command+Option+Eでキャッシュを削除したあとにページを再読み込みしてください。

次に確認すべきは「style.cssのTemplate指定」です。style.cssに記述したTemplate(親テーマのフォルダ名)が間違っていると、子テーマが親テーマを見つけられません。「大文字・小文字の違い」や「余分なスペース」がないかを確認しましょう。

functions.phpの記述ミスも、よくある原因の1つです。とくにPHP開始タグの記述漏れや、コードのコピー時に全角スペースが混入するケースが多く見られます。全角スペースはPHPのエラーを引き起こすため、コード内は「すべて半角」で記述してください。

また、キャッシュ系プラグインを使用している場合は、プラグイン側のキャッシュも削除してみてください。実際の制作現場では、キャッシュプラグインが原因で変更が反映されないケースが意外と多いものです。

そもそも子テーマが管理画面に「壊れているテーマ」と表示される場合は、親テーマがインストールされていない可能性があります。子テーマは親テーマとセットで動くため、親テーマが存在しないと有効化できません。「外観」→「テーマ」の一覧で親テーマが表示されているかを確認してみてください。

WordPressの子テーマに関するよくある質問

子テーマと親テーマの違いは何ですか?

親テーマはサイトのデザインと機能の土台となるテーマ本体です。子テーマは、その親テーマを継承しつつカスタマイズ部分だけを管理するテーマです。

親テーマには、サイト表示に必要なすべてのファイル(テンプレートファイル、CSS、画像など)が含まれています。一方、子テーマには変更したい部分のファイルだけを置きます。WordPressは子テーマのファイルを優先して読み込み、子テーマにないファイルは親テーマから読み込む仕組みです。

子テーマは必ず必要ですか?

すべてのWordPressサイトに子テーマが必要なわけではありません。

テーマをまったくカスタマイズせずにそのまま使う場合は、子テーマは不要です。また、CSSの軽微な変更だけであれば、WordPress管理画面の「追加CSS」機能で対応できます。

子テーマが必要になるのは、テーマのPHPファイルを編集する場合や、CSSの変更量が多い場合、テーマのアップデート後もカスタマイズを維持したい場合です。

子テーマを使うとサイトは重くなりますか?

子テーマの導入によってサイトの表示速度に大きな影響が出ることは、ほとんどありません。

子テーマを使うと、WordPressが親テーマと子テーマの両方からファイルを読み込むため、理論上はわずかに処理が増えます。しかし、プロの視点では、この差がユーザー体験に影響するレベルになることはまずないと言えます。サイトの表示速度に影響を与えるのは、画像のサイズやプラグインの数など、ほかの要因のほうがはるかに大きいです。

まとめ

WordPressの子テーマは、親テーマのデザインや機能を引き継ぎながら、カスタマイズ内容を安全に保存できる仕組みです。テーマのアップデートでカスタマイズが消えてしまうリスクを防げるため、テーマを編集する際にはぜひ活用してください。

子テーマに唯一必須のファイルはstyle.cssですが、実用的にはfunctions.phpもあわせて用意するのがおすすめです。この記事で解説した手順どおりに進めれば、初めての方でも無理なく作成できます。

ちょっとしたCSSの変更だけなら追加CSS機能で十分ですが、テンプレートファイルの編集やfunctions.phpへのコード追加を行う場合は、子テーマが必要になります。ご自身のカスタマイズの内容に合わせて、最適な方法を選んでいただければと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次