WordPressの子テーマとは？作り方やメリット・役割・カスタマイズ方法をわかりやすく徹底解説

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressの子テーマについて、作り方やメリット・役割などをわかりやすく徹底解説していきたいと思います。

子テーマを作れると多くのメリットがあります。

例えば、WordPressエンジニアにとっては、既存のテーマのそのまま引き継いだ上でテーマを追加する形でカスタマイズできるので、開発工数を大幅に削減することが可能です。

また、ブロガーやウェブ担当者の方にとっては、複雑なソースコードを読み解いた上でCSSやPHPをカスタマイズする必要がなかったり、エンジニアに外注してカスタマイズ依頼するにも安く抑えられる可能性があります。

当記事では、エンジニアはもちろん、プログラミングの知識を持たないブロガーやウェブ担当者の方にとっても無理なく簡単に子テーマを作成できるように構成しております。

お仕事でもそのまま使えるように解説しておりますので、よろしければぜひご活用ください。

そもそもテーマとは

テーマとは、WordPressで作成したWebサイトの見た目を決めるファイルのことをいいます。

テーマの機能としては、外観やデザイン、何かしらの機能（見た目の一部を管理画面からカスタマイズできる機能など）を提供してくれます。

テーマは、ページのレイアウトやフォント、色、画像など、サイト全体の見た目を決定する仕組みであるため、このテーマがWebサイトの見栄えを決めるといっても過言ではありません。

厳密にいうと、テーマにはサイトの機能を拡張するためのPHPファイルやJavaScriptが含まれており、ユーザーがウェブサイトに訪れた際の表示内容を管理します。

WordPressでは、多くのデザインテンプレートが無料または有料で提供されており、テーマを変更することで簡単にサイトの見た目を変えることができます。

子テーマとは

子テーマとは、親テーマの機能を引き継ぎつつ、独自のカスタマイズを追加するために作成されるテーマのことをいいます。子テーマは、WordPressの機能として提供されております。

ここでいう親テーマとは、もともとインストールされているテーマのことをいいます。

親テーマは、テーマとしてWebサイトとしてのデザインや機能を提供し、子テーマはその上に追加的な変更を加えるために使用されます。

子テーマは、親テーマのファイルを変更せずに、カスタマイズを行うことができるため、親テーマのアップデートなどの更新による影響を避けることができます。これにより、テーマ（元となる親テーマ）のアップデート時にカスタマイズが失われるリスクを回避できるのです。

子テーマでいえば、高機能で無料のWordPressテーマであるCocoonの子テーマがあります。

子テーマのメリット

子テーマを使用することにはいくつかの重要なメリットがあります。

• 親テーマのアップデートの影響を受けない
• 親テーマの機能をそのまま使える
• 親テーマのコードを直接編集しなくていい
• テーマの開発工数を削減できる可能性がある

それぞれ解説いたします。

親テーマのアップデートの影響を受けない

まずもっとも大きいのは、親テーマがアップデートされた際に、子テーマのカスタマイズ内容はそのまま保持されるため、テーマのアップデートによる更新の影響を受けません。

これにより、サイトの機能やデザインを最新の状態に保ちながら、カスタマイズを継続することができます。

親テーマの機能をそのまま使える

子テーマの特徴として、親テーマにさらに機能を追加できるもう一つのテーマ、というのが特徴として言えます。

「追加できる」とあるので、もちろん親テーマの機能はそのままに、ご自身の任意の機能を追加してカスタマイズすることができるのです。

また逆に、親テーマの機能を一部無くすなどのカスタマイズもすることが可能です。

親テーマのコードを直接編集しなくていい

次に、子テーマを使うことで、親テーマのファイルを直接編集することなく、PHPコードやCSSの変更を行うことができます。

このため、テーマのコードを安全に変更でき、元のコードが失われる心配もありません。
さらに、子テーマは非常に柔軟で、親テーマのカスタマイズを拡張したり、新しい機能を追加する際にも有効です。

テーマの開発工数を削減できる可能性がある

エンジニアはWordPressを使ってWebサイトを開発する場合、独自にテーマをプログラミングして開発することになります。

多くの場合、ここでいう親テーマをゴリゴリと開発してお客さんにその開発した親テーマを納品するというパターンが多いかと思いますが、子テーマで開発することで、エンジニアが開発しなくてもその親テーマの備わっている便利な機能を使える状態にした上で、サイトの見た目などを作ることができるので工数は大幅に削減されます。

サイトの開発を外注しようと思っているブロガーやウェブ担当者の方にとっては、この子テーマという仕組みを知っておくことで、すでに利用しているテーマや、無料配布、有料販売している特定のテーマの機能を使いたいけど、見た目はオリジナルにしたいなどといった場合に、子テーマで開発を依頼することができます。

ただし注意点として、もちろん子テーマで外注するにしてもそれなりの開発が必要になればもちろん料金はそれなりにしますので、闇雲に子テーマで外注すれば安くなる！と考えないようにご注意ください。

むしろ料金が上がるパターンもありますので、外注する際は営業担当者やエンジニアに必ず事前に確認してください。

子テーマの作り方

それでは早速、子テーマの作り方について解説いたします。

子テーマを作ることに、なんだか難しそうなイメージをお持ちの方がいらっしゃるかもしれませんが、まったく難しくありません。

なんなら、エンジニアでない方でも手順通りに進めていただければ簡単に作成することができます。

ここでは、手順通りに進めていただければ問題なく作成することができるように解説しておりますので、安心して進めてみてください。

親テーマとするのはWordPressチームが提供する「Twenty Twenty-Two」を前提に解説を進めます。

「Twenty Twenty-Two」の子テーマとして作成いたします。

ただ、親テーマはなんでも大丈夫ですので、ご自身の作成したいテーマを選んで作業を進めてください。

子テーマの作り方の手順としては、以下になります。

• 子テーマ用のディレクトリを作成
• 子テーマのstyle.cssを作成
• 子テーマのfunctions.phpを作成
• screenshot.pngを作成する
• 子テーマを有効化

それぞれ解説いたします。

子テーマ用のディレクトリを作成

まず初めに、子テーマ用のディレクトリを作成します。

まずはデスクトップにカレントディレクトリを移動します。

cd desktop

デスクトップへ移動したら、「twentytwentytwo-child」というファイル名でディレクトリを作成します。

親テーマは「twentytwentytwo」で、子テーマとして作成するので末尾に「-child」をつけた形になります。ただこれは決まりではないので、ご自身の自由なディレクトリ名を決めていただいて大丈夫です。

mkdir twentytwentytwo-child

コマンドを実行したら、以下のようにディレクトリが作成されたかと思います。

作成できたら、以下のコマンドで「twentytwentytwo-child」フォルダにカレントディレクトリを移動します。

cd twentytwentytwo-child

カレントディレクトリを移動できたら、あとはこの中に子テーマとして機能するためファイルを作成していきます。

子テーマのstyle.cssを作成

次は、「twentytwentytwo-child」フォルダの中にテーマとして機能させるためのstyle.cssを作成します。

touch style.css

style.cssを作成できたら、style.cssに以下をコピー＆ペーストしてください。

/*
 Theme Name:   Twenty Twenty-Two Child
 Theme URI:    https://example.com/twentytwentytwo-child
 Description:  Twenty Twenty-Twoの子テーマ
 Author:       山田 太郎
 Author URI:   https://example.com
 Template:     twentytwentytwo
 Version:      1.0.0
 Text Domain:  twentytwentytwo-child
*/

/* 親テーマのスタイルを継承するための読み込み */
@import url("../twentytwentytwo/style.css");

上記はWordPressの子テーマとして機能させるために必須のメタ情報となります。

必須なのは「Theme Name（子テーマ名）」と「Template（親テーマのフォルダ名）」になります。

上記の内容の必須の項目をstyle.cssに記述することで子テーマとして機能させることができますが、そのほかの任意の項目も記述していただくことをおすすめいたします。

ましてや世間に公開するための子テーマを作ろうものなら、国際化対応（多言語対応）するのに必要な「Text Domain」などが必要になってくることと思いますので、必ずすべて記述していただくことをおすすめいたします。

ちなみに注意点として、「Template」に指定するのは「親テーマのフォルダ名」であることに注意してください。下図のようにフォルダ名を確認して「Template」に指定します。

よくある勘違として親テーマの「Theme Name」を指定しがちですが、あくまでも「親テーマのフォルダ名」を指定してください！

子テーマのfunctions.phpを作成

次は、子テーマ用のfunctions.phpを作成します。

作成した「twentytwentytwo-child」フォルダの中にfunctions.phpを作成するために、まずは以下のコマンドでfunctions.phpを作成してください。

必ず「twentytwentytwo-child」フォルダをカレントディレクトリにした上で実行してください。

touch functions.php

次に、作成したfunctions.phpに以下のコードをコピー＆ペーストしてください。

<?php
// 親テーマのスタイルを読み込む
function twentytwentytwo_child_enqueue_styles() {
    wp_enqueue_style(
        'twentytwentytwo-style', 
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'twentytwentytwo-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        ['twentytwentytwo-style'] // 親テーマのスタイルの後に読み込む
    );
}
add_action('wp_enqueue_scripts', 'twentytwentytwo_child_enqueue_styles');

上記コードは、WordPressの子テーマで親テーマと子テーマのCSS（スタイルシート）を正しい順序で読み込むためのものです。具体的には、親テーマのスタイルを最初に読み込み、その後に子テーマのスタイルを適用することで、子テーマでのカスタマイズが優先されるように設定しています。

まず、twentytwentytwo_child_enqueue_stylesという関数を定義しています。この中で、wp_enqueue_styleという関数を使い、親テーマのスタイルを読み込みます。この際、get_template_directory_uri()関数を使って親テーマのディレクトリを取得し、親テーマのstyle.cssを指定しています。

次に、子テーマのスタイルを読み込むため、get_stylesheet_directory_uri()を使って子テーマのディレクトリを指定し、子テーマのstyle.cssを読み込みます。このとき、第三引数で親テーマのスタイルを依存関係として指定することで、必ず親テーマのスタイルが先に適用されるようにしています。

最後に、add_actionを使って、この関数をwp_enqueue_scriptsフックで実行するように登録しています。このタイミングは、WordPressがテーマやプラグインのCSSやJavaScriptを読み込むために設けられたものです。

「get_template_directory_uri() . ‘/style.css’」のファイルのURLを指定している部分は、ご自身のテーマファイルの構造に合わせて調整してください。

このコードによって、親テーマのデザインを基に子テーマでカスタマイズを加える仕組みが実現します。

ちなみに「functions.php」についてわからない方は、よろしければ以下の記事をご確認ください。

また、「フック」についてわからない方は、よろしければ以下の記事をご確認ください。

screenshot.pngを作成する

次はテーマのscreenshot.pngというファイル名でテーマのプレビュー画像を作成します。

プレビュー画像は下図の部分の画像のことをいいます。

ファイル名は必ず「screenshot.png」でなければなりません。他の名称にすると、管理画面のテーマ一覧でプレビュー画像が表示されませんのでご注意ください。

また、わざわざ画像を作成するのが面倒だと思いますので、よろしければ以下の画像を用意したのでお使いください。もちろんオリジナル画像にしていただいても大丈夫です。

screenshot.pngが作成できたら、下図のように「twentytwentytwo-child」フォルダ内に配置してください。ここまでで下図のような構成になっているはずです。

ここまでで、子テーマの作成は完了です。お疲れ様でした！

子テーマを有効化

子テーマが作成できたら、早速子テーマを有効化していきます。

やり方は色々ありますが、今回はWordPress管理画面からテーマのzipファイルをアップロードする形で有効化していきたいと思います。

作成した「twentytwentytwo-child」ディレクトリ（WordPress子テーマのフォルダ）をzipファイルに変換してください。

下図の「twentytwentytwo-child」ディレクトリを…

下図のようにzipファイルにします。

zipファイルに変換できたら、WordPress管理画面左メニューの「外観」をクリックしてください。

クリックしたら下図のページが開きますので、画面上の「新しいテーマを追加」ボタンをクリックしてください。

すると、下図のようにテーマを追加画面が開きます。

開けたら、画面上の「テーマのアップロード」ボタンをクリックしてください。すると下図のようにテーマのzipファイルをアップロードできる領域が展開されます。

ファイルアップロード領域に作成したzipファイルをドラッグ＆ドロップしてください。

できましたら、下図のように「今すぐインストール」ボタンがクリックできるようになるので、クリックしてください。

成功すると、下図のように「アップロードしたファイルからテーマをインストールしています」というページに変わり、テーマのインストールが完了します。

画面中に「有効化」というリンクテキストがあるので、クリックしてください。

「有効化」をクリックすると下図のようにページが表示されて、テーマの有効化が完了したことがわかります。

試しにトップページを表示してみてください。

下図のように、一見親テーマと表示に変わりがありませんが、正しく上書きという形で機能していることがわかります。

これで子テーマの作成から有効化までの作業は完了です。

あとは、必要な分のカスタマイズするだけです。子テーマのファイル内にPHPテンプレートファイルなどを作成してカスタマイズしていきます。

子テーマでカスタマイズする方法

子テーマでテーマをカスタマイズする方法はいくつかルールやコツがあります。

ルールとしては以下が考えられます。

• 親テーマは直接編集しない
• テンプレートファイルは必要なものだけ作成する
• ファイル名と場所を同一にする
• functions.phpは上書きではなく追加であることに注意する
• CSSとJSの読み込み順序を意識する

それぞれ解説いたします。

親テーマは直接編集しない

親テーマを直接編集すると、アップデート時にカスタマイズ内容が失われる可能性があります

WordPressの親テーマは、定期的にセキュリティや機能改善のために更新されますが、その際に変更したコードがすべて上書きされるため、再度手作業でカスタマイズをやり直す必要が生じます。

一方、子テーマを使用すれば、親テーマのファイルをそのまま保持しつつカスタマイズを適用できます。この仕組みにより、親テーマの最新の機能やセキュリティアップデートを享受しながら、独自の変更を維持することが可能です。

そのため、親テーマは「元データ」として扱い、カスタマイズは子テーマを通じて行うのがWordPressでのベストプラクティスです。

テンプレートファイルは必要なものだけ作成する

子テーマにテンプレートファイルを配置する場合、変更が必要なファイルだけを親テーマからコピーして編集します。

WordPressでは、子テーマに同名のファイルがあればそれを優先的に使用する仕組みがあるため、必要な箇所だけを置き換えることが可能です。

すべてのテンプレートファイルをコピーすると、管理が煩雑になるだけでなく、親テーマの更新で追加された新機能が適用されなくなるリスクがあります。必要なファイルを見極め、最小限の編集に留めることで、子テーマの運用がスムーズになります。

ファイル名と場所を同一にする

親テーマのテンプレートファイルを子テーマにコピーする際は、ファイル名とディレクトリの構造を親テーマと同一にする必要があります。

WordPressはテンプレート階層に基づいてファイルを検索し、子テーマに対応するファイルが見つかればそちらを優先して読み込みます。

たとえば、親テーマのheader.phpをカスタマイズする場合は、子テーマ内にheader.phpを作成します

また、親テーマのtemplate-parts/content.phpのようにフォルダの中のPHPファイルをカスタマイズする場合は、同じように子テーマ内にtemplate-partsフォルダを作成し、その中にcontent.phpを配置します。

このルールに従わないと、WordPressは親テーマのファイルが反映されてしまい、カスタマイズが反映されません。この構造を守ることで、確実な変更が可能になります。

functions.phpは上書きではなく追加であることに注意する

子テーマのfunctions.phpは親テーマのfunctions.phpと合体して動作する仕組みになっております。

そのため、親テーマのfunctions.phpをコピーして子テーマに配置する必要はありません。
親テーマのfunctions.phpをコピーして編集するのではなく、子テーマのfunctions.phpに必要なコードを追記する形でカスタマイズを行います。

親テーマの機能を保持しつつ、新しい機能を追加するだけでカスタマイズが可能です。

たとえば、独自のウィジェットエリアを追加するコードや、親テーマの関数を上書きするコードを追加できます。

この方法を守ることで、親テーマの機能を維持しつつ独自の変更を加えることができ、安全性と効率性が高まります。

CSSとJSの読み込み順序を意識する

子テーマでは、CSSやJavaScriptの読み込み順序を適切に管理することで、カスタマイズが正しく反映されます。

通常、親テーマのスタイルやスクリプトを読み込んだ後に、子テーマのスタイルやスクリプトを適用する必要があります。

これは、子テーマのスタイルやスクリプトで親テーマの設定を上書きするためです。具体的な対応方法としては、functions.phpで以下のように設定します。

function enqueue_child_theme_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', ['parent-style']);
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_styles');

このコードにより、親テーマのCSSが先に適用され、子テーマのCSSが後から適用されるため、期待通りのデザイン変更が可能となります。

親テーマの作り方

最後に、今回解説した子テーマの土台となる親テーマの作り方についてご紹介いたします。

子テーマは、親テーマの機能を引き継ぎつつ独自のカスタマイズを追加するために作成されるテーマなので、親テーマは必ず作成しなければなりません。

親テーマの作り方などの詳細は、以下の記事でご確認できるのでよろしければご活用ください。

まとめ

WordPressの子テーマの作り方やメリット・役割などの解説は以上になります。

子テーマは、多くのメリットを持つ便利な仕組みです。既存のテーマ（親テーマ）を引き継ぎつつ、自分好みにカスタマイズできるため、エンジニアにとっては開発工数を削減しやすい点が大きな利点です

また、ブロガーやウェブ担当者の方にとっても、複雑なコードを直接編集する必要がなく、外注コストを抑えることができる可能性があります。

この記事では、子テーマの作り方やその役割、具体的なメリットについて、エンジニアだけでなくプログラミング未経験者の方でも無理なく実践できるよう、わかりやすく解説しています。

実際の仕事や運用にすぐ役立てられる内容となっていますので、ぜひ参考にしてみてください！