WordPress子テーマの作り方｜style.cssの書き方とつまずき対処

WordPressの子テーマは、「Template:」に親テーマのフォルダ名を書いたstyle.cssをフォルダに入れ、zipにしてアップロードすれば作れます。functions.phpは、親テーマのCSSの読み込み方によって、必要なときだけ用意します。

子テーマの仕組みや、そもそも必要かどうかは子テーマとは？の解説記事にまとめています。この記事では、自作する手順と、つまずいたときの対処に絞って解説します。

※2026年10月11日時点で各公式サイトの記載を確認。管理画面の名称はWordPress 7.1系のものです。

作る前に: 公式の子テーマがないか確認する

使っているテーマが公式の子テーマを配布しているなら、自作は不要です。SWELLとCocoonは公式の子テーマを配布しています。

テーマ	公式の子テーマ	入手先
SWELL	SWELL CHILD	購入者向け会員サイトのマイページからダウンロード
Cocoon	Cocoon Child	公式サイトで配布
OPEN CAGEのテーマ	ストークSEなどの子テーマ	公式マニュアルで配布

公式の子テーマは、開発元が親テーマに合わせて用意しているので、スタイルの読み込みなどを自分で書く必要がありません。あればそちらを使うのがおすすめです。当サイトもSWELLの子テーマ「SWELL CHILD」で運営しています。

CSSを少し調整したいだけなら、子テーマを作らずに「追加 CSS」で済む場合もあります（クラシックテーマはカスタマイザー、ブロックテーマは「外観」→「エディター」→「スタイル」）。使い方はテーマカスタマイズ入門で紹介しています。

子テーマに必要なファイルは何？

必須のファイルはstyle.cssの1つだけです。functions.phpは、親テーマや子テーマのCSSを自分で読み込む必要があるときに用意します。

• style.css：「Template:」で親テーマを指定する、子テーマの本体です。追加したいCSSもここに書きます
• functions.php：CSSの読み込みが必要なときや、PHPで機能を足したいときに使います。親テーマのfunctions.phpを置き換えず、子と親の両方が読み込まれます（子が先）
• 子テーマのフォルダ：半角英数で、「lightning-child」のように「親テーマ名-child」の形の名前にすると分かりやすくなります

フォルダ名に日本語やスペースは使わないでください。WordPressの公式ハンドブックは、単語をハイフンでつなぐ書き方（ケバブケース）を勧めています。

手順1: style.cssを作る

メモ帳などのテキストエディタで「style.css」という名前のファイルを作り、次のヘッダーを書いて文字コードUTF-8で保存します。例は、親テーマがLightning（フォルダ名 lightning）の場合です。

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

/* ここから下に追加したいCSSを書きます */

項目	書く内容
Theme Name	管理画面に表示される子テーマの名前。自由に付けてよいが、ほかのテーマと重複しない名前にする
Template	親テーマのフォルダ名。テーマの表示名ではない。子テーマにするために必ず書く
Version	子テーマの版番号。手順2のコードでは、子テーマのCSSを読み込むときの版番号に使う

「Template:」の書き間違いは、子テーマ作りでよくある失敗のひとつです。たとえば表示名が「Lightning」でも、フォルダ名は「lightning」です。表示名をそのまま書かず、フォルダ名を正確に写してください。

フォルダ名は、サーバーの「wp-content/themes/」の中で確認できます。管理画面の「外観」→「テーマ」で親テーマを開き、URLの末尾「theme=○○」の部分を見る方法もあります。

手順2: 必要なときだけfunctions.phpを作る

functions.phpが要るかどうかは、親テーマがどのCSSを読み込む作りかで決まります。公式ハンドブックが示す3通りは次のとおりです。

親テーマの作り	functions.php	やること
自分と子テーマの両方のCSSを読み込む	不要	子テーマ側では何もしなくてよい
自分のCSSしか読み込まない	必要	functions.phpで子テーマのstyle.cssを読み込む
有効なテーマ（子テーマ）のCSSしか読み込まない	必要	子テーマのCSSは自動で読み込まれるので、functions.phpで親テーマのstyle.cssを読み込む

親テーマのマニュアルに案内があれば、それに従ってください。案内がないときは、まずstyle.cssだけで有効化し、表示に問題が出てから足す、という順番でも大丈夫です。

親テーマが自分のCSSしか読み込まない場合は、子テーマのstyle.cssを読み込む次のコードを、同じフォルダの「functions.php」に書きます（ハンドブックの例と同じ形です）。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );

function my_child_enqueue_styles() {
	wp_enqueue_style(
		'my-child-style',
		get_stylesheet_uri()
	);
}

親テーマが有効なテーマのCSSしか読み込まない場合は、反対に親テーマのstyle.cssを読み込みます。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );

function my_child_enqueue_styles() {
	wp_enqueue_style(
		'my-child-parent-style',
		get_parent_theme_file_uri( 'style.css' )
	);
}

親テーマが自分のCSSも子テーマのCSSも読み込まない場合は、次のように両方をまとめて読み込みます。親テーマのstyle.cssを先に、子テーマのstyle.cssを後に読み込むコードです。

<?php
// 親テーマが自分のCSSも子テーマのCSSも読み込まない場合のコード
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );

function my_child_enqueue_styles() {
	// 親テーマの style.css を読み込む
	wp_enqueue_style(
		'my-child-parent-style',
		get_parent_theme_file_uri( 'style.css' )
	);
	// 子テーマの style.css を親テーマの後に読み込む
	wp_enqueue_style(
		'my-child-style',
		get_stylesheet_uri(),
		array( 'my-child-parent-style' ),
		wp_get_theme()->get( 'Version' )
	);
}

同じ詳細度のセレクタなら後に読み込んだCSSが優先されるので、子テーマに書いたCSSで親テーマの見た目を上書きできます。最後の行の版番号には、style.cssの「Version」の値が入ります。

親テーマの作りと合わないコードを入れると、同じCSSが二重に読み込まれることがあります。また、functions.phpの末尾にPHPの閉じタグ「?>」は書かないでください（PHPだけのファイルでは閉じタグを省略するのが望ましいと、PHPの公式マニュアルにもあります）。

手順3: zipにしてアップロードし、有効化する

ファイルができたら、フォルダごとzipに圧縮して、管理画面からアップロードします。FTPソフトは必要ありません。

• フォルダにファイルを入れる：半角英数の名前のフォルダに、style.css（必要ならfunctions.phpも）を入れます
• フォルダをzipに圧縮する：Windowsなら、フォルダの右クリックメニューの「圧縮 (zip 形式) フォルダー」などを使います（表示はWindowsのバージョンで異なります）
• 親テーマを入れておく：子テーマより先に、親テーマをインストールしておきます。親テーマは有効化しなくて構いません
• zipをアップロードする：「外観」→「テーマ」→「テーマを追加」→「テーマのアップロード」から子テーマのzipを選びます（詳しくはテーマのインストール方法）
• 子テーマを有効化する：有効化するのは子テーマの側です。「外観」→「テーマ」で、子テーマに「有効:」と表示されていれば完了です

有効化したら、サイトを開いて表示を確かめましょう。カスタマイザーの設定はテーマごとに保存されるので、親テーマで設定していた内容は子テーマに引き継がれません。初期状態に見えたら、子テーマ側で設定し直してください。

うまくいかないときの原因と対処

よくある原因は、「Template:」の書き間違い、zipの中身の不備、親テーマのCSSの読み込みの3つです。表示されたメッセージや症状から、次の表で原因を探してください。

メッセージ・症状	おもな原因	対処
（「外観」→「テーマ」の画面）「親テーマが見つかりません。「○○」の親テーマをインストールしてください。」	「Template:」のフォルダ名が違う、または親テーマが入っていない	「Template:」と親テーマのフォルダ名を見比べる。親テーマが未インストールなら先に入れる
（zipのアップロード時）「親テーマが見つかりませんでした。この子テーマを利用する前に、親テーマ ○○ をインストールしてください。」	同上	同上
（zipのアップロード時）「テーマに style.css スタイルシートがありません。」「パッケージをインストールできませんでした。」	zipの中にstyle.cssが見つからない	ファイル名がstyle.cssになっているか、フォルダごと圧縮したかを確認する
（zipのアップロード時）「テンプレートが不足しています。」で始まるメッセージ	style.cssに「Template:」の行がなく、index.phpもない	ヘッダーに「Template:」の行があるか、綴りが合っているかを確認する
親テーマのデザインが当たらない	親テーマが自分のCSSを読み込まない作り	手順2の表で親テーマの作りを確かめ、functions.phpで親テーマのstyle.cssを読み込む
子テーマのstyle.cssに書いたCSSが効かない	親テーマが子テーマのstyle.cssを読み込まない作り	functions.phpで子テーマのstyle.cssを読み込む。コピー漏れや全角スペースがないかも確認する
カスタマイザーの設定が初期状態に見える	設定はテーマごとに保存される	子テーマ側で設定し直す。ウィジェット・メニューも再設定が要る場合がある

WordPressは「Template:」などのヘッダーの値の前後の空白を取り除きます。それでも親テーマが見つからない場合は、全角スペースが混ざっていないか、綴りや大文字・小文字が違っていないかを確認してください。

functions.phpを直すときは、本番サイトで直接書き換えるより、手元でファイルを直してアップロードし直す方が安全です。理由はテーマファイルエディターの使い方と注意点で解説しています。有効化できないとき全般の対処はテーマが有効化できないときの対処法をご覧ください。

子テーマでカスタマイズするときの書き場所

子テーマができたら、変更はすべて子テーマのファイルに書きます。やりたいことごとの書き場所は次のとおりです。

やりたいこと	書く場所	ポイント
CSSで見た目を変える	子テーマのstyle.css	同じ詳細度なら、後に読み込む子テーマのCSSが優先される
PHPで機能を足す	子テーマのfunctions.php	親テーマのfunctions.phpも読み込まれるので、親の関数をそのまま写さない
ページの骨組みを変える（クラシックテーマ）	親テーマと同じ名前のテンプレートファイル（header.phpなど）を子テーマに置く	子テーマのファイルが優先される
ページの骨組みを変える（ブロックテーマ）	templates/・parts/ の .html を同じ名前で子テーマに置く	パターンは同じ名前のファイルで、登録名（Slug）も同じにすると上書きできる

ブロックテーマの見た目は、おもにtheme.jsonで決まります。自分のテーマがどちらの方式かはブロックテーマとクラシックテーマの違いで見分けられます。

管理画面の「テーマファイルエディター」で編集する場合は、ファイル一覧で子テーマを選んでいるか確かめてから書き換えてください。親テーマのファイルを直接編集すると、更新のときに上書きされます。

子テーマと親テーマの更新

子テーマに書いたカスタマイズは、親テーマの更新で上書きされません。そのため、親テーマの更新を適用しやすくなります。

ただし、親テーマの大型更新でHTMLの構造やCSSのクラス名が変わると、子テーマに書いた上書き用のCSSが効かなくなることがあります。大きな更新の後は、サイトの表示を確かめる習慣をつけましょう。

一方、自作の子テーマには更新通知は来ません。中身は自分で書いたファイルだけなので、直したいときに自分で編集します。更新の進め方はテーマ更新の正しい手順で解説しています。

よくある質問

子テーマを作るのにFTPソフトは必要ですか？

必要ありません。パソコンで作ったフォルダをzipにして、管理画面の「テーマのアップロード」から入れれば完了します。FTPが要るのは、エラーで管理画面に入れなくなったときの復旧などです。

運用中のサイトに後から子テーマを導入できますか？

できます。記事や画像はテーマとは別に保存されているので、子テーマに切り替えても消えません。ただしカスタマイザーの設定はテーマごとに保存されるため、切り替えた後に再設定が必要です。

子テーマのstyle.cssと「追加 CSS」はどちらを使えばいいですか？

数行のCSSの調整だけなら「追加 CSS」で足ります。functions.phpにPHPを書く、テンプレートファイルを上書きするといった作業をするなら、子テーマを作りましょう。

ブロックテーマでも同じ手順で作れますか？

style.cssに「Template:」を書いてアップロードする手順は同じです。見た目はおもにtheme.jsonで調整し、テンプレートはtemplates/・parts/ の .html を同じ名前で置いて上書きします。

親テーマも有効化する必要がありますか？

必要ありません。親テーマはインストールしておくだけで、有効化するのは子テーマの側です。親テーマを削除すると子テーマが動かなくなるので、残しておいてください。

まとめ: 公式の子テーマを探し、なければstyle.cssから作る

子テーマを作る前に、まず公式の子テーマがないか確認しましょう。自作するなら、必須はstyle.cssだけで、「Template:」に親テーマのフォルダ名を正確に書くことが特に注意したい点です。

functions.phpは、親テーマが自分と子テーマの両方のCSSを読み込むなら不要で、そうでなければ足りないほうのCSSを読み込みます。うまくいかないときは、表示されたメッセージを手がかりに原因を確かめてください。これからテーマを選ぶ方は、下の無料診断も参考にしてください。