子テーマはWordPressのキーワードのひとつで、初心者を混乱させる。子テーマの名前を聞いたことがあっても、複雑そうなので作るのをやめてしまったという人もいるかもしれません。
それはわかります。しかし、私たちの経験では、子テーマはあなたの頭痛の種をたくさん救うことができます。貴重なカスタマイザーを保護し、サイトを壊すことなく試すことができ、テーマの更新を簡単にします。
ご興味のある方は、この初心者向けのガイドで、子テーマの仕組み、カスタマイズ方法、子テーマの変更方法について説明しています。
子テーマの仕組みと必要性
子テーマは、別のWordPressテーマのすべての機能、関数、スタイルを継承します。子テーマを作成した場合、元のテーマは親テーマと呼ばれます。
継承には、テーマのメインスタイルを定義する親テーマのstyle.cssファイルが含まれます。子テーマは独自のファイルを追加するか、既存のファイルを修正することで、継承されたプロパティを上書きまたは拡張できます。
子テーマをインストールしなくてもWordPressテーマをカスタマイズすることは可能ですが、子テーマが必要な理由はいくつかあります：
- 子テーマはテーマ更新時にカスタマイザーを保護し、上書きされないようにします。親テーマを直接変更した場合、その調整は更新時に消えてしまうかもしれません。
- 子テーマは、ステージング環境と同様に、サイトのオリジナルテーマを台無しにすることなく、安全に新しいデザインや機能を試すことができます。
- もしあなたがコードの書き方を知っているなら、子テーマは開発プロセスをより効率的にすることができます。子テーマのファイルは親テーマのファイルよりもずっとシンプルです。親テーマの変更または拡張したい部分だけを修正することに集中できます。
WordPressの子テーマを作る前にやるべきこと
多くのWordPressユーザーが、技術的なことに興奮しながらも、エラーが出て落胆しているのを私たちは見てきました。それはわかります。だからこそ、子テーマを作成する前に、自分が何をしようとしているのかを知ることが重要なのです。
このステップ・バイ・ステップ・ガイドを続ける前に、まずやっておくことをお勧めします：
- コードを扱うことを意識してください。最低限、HTML、CSS、PHP、オプションとしてJavaScriptの基本的な知識があれば、どのような変更が必要かを理解することができます。これについてはWordPressテーマハンドブックで詳しく説明されています。
- 希望のサイトデザインと機能を備えた親テーマを選びましょう。可能であれば、ほんの少しの変更で済むものを探しましょう。必要であれば、WordPressテーマを変更する前にやるべきことのチェックリストに従ってください。
- テーマ開発には、ローカルサイトまたはステージングサイトを使用してください。本番サイトで意図しないエラーを発生させたくないからです。
- まずサイトをバックアップしましょう。初めての場合は、Duplicatorのようなバックアッププラグインを使用することをお勧めします。
既存のテーマから子テーマを作成するには、いくつかの方法があります。ひとつは手作業でコードを書く方法、もうひとつはプラグインを必須とする方法です。
技術的な経験が乏しい場合、最初の方法は敷居が高く感じられるかもしれません。とはいえ、プラグインを使用する方法を選択した場合でも、手順と関連ファイルに慣れるために、マニュアルを一読することをお勧めします。
プロのヒント 子テーマを作成せずにテーマをカスタマイズしたいですか？WPCodeを使えば、サイトを壊すことなく、カスタムコードスニペットで安全に新機能を有効化できます。
すべてを理解した上で、WordPressで子テーマを作成する方法を説明しよう。以下のリンクからお好きな方法にジャンプできます：
- Method 1: Creating a Child WordPress Theme Manually
- Method 2: Creating a Child Classic Theme With a Plugin
- Method 3: Creating a Child Block Theme With a Plugin
- Bonus Tip: Find Out If Your Theme Has a Child Theme Generator
- How to Customize Your Classic Child Theme
- How to Customize Your Block Child Theme
- How to Edit a Child Theme's Template Files
- How to Add New Functionality to Your Child Theme
- How to Troubleshoot Your WordPress Child Theme
方法1：WordPressの子テーマを手動で作成する
まず、WordPressインストールフォルダーの/wp-content/themes/を開きます。
WordPressホスティングサービスのファイルマネージャーまたはFTPクライアントを使用してこれを行うことができます。私たちは、最初の設定の方がずっと簡単だと思うので、それを使います。
あなたがBluehostのクライアントであれば、ホスティングアカウントのダッシュボードにログインし、’ウェブサイト’タブに移動することができます。その後、 ‘設定’をクリックします。
概要」タブで「クイックリンク」セクションまでスクロールダウンします。
次に「ファイルマネージャー」を選択する。
この段階で、サイトのpublic_htmlフォルダーに行き、/wp-content/themes/パスを開く必要がある。
ここで、左上の「+フォルダー」ボタンをクリックして、子テーマ用の新規フォルダーを作成します。
フォルダーには好きな名前をつけることができる。
このチュートリアルでは、Twenty Twenty-Oneを親テーマとして使用するため、twentytwentyone-childというフォルダー名を使用します。完了したら、「新規フォルダーを作成」をクリックします。
次に、先ほど作成したフォルダーを開き、「+ File」をクリックして、子テーマの最初のファイルを作成します。
FTPクライアントを使用している場合は、メモ帳のようなテキストエディターを使って、後でファイルをアップロードすることができます。
このファイルを「style.css」と命名してください。これは子テーマのメイン・スタイルシートであり、子テーマに関する情報を含むからです。
そして、『新規ファイルを作成』をクリックします。
style.cssファイルを右クリックする。
その後、下のスクリーンショットのように「編集」をクリックして新しいタブを開きます。
この新しいタブで、以下のテキストを貼り付け、必要に応じて調整することができます：
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
完了したら、「変更を保存」をクリックするだけです。
次に必要なことは、2つ目のファイルを作成し、functions.phpと名付けることです。このファイルは、親テーマのファイルからスタイルシートをインポートまたはエンキューします。
ドキュメントを作成したら、以下のwp_enqueueコードを追加する：
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
完了したら、前のステップと同じようにファイルを保存する。
注： この方法では、子テーマのスタイルシートが正しく読み込まれるように、公式の「Child ThemesandIncluding Assets」のドキュメンテーションを読むことをお勧めします。
これでとても基本的な子テーマができました。WordPress管理画面の外観 ” テーマを 開くと、Twenty Twenty-One子テーマの設定があるはずです。
有効化」ボタンをクリックして、子テーマのサイトでの使用を開始します。
方法2：プラグインで子クラシックテーマを作る
次の方法では、Child Theme Configuratorプラグインを使用します。この使いやすいWordPressプラグインを使うと、コードを使わずにWordPressの子テーマを素早く作成・カスタマイズできますが、クラシックな（ブロックではない）テーマでしかうまく動作しません。
最初に行う必要があるのは、WordPressプラグインをインストールして有効化することです。有効化したら、WordPressダッシュボードのツール ” 子テーマに移動する必要があります。
親/子タブで、アクションを選択するよう求められます。CREATE a new Child Theme “を選択してください。
次に、ドロップダウンメニューから親テーマを選択する。ここではHestiaテーマを選択します。
その後、「分析」ボタンをクリックして、テーマが親テーマとして使用するのに適していることを確認します。
次に、子テーマを保存するフォルダー名を尋ねられます。任意のフォルダー名を使用できます。
その下で、新規スタイルを保存する場所を選択する必要があります：プライマリスタイルシートか区切り。
プライマリスタイルシートは、子テーマに付属するデフォルトのスタイルシートです。このファイルに新しいカスタマイザーを保存すると、子テーマのメインスタイルを直接変更することになります。すべての変更は元のテーマのスタイルを上書きします。
区切りオプションを使用すると、新しいカスタムスタイルを別のスタイルシートファイルに保存できます。元のテーマのスタイルを保持し、上書きしたくない場合に便利です。
デモンストレーションのため、最初のオプションを設定します。しかし、子テーマのカスタマイゼーションをよりクリエイティブにしていくうちに、いつでもこのプロセスを繰り返し、2番目のオプションを選択することができます。
下に進むと、親テーマのスタイルシートへのアクセス方法を選択しなければならない。
プラグインが自動的に適切なアクションを決定するので、初期設定の「Use the WordPress style queue」にします。
ステップ7に進んだら、「Click to Edit Child Theme Attributes」と書かれたボタンをクリックします。
その後、子テーマの詳細を記入することができます。
手動で子テーマを作成すると、親テーマのメニューやウィジェットが失われます。Child Theme Configuratorはそれらを親テーマから子テーマにコピーすることができます。これを行いたい場合は、ステップ8のボックスにチェックを入れてください。
最後に、「新規子テーマを作成」ボタンをクリックして、新しい子テーマを作成します。
プラグインは子テーマ用のフォルダを作成し、後でテーマをカスタマイズするために使用するstyle.cssとfunctions.phpファイルを追加します。
テーマを有効化する前に、画面上部のリンクをクリックしてプレビューし、見栄えがよく、サイトを壊さないことを確認してください。
すべてがうまくいっているようであれば、「有効化して公開する」ボタンをクリックしてください。
これで子テーマが公開されます。
この段階では、子テーマは親テーマとまったく同じ外観と動作をします。
方法3：プラグインで子ブロックテーマを作る
ブロックテーマを使用している場合、WordPressはCreate Block Themeプラグインで簡単に子テーマを作成できます。
まず、WordPressプラグインをインストールして有効化する必要があります。その後、外観 ” ブロックテーマを作成する。
ここで、’Create a Child of [現在のテーマ名]’を選択するだけです。
次に、子テーマの情報を入力します。この例ではTwenty Twenty-Fourを使っているので、Twenty Twenty-Four Childという名前にします。
また、子テーマの説明と投稿者を指定しました。完了したら、「子テーマを作成」ボタンをクリックします。
プラグインはWordPressテーマのzipファイルを作成し、管理エリアにインストールします。
完了すると、あなたのサイトは自動的にこの新しく作成された子テーマを有効化します。外観 ” テーマで確認できます。
ボーナスのヒントテーマに子テーマジェネレータがあるか調べる
運がよければ、WordPressテーマにはすでに子テーマを作成する機能が備わっているかもしれない。
例えば、Astraを使用している場合、Astra Child Theme Generatorのサイトに行くことができます。その後、子テーマ名を記入して「Generate」ボタンをクリックするだけです。
ブラウザーは自動的に子テーマをコンピューターにダウンロードし、WordPressにインストールすることができます。
また、子テーマジェネレータを持つ他の人気WordPressテーマもいくつか見つけました：
クラシック子テーマのカスタマイズ方法
注： このセクションはクラシックWordPressテーマユーザー向けです。ブロックテーマをお使いの場合は、次のセクションに進んでください。
技術的には、テーマカスタマイザーを使えば、コードなしで子テーマをカスタマイズできます。そこで行った変更は親テーマには影響しません。コーディングにまだ慣れていない場合は、カスタマイザーを自由に使ってください。
とはいえ、子テーマをコードでカスタマイズすることもお勧めします。
WordPressテーマ開発についてさらに詳しく学べるだけでなく、コードのカスタマイザーによって、子テーマのファイル内に変更をドキュメント化することができ、その追跡が容易になります。
さて、子テーマをカスタマイズする最も基本的な方法は、style.cssファイルにカスタマイザーCSSを追加することです。そのためには、どのコードをカスタマイズする必要があるのかを知っておく必要があります。
親テーマから既存のコードをコピーして修正することで、プロセスを簡素化できます。このコードは、ChromeやFirefoxのInspectツールを使うか、親テーマのCSSファイルから直接コピーすることで見つけることができます。
方法1：ChromeまたはFirefoxのインスペクタからコードをコピーする
修正が必要なCSSコードを発見する最も簡単な方法は、Google ChromeやFirefoxに付属しているインスペクター・ツールを使うことです。これらのツールを使えば、ウェブページのあらゆる要素の背後にあるHTMLとCSSを見ることができます。
インスペクターツールについては、inspect要素の基本：DIYユーザーのためのWordPressカスタマイズガイドで詳しく説明しています。
ウェブページを右クリックしてinspect要素を使うと、そのページのHTMLとCSSが表示されます。
HTMLの行の上にマウスを移動すると、インスペクタがその行を上のウィンドウでハイライトします。また、ハイライトされた要素に関連するCSSルールもこのように表示されます：
そこでCSSを編集して、どのように見えるか試してみることができる。例えば、テーマのボディの背景色を#fdf8efに変更してみましょう。body {と書かれたコードの行を探し、その中にcolor:.
color:の隣にあるカラーピッカーのアイコンをクリックし、HEXコードを適切なフィールドにペーストするだけです：
これで、CSSを使って背景色を変更する方法がわかりました。変更を恒久的なものにするには、子テーマディレクトリのstyle.cssファイルを（ファイルマネージャまたはFTPを使って）開きます。
そして、子テーマの情報の下に、以下のようなコードを貼り付ける：
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
body {
background-color: #fdf8ef
}
WordPressのエディターから外観 “テーマファイルエディターを開くと、以下のようになります：
もしあなたが初心者で、他の変更を加えたいのであれば、HTMLとCSSに精通し、各コードがどの要素を指しているのかを正確に把握することをお勧めします。HTMLとCSSのチートシートはオンライン上にたくさんあるので、それを参考にするとよいでしょう。
ここに子テーマ用に作成したスタイルシートがあります。自由に実験し、修正してください：
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}
方法2：親テーマのstyle.cssファイルからコードをコピーする
もしかしたら、子テーマにはカスタマイズしたいものがたくさんあるかもしれません。そのような場合は、親テーマのstyle.cssファイルから直接コードをコピーして、子テーマのCSSファイルにペーストし、修正したほうが早いかもしれません。
やっかいなのは、テーマのスタイルシート・ファイルが初心者にはとても長く、圧倒的に見えることだ。しかし、一度基本を理解すれば、実はそれほど難しくはない。
Twenty Twenty-Oneの親テーマのスタイルシートから実際の例を使ってみよう。WordPressインストールフォルダの/wp-content/themes/twentytwentyoneに移動し、ファイルマネージャー、FTP、またはテーマファイルエディターでstyle.cssファイルを開く必要があります。
次のようなコード行が表示される：
:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}
3行目から15行目までは、テーマ全体が使用する色のタイプ（黄色、緑、紫など）を特定のHEXコードでコントロールする。そして、’global-color-primary’や’global-color-secondary’のような行は、そのテーマの原色と副色を意味します。
これらのコード行を子テーマのスタイルシートにコピーし、HEXコードを変更することで、完璧な配色を作ることができる。
親テーマのスタイルシートを下にスクロールしていくと、他の変数にもこのような色の変数があることに気づくだろう：
/* Buttons */
--button--color-text: var(--global--color-background);
これは基本的に、すべてのボタンテキストが--global--color-background:で宣言されたのと同じ色、ミントグリーン（--global--color-green: #d1e4dd）を使うことを意味する。もし–global–color-green:のHEXを変更したら、ボタンのテキストも違って見えるでしょう。
注： Twenty Twenty-One子テーマを使用していて変更が見られない場合、style.cssファイルを更新するたびに、テーマファイル情報の「バージョン」部分を更新（例えば、1.0から2.0へ）する必要があるかもしれません。
また、これらのチュートリアルに従って、子テーマのカスタマイズを試すこともできます：
- WordPressで文字色を変更する方法
- WordPressのロゴサイズを変更する方法（どんなテーマでも使える）
- WordPressテーマでBlockquotesのスタイルをカスタマイズする方法
- WordPress Body Class 101: テーマデザイナーのためのヒントとコツ
- WordPressテーマにパララックス効果を追加する方法
ブロックの子テーマをカスタマイズする方法
子ブロックテーマを使用する場合、カスタマイザーのほとんどはstyle.cssではなくtheme.jsonファイルで行います。
しかし、私たちのテストでは、プロセスが複雑であることがわかりました。クラシックな子テーマとは異なり、WordPressのテーマ開発に慣れていない場合、（特にJSONとそこでのCSSの扱い方について）埋めなければならない知識の差が大きくなります。
とはいえ、私たちはCreate Block Themeプラグインを使うことで、もっと簡単な代替手段を見つけた。このツールは、WordPressフルサイトエディターで行った変更を、子テーマ.jsonファイルに記録することができる。そのため、プラグインがあなたの代わりに処理してくれるので、コードをすべて触る必要はない。
例をお見せしましょう。まず、外観 ” エディターから WordPressフルサイトエディターを開きます。
いくつかのメニューが表示されます。
ここでは「スタイル」を選択するだけだ。
次のページでは、いくつかのビルトインスタイルの組み合わせをご覧いただけます。
今回の目的では、すべて省略して鉛筆アイコンをクリックするだけでいい。
では、フォントのような子テーマの一部を変更してみましょう。
この例では、右サイドバーの「Typography」をクリックする。
次に、テキスト、リンク、見出し、キャプション、ボタンのテーマのグローバルフォントを変更するオプションが表示されます。
デモンストレーションのために「見出し」をクリックしてみよう。
フォントのドロップダウンメニューで、元のピックを利用可能な任意のフォントに変更します。
必要に応じて、外観、行の高さ、文字間隔、字体を自由に変更してください。
完了したら、「保存」をクリックするだけです。その後、’Save’の隣にあるCreate Block Themeボタン（レンチのアイコン）をクリックします。
そして、「変更をテーマに保存」をクリックします。
次に、子テーマに保存する変更を選択します。
カスタマイズの例としては、フォント、カスタマイザー、テンプレートの変更などがあります。
サイドバーをすべてスクロールしてください。
その後、『変更を保存』をクリックします。
それでは、コードに反映された変更を確認できるように、theme.jsonファイルを表示してみましょう。
これを行うには、もう一度「ブロックテーマを作成」ボタンをクリックし、「theme.jsonを表示」を選択します。
クリックすると、そのファイルにいくつかの新しいコードが追加されていることがわかります。
この場合、見出しタグはセミボールドのInterフォントを使用し、行の高さは1.2、行間は1ピクセルで、小文字であることを示すコードがファイルに含まれています。
ですから、子ブロックテーマを編集するときはいつでも、レンチアイコンをクリックし、変更を保存するようにしてください。
子テーマのテンプレートファイルを編集する方法
ほとんどのWordPressテーマにはテンプレートがあり、これはテーマ内の特定のエリアのデザインとレイアウトをコントロールするテーマファイルです。例えば、フッターセクションは通常footer.phpファイルで処理され、ヘッダーはheader.phpファイルで処理されます。
WordPressテーマもそれぞれレイアウトが異なる。例えば、Twenty Twenty-Oneテーマには、ヘッダー、コンテンツループ、フッターウィジェットエリア、フッターがある。
テンプレートを修正したい場合は、親テーマのフォルダーにあるファイルを探し、子テーマのフォルダーにコピーする必要がある。その後、そのファイルを開き、必要な修正を加えてください。
例えば、Bluehostを使用していて、親テーマがTwenty Twenty-Oneの場合、ファイルマネージャーで/wp-content/themes/twentytwentyoneに移動します。そして、footer.phpのようなテンプレートファイルを右クリックし、「コピー」を選択する。
その後、子テーマのファイルパスを入力します。
完了したら、「ファイルをコピー」をクリックするだけです。
その後、ファイル・パスにリダイレクトされます。
footer.phpファイルを編集するには、右クリックして「編集」を選択します。
例として、フッターエリアから「Proudly powered by WordPress」リンクを削除し、そこに著作権表示を追加します。
そのためには、<div class= "powered-by">タグの間をすべて削除する必要がある：
<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->
次に、下の例のタグの下にあるコードを貼り付ける必要があります：
<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->
テキストエディターで表示される内容は以下の通りだ：
ファイルを保存して、変更を正式なものにする。
その後、あなたのサイトにアクセスして、新しい著作権表示をご覧ください。
子テーマに新規機能を追加する方法
テーマのfunctions.phpファイルは、WordPressサイトに機能を追加したり、デフォルト設定を変更したりするためにPHPコードを使用します。現在のテーマで自動的に有効化したWordPressサイトのプラグインのような役割を果たします。
多くのWordPressチュートリアルでは、functions.phpにコードスニペットをコピー＆ペーストするよう求めています。しかし、親テーマに変更を加えると、テーマの更新をインストールするたびに上書きされてしまいます。
カスタム・コード・スニペットを追加する際に子テーマを使用することをお勧めするのはそのためです。このチュートリアルでは、テーマに新しいウィジェットエリアを追加します。
子テーマのfunctions.phpファイルにこのコード・スニペットを追加することで実現できます。このプロセスをより安全にするために、functions.phpファイルを直接編集しないようにWPCodeプラグインを使用することをお勧めします。
詳しくは、カスタム・コード・スニペットの追加方法をご覧ください。
以下は、functions.phpファイルに追加するコードです：
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'custom_sidebar',
'name' => __( 'Custom Widget Area', 'text_domain' ),
'description' => __( 'A custom widget area', 'text_domain' ),
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
ファイルを保存したら、WordPressダッシュボードの外観 ” ウィジェットページにアクセスしてください。
ここに、ウィジェットを追加できる新しいカスタムウィジェットエリアが表示されます。
カスタムコードスニペットを使ってテーマに追加できる機能は他にもたくさんあります。WordPressのfunctions.phpファイルに関する非常に便利なトリックや、初心者向けの便利なWordPressコードスニペットをご覧ください。
WordPress子テーマのトラブルシューティング方法
子テーマを作成したことがない場合、いくつかのミスを犯す可能性が高く、それは普通のことです。そのため、バックアッププラグインを使用し、ローカルサイトまたはステージング環境を作成し、デモサイトにダミーコンテンツを使用することをお勧めします。
とはいえ、すぐにあきらめないでください。WordPressのコミュニティはとても機知に富んでいるので、あなたが抱えている問題が何であれ、おそらく解決策はすでに存在しています。
手始めに、WordPressのよくあるエラーをチェックして、解決策を見つけてください。
最も一般的なエラーは、コード内の見落としが原因の構文エラーでしょう。WordPressで構文エラーを見つけ、修正する方法についてのクイックガイドで、これらの問題を解決するためのヘルプを見つけることができます。
さらに、何か大きな問題が発生しても、いつでもやり直すことができます。例えば、親テーマが必須としているものを誤って削除してしまった場合、子テーマからそのファイルを削除してやり直すだけです。
この投稿がWordPressの子テーマを作成する方法を学ぶのにお役に立てば幸いです。また、WordPressテーマを最新の基準に照らしてテストする方法についての究極のガイドや、無料とプレミアムのWordPressテーマの比較記事もご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Mahesh Yadav
One thing I want to know, if we make a child theme then we have 2 CSS files to load one parent theme CSS and second child them CSS. Wouldn’t it increase the site load time and It added one more CSS to load?
WPBeginner Support
While the load time would technically increase, it shouldn’t be by a noticeable amount.
管理者
Nadia Shaheen
Great work!
stay blessed and keep sharing awesome content.
WPBeginner Support
Thank you, glad you liked our content
管理者
Fahad
Great Work !
This site is super helpful
Keep it up !!
WPBeginner Support
Thank you, glad our article was helpful
管理者
Daniel Waduka
I am just starting to use child themes, and this article has been of so much help to me.
Thanks so much.
WPBeginner Support
Glad our guide could be helpful
管理者
Marcos Flores
Hi! i’ve been reading this article and it works! but i also read wordpress documentation about this and they say this
“Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php ”
Should i use both method? or if i user the function.php i dont need to write import function inside style.css (located in my child-theme folder)
Khema
Your instructions are missing a step with the functions.php creation. It should mention that needs to wrap the whole file. In this case I didn’t want to add the example you used and to another piece of code from the article you linked to. Naturally those codes didn’t include the php tag.
Thanks for the article. It’s very very helpful.
rReons
So question. I was using my wordpress theme without any child theme and was doing all the changes in to it. I have created a child theme thanks to your guide and I’m using that now as the website theme.
My question is both themes have the same modifications changes. If I update the main theme from now on, will the changes affect the child theme also?
balu
He! wpbeginner. Wordpress official site saying this. You need to update the post. Thank You!
Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.
Pat
Great info…you made it to my save list!! Thanks!
Alfonso de Garay
I have a Child theme with the theme latest version installed in my site. WP version 4.7.5. Received a notice that says WP version is available please update now.
1. Do I have to backup my site again before updating?
2. Do I have to create another Child theme using Child version 1 one?
2. How can I change the Name, email and URL to Chile version 1
WPBeginner Support
Hi Alfonso,
WordPress updates normally do not affect your themes so you do not need to create another child theme. You should always backup your website before updating WordPress.
管理者
Lisa Bruce
Hi, I can see that this video/post is a few years old, so I’m a little late to the party, but I have a questions I was hoping you could help me with.
I am a relatively new to WP and just came to realize the importance of child themes. I have been working on developing a site for a friend and have made several changes to the theme that I am using. I found a bug in the theme and contacted the theme developer and they said that the bug had been fixed in a recent update.
If I install the update I believe I will loose all my customizations. Is it too late to create a child them? Is it possible to do it now and then install the update? I prefer not to have to start from scratch.
WPBeginner Support
Hi Lisa,
If you know what changes you made and to which files, then first download a backup of your existing theme to your computer. After that, install the updated version. You can now create a child theme and then copy and paste the code from your customized version to the child theme.
管理者
Nell Yang
Thank you for this helpful post. I have always been looking for a video to show me how exactly should I use child theme. It is quite time consuming that each time after I updated my theme, all my styles just went away. It is frustrating to do everything over again. I tried to read the documents from wordpress but still don’t know how to proceed after activate the child theme. Keep up the good work! Thank you again!
Tony Agee
Good instructional video. Most tutorials I have watched tell you to paste the code in the file but they neglect to tell you what medium to paste the code to. I was going to use Notepad++ but I guess you can use regular notepad.
JP
Hello, i just want to say that you are a very good writer, very clear and simple. I past a long time on your article for learn WP.
Thank you!
Rob Brooks
Hi. Thank you for being a great WP resource. I am new to WP and really appreciate your guidance. I have followed the article to the letter but when I go to enable the child template on the site, I get the error “The parent theme is missing. Please install the “Real Estate Lite” parent theme. As you see I am using a free template called Real Estate light. it is located in the ../real-estate-lite/ directory of wp-content/themes. My code is below… did I do something wrong?
Theme Name: Real Estate Lite Child Theme Theme URI: http://www.example.com/ Description: Real Estate Lite child theme Author: me Author URI: http://www.example.com Template: Real Estate Lite Version: 1.0.0 */ @import url("../real-estate-lite/style.css");1-click Use in WordPress
In addition, I will mention the theme was free and is running on WP version 4.7.2 (Running on Plesk). I created style.css file directly on the server so no FTP issues.
I have already made significant changes to the parent style.css file as well as functions.php … I am not sure if this would affect this, but going to test on an unedited dummy domain to see if I get the same results
Any guidance/assistance you can provide would be greatly appreciated.
WPBeginner Support
Hey Rob,
You will need parent theme to be installed on your site and Template value should match parent theme’s actual name which you can see in it’s style.css file.
管理者
Carrie
Hi! Great article! I am finally starting to understand how to edit css so that I get the result I want, thanks to this article.
Thanks much for the simplified explanation!
Nalin
I created a child theme & Using @import for the “style.css” on a child theme. Now I want to change in another css file of parent theme’s folder ….. /font_awesome/css/fontawesome.css
Now, I want to know that where I will put my new fontawesome.css in child theme & how to use @import command.
or any other process to use more css file in child theme.
Rebecca
So, I don’t have the wp content folder on my computer. What should I do?
Should I have downloaded this at some point?
WPBeginner Support
Hi Rebecca,
The wp-content file is hosted on your hosting account not on your computer. You will need an FTP client to connect to your server.
管理者
Brad
Using @ import is no longer best practice
SAppa
Then what is the best practice now? You should be able to back up your comment.
Jual beli rumah
Thankyou
Jean-philippe
I am learning so much since a few hours on your website. Everytime I search something in google related to “how to” in wordpress I find that the best information is here at WPbeginner. It is always well explained and easy to understand. I will always come back for information here without a doubt.
WPBeginner Support
Hi Jean-philippe,
Thanks for the kind words, we are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
管理者
Smart Rashed
This is the article ,which i am looking for,thanks man.
Kevin
I know this will be a stupid question. I’m so new to this and have no skills at all. If I am creating a file, style sheet, etc. on my wp installation file on my local pc, how does that get onto my website? I guess I’m missing that? I use like 3 different PCs to work on my website and those local files aren’t on all of them. Again, I am sure I am missing something really dumb. Not seeing the connection.
WPBeginner Support
The files you edit on your computer need to be transferred to your website using an FTP client. See our guide on how to upload WordPress files using FTP.
管理者
Kevin
Ok, I got that and made a child theme, but when I activate it, the formatting on the site is all off from the parent theme. What did I do wrong?
Francesco
Hi there,
I’m following your tutorial but WordPress (4.5.3) doesn’t recognise the new folder on my online server. How can I work around this?
Thanks,
F.
Muhammad Moosa
Helpful article indeed, I followed it and created a child theme. Thanks.
Carolina
Hi, thanks for the tutorial, very helpfull. But I have a question. Can I create a child theme from an already established website? I have a client who designed his own website but did not create a child theme. How to go about it?
WPBeginner Support
If their current theme follows WordPress coding standards and best practices then you should have no trouble creating a child theme.
管理者
Mike
Thank you so much for the article and video. Apparently since these were created WordPress has new best practices listed in their codex which is confusing me.
“The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice.”
Do I stick with the steps you outlined herein verbosely, or do I omit the import function and create the PHP file, or do I implement both?
My theme’s style.css file only contains a header so importing that file seems irrelevant, and there are multiple CSS files like main.css located elsewhere in the parent’s file structure. Not knowing any better as a beginner I have already made changes to main.css to achieve some of my goals and only now I realize the child theme is necessary.
Any advice is greatly appreciated.
Best regards,
Mike
WPBeginner Support
You will need to import at least your style.css file it should be in your parent themes main directory. It should automatically import other CSS files.
管理者
Mike
Even if the style.css has nothing but the header?
Jack
If your style.css file do not have imports to other css styles, you can import them directly, just like style.css.
Olamide
Good day. When I did a live preview of the child theme, I noticed that it didn’t have the css of the parent theme. Maybe this is as a result of an error in the way I inserted the code?
This is the code that I inserted:
/*
Theme Name: sparkling child
Theme URI: https://www.wpbeginner.com/
Description: sparkling child theme
Author: djetlawyer
Author URI: http://www.example.com
Template: sparkling
Version: 1.0.0
*/
@import url(“../sparkling/style.css”);
The parent theme is “sparkling”. If there is any error, please correct me.
Thank you.
WPBeginner Support
The code is correct.
管理者
lucia
Hi there,
I am trying to set up a child theme to activate my footer on twenty twelve, but I don’t know what code to use to set it up.
I tried this webpage
with various suggestions , and I have tried to change your suggestion as given on twenty thirteen , but I don’t succeed.
Could you please give me the right working code for setting up a child them for twelve twelve.
Leigh
This was incredibly helpful – especially your HTML for us to copy. I’ve never been so excited to see colors change on a website before. This is easily the best “how-to” out there for this theme!
Bhautik Andhariya
Hello, I have tried same example that you shown. But my child theme is replacing all the style of its parent theme.
It doesn’t have any style of it’s parent. What is the solution? Can you please help me? I am new in wordpress and i am learning it.
Angelo
Hi there!
I’ve just installed the Bose template and also created a child theme for it. However, the following error message appears on the center of my website:
Warning: implode(): Invalid arguments passed in /home/hello582/public_html/teste/wp-content/themes/bose/featured.php on line 12
I’m a very beginner at websites creation, so I haven’t got any clue about what the problem is. Could anyone help me?
Thanks a lot!
WPBeginner Support
Please contact the theme developer for support.
管理者
Djamila
Hi,
Thanks for the article! I could not get my child theme to ‘appear’ in the template section and it turned out I indeed misspelled the way the original template was named. What a difference a capital makes, huh?
However, now that I have my child theme I was able to update the parent theme and when I did all of a sudden I got an issue with a super important plugin ( I am building a review blog on a local database, for now and it’s the wrap up/grading plugin belong to the template designers).
In the parent template they ‘upgraded’ this plugin. I personally prefer the old one, but okay…anyway…underneath my review you now see *both*, the old wrap up with grades and the new one, which looks out of whack too. I have de-activated and re-activated but it stays like that. Super annoying and I don’t know where to look to either keep the old one (prettier) or only the new one and outlines as should.
Where should I start? Thanks for any help you can give me.
WPBeginner Support
Contact the plugin support.
管理者
Amanda
Thanks for a great article!
If I use a child theme, will I still be able to customize it using the Appearance> Theme Options that comes with my theme in the admin panel such as font size, background colors etc. or do I have to go the code route?
If I have activated the Child theme and I use the Appearance tab to update the styling instead of using code, is it essentially still updating the parent theme because the related files are not in the child theme folder?
WPBeginner Support
Yes, your child theme will inherit all these options.
管理者
Amanda
Thanks for your reply.
So if I activate the Child Theme and use the settings in the Appearance tab of my admin panel to change the styling (instead of writing css code), my changes won’t be overwritten when I do a theme or Wordpress update on the parent theme?
Would I still need to copy the stylesheet, header, footer files etc. to the child theme folder to make the scenario above work?
Laura
I’ve been following these (and other) steps to create a child theme based on twentytwelve. The issue I’m running into is that wordpress seems to ignore only some of the css I’ve changed from the original theme and it’s driving me nuts. For example, I’ve successfully changed the background colour of the menu, but it simply won’t let me change the text colours of anything. I’ve used your approach of editing it in chrome’s code inspector thing (which worked great, the colour got changed, suggesting my code was correct) and pasting the changed code into the style.css of the child theme, but it doesn’t seem to get picked up at all. I don’t know what to do about this, any insights would be very welcome!
Boyet
Thank you very much for this tutorial. I don’t have problem editing my child theme’s stylesheet, header, and footer files.
My question is, what will I do if I wanted to change something in a file located in my mother theme’s folder like: public_html/wp-content/themes/shopera/woocommerce?
Do I need to create the same path in my child theme?
Thanks in advance…
WPBeginner Support
Yes.
管理者
Tony Arnold
Very helpful and largely understood and executed.
I am trying to make my header image full width.My theme doesn’t ‘allow’ this as standard so do i change the file?
Thank you
Sohail Farooq
Love this article I tried and got it worked at once.
Xander
Hi, there!
It seems I have got stuck a little bit. I have already made some changes in the some .php-files (e.g. header.php, footer.php and so on) of my parent theme without having a child theme installed.
Now I want to create a child theme because updates of the parent one have been coming. What should I do with all those already modified files? Should I copy them in the child theme’s directory? What are folder I need to have it it? Should I create the same folders that the parent theme has got for the child theme?
Thank you,
WPBeginner Support
You don’t need all the folders of your parent theme. You just need to recreate the files where you have made changes. We have a tutorial on how update themes without losing changes. It has a section where you can find out which files you have modified in your theme and what changes you have made to them.
Download a fresh copy of your parent theme on your computer. Download the old theme to your computer and then upload the fresh copy. After that create a new child theme. Copy the files where you have made changes from the fresh theme to your child theme. Copy the changes you have made in the old theme files into the files of your new child theme.
It would take some troubleshooting before you get it right. So we strongly recommend you to backup your site first. If possible test your changes on a local WordPress install first.
管理者
Xander
Thank you. Could you please give me a link on the tutorial mentioned?
There is another obstacle – I have changed functions.php file, how can I reconcile both of them in the parent and child themes?
Chris
Can I load and install my new child theme on another site? If so how?
Thanks!
WPBeginner Support
Download your child theme to your computer. Create a zip file containing the theme folder. Go to the admin area of another site and then visit Appearance » Themes. Click on the add new theme button and then click on the upload button. Upload the zip file you created earlier. WordPress will extract and install your child theme.
You will also need to install the parent theme as well.
管理者
Daniel Garneau
Hello,
I find this tutorial very useful to learn how to create a child theme. But in the process I made the following ajustments. There needs to be two files in the child-theme directory. They have to be named style.css and functions.php.
style.css must contain at least (supposing one is using the TwentyTen theme):
@import url(“../twentyten/style.css”);
Template: twentyten
When I consulted the turorial on 2015-05-12, the “template: twentyten” line was in the comment block. It must be a command that can be read by WordPress.
Also, there must be a functions.php file, and it has to have minimally the following line of command :
<?php
Your tutorial along with the wp codex, helped me creating my first child theme. Thank you.
Maria
Is it safe to say that the changes I made in the custom css field can be placed into my child’s theme style.css?
WPBeginner Support
Yes.
管理者
Louise Mason
I am falling at the first fence – how do i find /wp-content/themes/? Actually where is the WordPress installation folder? In the video i can’t see what you click on or how you open it, the file manager just appears by magic!
WPBeginner Support
You can access File Manager by visiting your web hosting dashboard. Login to your web hosting account and locate File Manager.
管理者
Sonam
when I select the file manager of my web hosting account , I get four options :
1)home directory
2)web root
3)public ftp root
4)Document root
which one should I select to work on.
Kylee
Hi – I go with Home Directory. That takes me to all the files. I click on Public HTML on the left to access my various sites. You probably figured it out at some stage but just in case you didn’t…
Viju
Hi,
I’m using a child theme for my website. What I’m struggling is to give a version to my style.css of the child theme. Wordpress seems to append default wordpress version at the end of the file like /style.css?ver=4.1.1
I’m incrementing the value of ‘version’ in my child’s style.css , but wordpress is not picking it.
Because of this my changes to the child theme are not getting reflected to users who has the cached version of the css.
can you advise how to handle this ?
Stephen James
At the very start I am lost. Where did you get the style css code at the start???? You only tell us to past it in but not where it came from. Surely if I am using a different theme it will be a different code.
Vatsal Savani
Hey Stephen,
The code at the start is like general info for the theme, it is nearly the same for every theme, you just have to change the content after the colon, i.e. If your theme name was stephenstheme, you may have the code at the start be like:
Theme Name: stephenstheme
Theme URI: http://www.yourwebsite.com
Description: A Twenty Thirteen child theme made by stephen
Author: Stephen James
Author URI: http://www.yourwebsite.com
Template: twentythirteen
Version: x.x.x
Hope you get what I mean, good luck!
Ariz Khan
Hi WPB, I solved it, reference to my previous mail. Guess what – it was syntax error on my part – I uploaded Style.css, which I renamed to style.css as required and voila it worked. Thanks.
WPBeginner Staff
Did you save the template file as style.css
ada
I also had the same problem. I deleted the numbers on notepad and could see the template.
Kim
I’m trying to create a child theme for twentythirteen following your instructions above. I created the folder and copied the code you have listed above into a text file. I saved the code to the new folder. I am unable to activate the child theme because the “template is missing”. Help!?
canciller
Using @import for the “style.css” on a child theme is not reccommended by wordpress codex
http://codex.wordpress.org/Child_Themes
is it safe to use it ? what are the downsides of using @import ?
Pat
The downside of using @import instead of wp_enqueue_script(), as recommended in the codex, is slower page loading. An employee at Automattic gives an explanation at this link https://kovshenin.com/2014/child-themes-import/
Vatsal Savani
In short, it will decrease the performance of your site and also make it slower.
Praveen Kumar
What about building child themes on Genesis Framework?