エックスサーバーで子テーマを作成する方法をまとめておきます。
Contents
子テーマを作成する前に
子テーマを作成する前に、テーマ配布元サイトで子テーマが配布されていないか確認して下さい。
子テーマが配布されている場合は、通常テーマと同様、管理画面の外観「テーマ」から、子テーマのzipファイルをアップロードするだけで子テーマを使うことができます。

子テーマのzipファイルをアップロード
子テーマが配布されていな場合は、ご自身で子テーマを作成して下さい。
子テーマの作り方
流れは以下の通りです(初めての方でも10分あれば設定できます)。
- 子テーマフォルダの作成
- style.cssの作成
- functions.phpの作成
- 親テーマを継承するためのコードを記述
- 子テーマの有効化
テーマフォルダに子テーマフォルダを作成する
エックスサーバーにログインして、「ファイル管理」をクリックします。

「ファイル管理」をクリック
テーマフォルダを開いて、「新規フォルダ」から子テーマフォルダを作成します。
例えば、Twenty Twentyの子テーマを作りたい時は、「twentytwenty-child」等の名前をつけて子テーマフォルダを作成します(フォルダ名は半角英数字ならなんでも構いません)。
パス:/該当ドメイン/public_html/wp-content/themes/

子テーマフォルダの作成
子テーマフォルダに「style.css」と「functions.php」を作成する
作成した子テーマフォルダを開き、「新規ファイル」から2つのファイルを作成します。
- style.css
- functions.php
パス:/該当ドメイン/public_html/wp-content/themes/子テーマ

子テーマフォルダにファイルを作成
同様にfunctions.phpファイルも作成して下さい。

子テーマフォルダに2つのファイルを作成
子テーマのstyle.cssにスタイルシートヘッダを入力する
style.cssファイルを選択して、「編集」をクリックします。

style.cssの編集
下記コードを記述して、「更新」をクリックします(下記はTwenty Twentyの場合)。
1 2 3 4 |
/* Theme Name: Twenty Twenty Child Template: twentytwenty */ |

style.css編集内容
この際、「Template:○○」の部分には、必ず「親テーマのフォルダ名」をそのまま入力して下さい。
Theme Name | テーマ一覧で表示される名前(自由につけてOK) |
---|---|
Template | 親テーマのフォルダ名 |
ちなみに、「@import:」を使用して親テーマのスタイルシートをインポートすることもできますが、WordPress Codexでは「functions.php」で呼び出す方法を推奨しています。
参考:子テーマ – WordPress Codex 日本語版
以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。
子テーマのfunctions.phpに親テーマを継承するためのコードを記述する
functions.phpを選択して、「編集」をクリックします。

functions.phpの編集
下記コード(全てのテーマ共通)を記述して、「更新」をクリックします。
1 2 3 4 5 6 |
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } |

functions.php編集内容
子テーマを有効化する
管理画面の外観「テーマ」に子テーマが追加されているので「有効化」します。

子テーマを選択
親テーマと同じデザインでサイトが表示されれば、子テーマの設定は完了です。
その他のファイルを子テーマでカスタマイズする方法
親テーマのフォルダを開き、ファイルを選択して「コピー」をクリックしたら、コピー先で子テーマフォルダを選択します(コピー先には必ず子テーマフォルダを指定)。

カスタマイズしたいファイルを子テーマフォルダにコピー
子テーマの編集画面にアップロードしたファイルが追加されます。

子テーマにfooter.phpが追加される
但し、「style.css」と「functions.php」以外のファイルは、子テーマのファイルが優先して読み込まれます(親テーマのファイルが呼び出されない)。テーマがアップデートされた際に恩恵を受けられなくなる可能性があるので注意して下さい。
最後に
WordPressのテーマカスタマイズは、子テーマを使うのが一般的です。
親テーマを直接カスタマイズすると、テーマをアップデートした際にカスタマイズした箇所が初期化されてしまうからです(子テーマを使えばカスタマイズした箇所を引き継ぐことができる)。
簡単な「style.css」の編集だけなら、ワードプレスの標準のカスタマイズ機能「追加CSS」を使えば問題ありませんが、「functions.php」を編集したい場合や、テーマファイルに大きな変更を加えたい場合は、子テーマを作ることをおすすめします。
最近のコメント