wildhawk
WordPressで子テーマを自作する方法
初心者でも安心の手順と注意点
初心者でも安心の手順と注意点
カスタマイズのリスクを回避するなら対策しよう
WordPressのテーマは、デザインを変えたり、機能を追加したり、自分好みのサイト作りに欠かせない存在です。
ただ、デザインの一部を変更したり、機能を追加するなど、カスタマイズを加えたいと思うことが良くあります。
そんな時に、テーマを直接カスタマイズすると、バージョンアップなどで消えるor壊れる可能性があります。
壊れると元に戻すは大変だし、壊れたまま放置すると、SEOの評価は下がるし、閲覧者からの信頼を損なうことになるので、良いことがありません。
そこでWordPressでは、既存のテーマ（親テーマ）のデザインや機能を引き継ぎつつ、カスタマイズを安全に適用できる子テーマを作る機能があります。
よく使われるCocoonなどのテーマは、親テーマと子テーマをダウンロードして使える事もありますが、ほとんどのテーマは自作で子テーマを作る必要があります。
そこで今回は、初心者でもわかりやすく子テーマを自作する方法をご紹介いたします。
こんな人にオススメ
WordPressで子テーマを自作したい
WordPressで安全にテーマをカスタマイズしたい
WordPressで親テーマのスタイルや機能をそのまま使いながら自分好みにカスタマイズしたい
WordPressの子テーマはいつでも作れますが、
できれば親テーマが決まったらその時に作るのがオススメです。
WordPressでデザインや機能をカスタマイズするとき、直接テーマファイルを編集してしまうと、テーマのアップデートで変更内容がすべて消えてしまうことがあります。
こうしたリスクを防ぐのが「子テーマ」です。
子テーマを作っておくことで、安全にカスタマイズを行い、アップデートにも強い構成にできます。
この記事では、初心者の方でも迷わず設定できるように、フォルダ作成から有効化までの流れをわかりやすく解説します。
子テーマとは、親テーマ（既存テーマ）をもとにして、一部のファイルだけを上書き・追加できる仕組みのことです。
たとえば以下の場合に活用します。
- デザイン（CSS）を少し変えたい
- PHPテンプレートを部分的に修正したい
- テーマを更新してもカスタマイズを保ちたい
子テーマは親テーマの機能をそのまま利用できるため、更新やメンテナンスの際に安全で、保守性の高い方法です。
WordPressの子テーマは以下のメリットがあります。
- アップデートしても安心：親テーマを更新しても、子テーマのカスタマイズは失われない
- カスタマイズが整理される：変更点が子テーマ側にまとまり、管理しやすい
- 戻しやすい：不具合が出たときに親テーマにすぐ戻せる
子テーマは、親テーマのデザインや機能を使い、その一部を上書きして使えるので、内容は比較的簡単な内容になる傾向があり、親テーマとは完全に切り離して記述できるので、初心者でも安心して編集できる環境になります。
WordPressの子テーマは以下のデメリットがあります。
- 親テーマに依存
親テーマが削除・変更されると子テーマも動かなくなる可能性があります。 - 親テーマの構造を理解する必要がある
カスタマイズするには、親テーマのコード（テンプレート階層や関数）をある程度読み解く必要があります。 - アップデートで不具合が出る可能性
親テーマが大幅に更新された場合、子テーマ側のカスタマイズと衝突して不具合が起きることがあります。 - 親テーマ側の新機能が子テーマに反映されない場合がある
テンプレートファイルを上書きしていると、親テーマで追加された新しいコードが使えない可能性があります。 - ファイル管理が煩雑になる可能性
テーマが複雑になると、親テーマと子テーマの両方を見比べながら編集する必要があり、ミスや混乱の原因になることがあります。 - サイトが重くなる可能性
親テーマと子テーマの両方を読み込んでサイトを表示させるので、表示スピードが遅くなることがあります。
メリットとデメリットを読むと、子テーマを作るべきか迷うと思います。
そこで、以下の様に考えて、自分のサイトに必要か判断してください。
- CSSの微調整だけ
子テーマより「カスタマイザーの追加CSS」や「Simple Custom CSS」などのプラグインがオススメ - テンプレートファイルやPHPを修正
子テーマをオススメ
自作で子テーマを作るには、子テーマ用のフォルダを作り、functions.phpで親テーマと子テーマを連携させる必要があります。
フォルダ構成は以下で作ります。
wildhawk.jp ※WordPressをインストールしているフォルダ
┗ wp-content
┗ themes
┠ customizr ※親テーマのフォルダ
┃┠ functions.php
┃ └ style.css
└ customizr-child ※子テーマのフォルダ、新規作成
┠ functions.php ※新規作成
└ style.css ※新規作成
※赤字が今回追加するフォルダとファイルです。
※親テーマで説明しないフォルダやファイルは省略しています。
WordPressで子テーマを自作するには、以下を使う必要があります。
- 編集する親テーマのフォルダ名：参考にする親テーマ（customizr）
- テキストエディター：PHPやCSSファイルを作成するために使います。
- FTPソフト：作ったPHPやCSSファイルをアップロードするために使います。
親テーマは参考にするテーマを選んでください。
テキストエディターとFTPソフトはどちらも自分が使いやすいソフトなら特に指定はありません。
ただ、テキストエディターは文字コード「UTF-8」が使える物をオススメします。理由はコメントを日本語で記載した場合、Windows付属のテキストエディターだと「Shift-JIS」しか使えず、文字化けで誤動作する可能性があるためです。
初めに子テーマ用のフォルダを作ります。
フェルダ作成は、エクスプローラーを立ち上げ、何も無い空間で右クリックから「新規作成」→「フォルダー」を選択します。
フォルダ名は「テーマ名-child」と設定しましょう。
理由は、後から子テーマを格納しているフォルダだとわかりやすくするためです。
上記で作成した子テーマのフォルダ（customizr-child）に「style.css」ファイルをテキストエディターで作成します。
内容は以下の内容をコピーして作ってください。
/*
Theme Name: customizr child
Template: customizr
Description: 親テーマを拡張するための子テーマ
Author: wildhawk
Version: 1.0
*/
Theme Name: customizr child
Template: customizr
Description: 親テーマを拡張するための子テーマ
Author: wildhawk
Version: 1.0
*/
内容の一部を、サイトに合わせて修正する必要があります。以下の内容で修正してください。
項目 |
説明 |
|---|---|
Theme Name |
子テーマの名前。WordPressのテーマ選択で表示される名前になるので「テーマ名+の子テーマ」がわかりやすくオススメです。（例：customizr child） |
Template |
親テーマのフォルダ名を入力（例：customizr） |
Description |
テーマの説明。WordPressのテーマ選択で表示される説明文になります。（例：親テーマを拡張するための子テーマ） |
Author |
制作者名（例：wildhawk） |
Version |
テーマの管理用バージョン番号（例：1.0） |
「Template」はフォルダ名だけ設定してください。
パスも含めて設定したら、設定エラーが発生したので、ご注意ください。
上記で作成した子テーマのフォルダ（customizr-child）に「functions.php」ファイルをテキストエディターで作成します。
内容は以下の内容をコピーして作ってください。
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’)
);
}
?>
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’)
);
}
?>
ここまでに作成したフォルダとファイルをFTPソフトを使ってアップロードしてください。
最後にWordPressの管理画面で設定します。
①管理画面の右カラム「外観」→「テーマ」をクリック
②追加した新しいテーマの「有効化」をクリック
以上で子テーマの作成と設定が完了しました。
子テーマを有効化したら、さっそく以下のようなカスタマイズが可能になります。
style.cssに独自デザインを追加header.phpやfooter.phpなどを子テーマのフォルダにコピーしてカスタマイズfunctions.phpに独自関数を追加
親テーマはそのまま残して、カスタマイズするファイルだけ子テーマにコピーして修正するのが基本ルールです。
トラブル内容 |
原因 |
対処方法 |
|---|---|---|
子テーマを有効化したら真っ白になった |
functions.phpの記述エラー |
コードを確認し、不要なスペースや全角文字を削除 |
スタイルが反映されない |
親テーマのCSSが読み込まれていない |
functions.phpのenqueue関数の記述を確認し修正 |
子テーマが表示されない |
Templateの記述ミス |
style.cssのTemplateの記述を確認し修正 |
今回はWordPressの子テーマを設定しました。
WordPressの子テーマを活用すれば、デザイン変更や機能追加を安全に行いながら、将来のアップデートにも対応できるようになります。
ただ、実はこのサイトは子テーマは不要だと考えていました。理由はデメリットにも記載しましたが、「面倒」「動作が遅くなる」が理由でした。しかし、自作のショートコードを使いたいと考えたら、子テーマ化しないとトラブルが発生するため、やむを得ず実施しました。
他のサイトだとZIP化してブラウザでアップロードする方法を紹介していますが、テキストエディターとFTPが使えれば思いの外、簡単に子テーマを設定することができるので、初心者でも一度作ってみると、構造の理解が深まり、サイト運営の安定性と自由度が格段に高まります。
もしWordPressのテーマをカスタマイズす場合は、是非こちらを参考に子テーマを作って設定していただければと思います。
その他の記事
関連カテゴリー
最新記事
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください