子テーマは、WordPressでよく使われる言葉でありながら、初心者を混乱させるものの1つです。聞いたことはあっても、複雑に見えるため作成をスキップしたかもしれません。
その気持ちはわかります。しかし、私たちの経験では、子テーマは後々の多くの頭痛の種を減らすことができます。貴重なカスタマイズを保護し、サイトを壊すことなく実験でき、テーマの更新を簡単に行えます。
もしご興味があれば、この初心者向けのガイドで、子テーマの仕組み、カスタマイズ方法、変更方法について詳しく説明しています。

子テーマはどのように機能し、なぜ必要なのですか?
子テーマは、別のWordPressテーマのすべての機能、機能、およびスタイルを継承します。子テーマを作成すると、元のテーマは親テーマと呼ばれます。
継承には、テーマのメインスタイルを定義する親テーマのstyle.cssファイルが含まれます。子テーマは、独自のファイルを追加したり、既存のファイルを変更したりすることで、継承されたプロパティをオーバーライドまたは拡張できます。
子テーマをインストールせずにWordPressテーマをカスタマイズすることは可能ですが、それでも子テーマが必要になる可能性のある理由はいくつかあります。
- 子テーマは、テーマの更新中にカスタマイズを保護し、上書きされないようにします。親テーマを直接変更すると、更新時にそれらの調整が失われる可能性があります。
- 子テーマを使用すると、ステージング環境と同様に、サイトの元のテーマを台無しにすることなく、新しいデザインや機能を安全に試すことができます。
- コーディング方法を知っている場合、子テーマは開発プロセスをより効率的にすることができます。子テーマのファイルは、親テーマのファイルよりもはるかに単純です。変更または拡張したい親テーマの部分のみを変更することに集中できます。
WordPress の子テーマを作成する前にやるべきこと
WordPressユーザーの中には、技術的なことに飛びついたものの、エラーが表示されて落胆してしまう人がたくさんいます。わかります。だからこそ、子テーマを作成する前に、何に取り組んでいるのかを知ることが重要です。
このステップバイステップガイドを続ける前に、まず以下のことを行うことをお勧めします。
- コードを扱うことになることに注意してください。少なくとも、HTML、CSS、PHP、およびオプションでJavaScriptの基本的な理解が必要になります。これについては、WordPressテーマハンドブックで詳しく読むことができます。
- 希望するウェブサイトのデザインと機能を持つ親テーマを選択してください。可能であれば、数か所変更するだけで済むものを見つけてください。必要に応じて、WordPressテーマを変更する前にやることチェックリストに従うことができます。
- テーマ開発には、ローカルサイトまたはステージングサイトを使用してください。ライブサイトに意図しないエラーを作成したくはありません。
- まずウェブサイトをバックアップしてください。初めての場合は、Duplicatorのようなバックアッププラグインを使用することをお勧めします。
既存のテーマから子テーマを作成するには、いくつかの方法があります。1 つは手動でコードを作成する方法で、もう 1 つはプラグインを使用する方法で、これは初心者にとってより簡単です。
技術的な経験がない場合、最初の方法は少し intimidating に見えるかもしれません。とはいえ、プラグインの方法を選択した場合でも、プロセスと関連ファイルに慣れるために、手動の方法を最後まで読むことをお勧めします。
プロのヒント: 子テーマを作成せずにテーマをカスタマイズしたいですか?WPCodeを使用して、ウェブサイトを壊すことなくカスタムコードスニペットで新しい機能を安全に有効にします。
これらすべてを念頭に置いて、WordPressで子テーマを作成する方法を見ていきましょう。以下のリンクを使用して、希望する方法にジャンプできます。
方法 1: 子 WordPress テーマを手動で作成する
まず、WordPressインストールフォルダの/wp-content/themes/を開く必要があります。
これは、WordPressホスティングのファイルマネージャーまたはFTPクライアントを使用して行うことができます。最初のオプションの方がはるかに簡単なので、それを使用します。
Bluehostのクライアントの場合は、ホスティングアカウントダッシュボードにログインして、「Websites」タブに移動できます。その後、「Settings」をクリックします。

「概要」タブで、「クイックリンク」セクションまでスクロールします。
次に、「ファイルマネージャー」を選択します。

この段階で、ウェブサイトのpublic_htmlフォルダに移動し、/wp-content/themes/パスを開く必要があります。
ここで、左上隅にある「+ フォルダー」ボタンをクリックして、子テーマ用の新しいフォルダーを作成します。

フォルダ名は自由に設定できます。
このチュートリアルでは、親テーマとしてTwenty Twenty-Oneを使用するため、フォルダー名はtwentytwentyone-childを使用します。完了したら、「新しいフォルダーを作成」をクリックするだけです。

次に、作成したフォルダーを開き、「+ ファイル」をクリックして、子テーマの最初のファイルを作成する必要があります。
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
);
}
完了したら、前のステップと同様にファイルを保存してください。
注: この方法では、子テーマのスタイルシートが正しく読み込まれるように、公式の子テーマおよびアセットのインクルードドキュメントを読むことをお勧めします。
これで、非常に基本的な子テーマが作成されました。WordPress管理画面で外観 » テーマに移動すると、Twenty Twenty-One Childオプションが表示されるはずです。
「有効化」ボタンをクリックして、子テーマをサイトで使用開始してください。

方法2:プラグインを使用して子クラシックテーマを作成する
次の方法は、Child Theme Configurator プラグインを使用します。この使いやすい WordPress プラグインを使用すると、コードを使用せずに WordPress の子テーマをすばやく作成およびカスタマイズできますが、クラシック(ブロックではない)テーマでのみうまく機能します。
最初に行う必要があるのは、WordPress プラグインをインストールして有効化することです。有効化したら、WordPress ダッシュボードの ツール » 子テーマ に移動する必要があります。
「親/子」タブで、アクションを選択するように求められます。「新しい子テーマを作成」を選択して開始してください。

次に、ドロップダウンメニューから親テーマを選択します。ここでは Hestia テーマを選択します。
その後、「分析」ボタンをクリックして、テーマが親テーマとして使用するのに適していることを確認してください。

次に、子テーマが保存されるフォルダーの名前を入力するように求められます。フォルダー名は任意に使用できます。
その下で、新しいスタイルを保存する場所を選択する必要があります。プライマリースタイルシートか、別のスタイルシートか。
プライマリスクリプトは、子テーマに付属するデフォルトのスクリプトです。このファイルに新しいカスタムスタイルを保存すると、子テーマのメインスタイルを直接変更することになります。すべての変更は、元のテーマのスタイルを上書きします。
別々のオプションを使用すると、新しいカスタムスタイルを別のスタイルシートファイルに保存できます。これは、元のテーマのスタイルを保持し、上書きしたくない場合に便利です。
デモンストレーション目的で、最初のオプションを選択します。しかし、子テーマのカスタマイズに創造性を発揮するにつれて、いつでもこのプロセスを繰り返し、2番目のオプションを選択できます。

次に、親テーマのスタイルシートにどのようにアクセスするかを選択する必要があります。
プラグインが適切なアクションを自動的に判断できるように、「WordPressのスタイルキューを使用する」のデフォルト設定を使用します。

ステップ7に到達したら、「子テーマ属性の編集をクリック」というラベルのボタンをクリックする必要があります。
次に、子テーマの詳細を入力できます。

子テーマを手動で作成すると、親テーマのメニューとウィジェットが失われます。子テーマコンフィギュレーターは、それらを親テーマから子テーマにコピーできます。これを行いたい場合は、ステップ8のチェックボックスをオンにしてください。
最後に、「新しい子テーマを作成」ボタンをクリックして、新しい子テーマを作成します。

このプラグインは、子テーマ用のフォルダを作成し、後でテーマをカスタマイズするために使用するstyle.cssファイルとfunctions.phpファイルを追加します。
テーマを有効化する前に、画面上部近くのリンクをクリックしてプレビューし、見た目が良くサイトが壊れないことを確認してください。

すべてうまくいっているように見えたら、「アクティベート&公開」ボタンをクリックします。
これで、子テーマが公開されます。
この段階では、子テーマは親テーマとまったく同じように見え、動作します。

方法3:プラグインで子ブロックテーマを作成する
ブロックテーマを使用している場合、WordPress は Create Block Theme プラグインを使用して子テーマを簡単に作成する方法を提供します。
まず、WordPress プラグインをインストールして有効化する必要があります。その後、外観 » ブロックテーマを作成 に移動します。
ここで、「[現在のテーマ名]の子テーマを作成」を選択するだけです。

次に、子テーマの情報を入力します。この例ではTwenty Twenty-Fourを使用しているため、Twenty Twenty-Four Childと名付けます。
子テーマの説明と作成者も記載しました。完了したら、「子テーマを作成」ボタンをクリックします。

プラグインは、WordPress テーマの zip ファイルを作成し、管理画面にインストールします。
完了すると、ウェブサイトは新しく作成された子テーマを自動的に有効化します。これは、外観 » テーマに移動することで確認できます。

ボーナスのヒント:テーマに子テーマジェネレーターがあるかどうかを確認する
運が良ければ、WordPressテーマに子テーマを作成する既存の機能が既に搭載されている場合があります。
たとえば、Astra を使用している場合は、Astra Child Theme Generator のウェブサイトにアクセスできます。その後、子テーマの名前を入力して「生成」ボタンをクリックするだけです。

ブラウザは自動的に子テーマをコンピューターにダウンロードします。その後、ご自身でWordPressにインストールできます。
また、子テーマジェネレーターを備えた、その他の人気の WordPress テーマもいくつか見つけました。
クラシック子テーマをカスタマイズする方法
注意: このセクションは、クラシック WordPress テーマのユーザー向けです。ブロックテーマを使用している場合は、次のセクションにスキップしてください。
技術的には、テーマカスタマイザーを使用して、コードなしで子テーマをカスタマイズできます。そこで行う変更は、親テーマに影響しません。まだコーディングに慣れていない場合は、カスタマイザーを自由に利用してください。
とはいえ、子テーマをコードでカスタマイズすることも推奨します。
WordPress テーマ開発についてさらに学ぶことに加えて、コードのカスタマイズにより、変更を子テーマのファイル内に文書化できるため、追跡が容易になります。
さて、子テーマをカスタマイズする最も基本的な方法は、style.css ファイルにカスタム CSS を追加することです。これを行うには、カスタマイズする必要のあるコードを知る必要があります。
親テーマの既存のコードをコピーして変更することで、プロセスを簡略化できます。そのコードは、ChromeまたはFirefoxのインスペクトツールを使用するか、親テーマのCSSファイルから直接コピーすることで見つけることができます。
方法1:ChromeまたはFirefoxインスペクターからコードをコピーする
修正が必要なCSSコードを見つける最も簡単な方法は、Google ChromeやFirefoxに付属しているインスペクターツールを使用することです。これらのツールを使用すると、ウェブページの任意の要素の背後にあるHTMLとCSSを確認できます。
インスペクタツールについては、DIY ユーザー向けの WordPress カスタマイズの要素の検査の基本に関するガイドで詳しく読むことができます。
Webページを右クリックして要素を検査すると、ページの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テーマでブロッククォートのスタイルをカスタマイズする方法
- WordPress Body Class 101:テーマデザイナー向けのヒントとトリック
- WordPress テーマにパララックス効果を追加する方法
ブロック子テーマのカスタマイズ方法
子ブロックテーマを使用している場合、カスタマイズのほとんどは style.css ではなく、theme.json ファイルで行われます。
しかし、テスト中に、プロセスが複雑であることがわかりました。 従来のチャイルドテーマとは異なり、WordPressテーマ開発の初心者であれば、埋めるべき知識のギャップ(特にJSONとCSSの処理方法について)が大きくなります。
とはいえ、Create Block Themeプラグインを使用した、はるかに簡単な代替案を見つけました。このツールは、WordPressのフルサイトエディターで行われた変更を、child theme.jsonファイルに記録できます。そのため、プラグインがすべて処理してくれるので、コードに一切触れる必要はありません。
例を見てみましょう。まず、外観 » エディターに移動して、WordPressのフルサイトエディターを開きます。

いくつかのメニューが表示され、選択できます。
ここで、「スタイル」を選択するだけです。

次のページでは、いくつかの組み込みスタイルコンビネーションから選択できます。
今回の目的のためには、それらはすべてスキップして、鉛筆のアイコンをクリックするだけでかまいません。

さて、子テーマのフォントなどをいくつか変更してみましょう。
この例では、右側のサイドバーにある「タイポグラフィ」をクリックしてください。

次に、テキスト、リンク、見出し、キャプション、ボタンのテーマのグローバルフォントを変更するオプションが表示されます。
デモンストレーションのために「見出し」をクリックしましょう。

フォントのドロップダウンメニューで、元の選択を利用可能なフォントに変更します。
必要に応じて、外観、行の高さ、文字間隔、大文字/小文字を変更できます。

完了したら、「保存」をクリックします。その後、「保存」の横にあるブロックテーマを作成ボタン(レンチアイコン)をクリックできます。
次に、「テーマに変更を保存」をクリックします。

次に、子テーマに保存する変更を選択します。
例としては、フォント、カスタムスタイル、テンプレートの変更などがあります。

完了したら、サイドバーを一番下までスクロールしてください。
次に、「変更を保存」をクリックします。

さて、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ファイルを編集するには、右クリックして「編集」を選択するだけです。

例として、フッターエリアから「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ファイルは、PHPコードを使用してWordPressサイトの機能を追加したり、デフォルトの機能を変更したりします。これは、現在のテーマで自動的にアクティブ化される、WordPressサイト用のプラグインのようなものです。
多くのWordPressチュートリアルでは、コードスニペットをfunctions.phpにコピーして貼り付けるように指示されています。しかし、親テーマに変更を加えると、テーマの新しいアップデートをインストールするたびに上書きされてしまいます。
カスタムコードスニペットを追加する際は、子テーマを使用することをお勧めします。このチュートリアルでは、テーマに新しいウィジェットエリアを追加します。
これを実現するには、このコードスニペットをチャイルドテーマのfunctions.phpファイルに追加します。プロセスをさらに安全にするために、WPCodeプラグインの使用をお勧めします。これにより、functions.phpファイルを直接編集することなく、エラーのリスクを減らすことができます。
詳細については、カスタムコードスニペットの追加方法に関するガイドをお読みください。
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コミュニティは非常に resourceful なので、どんな問題に直面していても、おそらくすでに解決策が存在します。
まず、最も一般的なWordPressのエラーとその解決策を確認できます。
最もよく見られるエラーは、コードのどこかを見落としたことによる構文エラーです。WordPressで構文エラーを見つけて修正する方法に関するクイックガイドで、これらの問題の解決に役立つ情報を見つけることができます。
さらに、何か重大な問題が発生した場合でも、いつでも最初からやり直すことができます。たとえば、親テーマで必要とされるものを誤って削除してしまった場合は、子テーマからファイルを削除して最初からやり直すことができます。
この記事でWordPressの子テーマの作成方法を学べたことを願っています。また、最新の標準に対してWordPressテーマをテストする方法に関する究極のガイドや、無料 vs 有料WordPressテーマの比較記事も確認することをお勧めします。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。


Mrteesurez
この記事は、WordPressの旅を始めたばかりの私たちにとって、非常に示唆に富んでいます。私が最初に始めた頃、子テーマを使用することの重要性を過小評価しており、テーマのアップデート後にすべてのカスタマイズを失ってしまったことを覚えています。苦労して学ぶことで、変更を保存する上で子テーマの価値を実感しました。作成前に何をすべきかを強調していただきありがとうございます。このガイドは、多くの初心者が同様のフラストレーションから救われるでしょう!
オヤトグン・オルワセウン・サミュエル
子テーマが提供する柔軟性が気に入っています。なぜなら、親テーマがアップデートされても、子テーマで行った変更は維持されるからです。また、子テーマを手動で作成することも気に入っています。その方法で間違いを犯すことで、私の理解と専門知識が増加すると信じているからです。私たちは間違いから学びます。
Mrteesurez
全く同感です!子テーマが提供する柔軟性は、特に親テーマのアップデート時にカスタマイズを維持する上で、ゲームチェンジャーとなります。私も同じ理由で、手動で子テーマを作成することを楽しんできました。最初は少し daunting に感じるかもしれませんが、コードに深く入り込むことで、理解が深まるだけでなく、開発者としての自信も高まることに気づきました。
子テーマの作業を始めたばかりの頃、スタイルのエンキューを忘れたり、functions.phpファイルをいじってしまったりと、いくつかの間違いを犯したことを覚えています。一つ一つの間違いが貴重な学習機会となり、WordPressテーマの仕組みをより深く理解するのに役立ちました。さらに、更新中にカスタマイズが安全であることを知っていると安心できます。間違いなく開発する価値のあるスキルです!あなたの考えを共有してくれてありがとう。実践的な学習を重視する他の人々とつながることができて嬉しいです。
クリス
子テーマは必要ないと思っていて、あまり深く考えていませんでした。この記事を読むまで、テーマがアップデートされたときに、カスタマイズされた関数がfunctions.phpファイルから削除されることに気づいていませんでした。私にとって、WordPressテーマリポジトリからテーマを使用する場合、子テーマは必須です。この有益な記事をありがとうございます!
Dayo Olobayo
子テーマに関する素晴らしい指摘です。ただし、もう1つの選択肢も検討できます… 一部のプレミアムテーマでは、コード編集を完全に不要にするカスタマイズパネルが提供されています。しかし、特にコードに慣れている場合は、子テーマの方が長期的にはより柔軟性があります。
Mrteesurez
私も最初に始めた頃は同じようなことがありました。子テーマのことは全く考えていませんでしたが、後になって、頻繁に更新される無料テーマにカスタマイズを追加する際に、いかに役立つかを知りました。子テーマのファイルは親テーマの前に読み込まれるため、追加したカスタマイズを保持することができます。
ハジャラ
この包括的なガイドをありがとうございます。プラグイン方式で子テーマを作成したいのですが、まだいくつか不明な点があります。
WPCodeプラグインのコードは子テーマに有効になりますか?親テーマが更新され、子テーマが更新されない場合、競合してエラーが発生する可能性はありませんか?
WPBeginnerサポート
はい、WPCodeのコードは子テーマに表示され、親テーマを更新した場合に競合する可能性がありますが、それは保証されるものではありません。
管理者
Mrteesurez
ハジャラさん、良い質問ですね。
私も子テーマを作成し始めた頃は同じような懸念を抱いていました。WPCodeプラグインを使用すれば、コードが正しく配置されていれば、親テーマと子テーマの両方に適用されるはずです。しかし、親テーマが更新されて子テーマが更新されない場合、競合が発生する可能性があります。私もかつてこの問題でレイアウトの不具合を経験しましたが、ステージングサイトで更新をテストすることでエラーを回避することができました。
イジー・ヴァネック
新しくインストールしたサイトでは、まず子テーマを作成します。WP Codeを多用して問題を回避しようとしますが、テンプレートの更新時に子テーマは非常に役立ち、更新後にメインテンプレートから消えてしまうコードの紛失による多くのトラブルを回避できます。
アサド
親テーマを呼び出すには、function.phpに何を書けばよいですか?
WPBeginnerサポート
You would want to use the code from our article below the text /* enqueue scripts and style from parent theme */
管理者
Yogesh Sambare
こんにちは、wpbeginnerチームの皆さん、
この素晴らしいガイドをありがとうございます。これでテーマの子テーマを作成できるようになったと思います。とても助かります。
WPBeginnerサポート
Glad you found our guide helpful!
管理者
リカルド
「wp_get_theme()->get(‘Version’)」という行
こうなるべきです:
「wp_get_theme()->get(‘Version’) )」
ありがとう!
WPBeginnerサポート
While our comments automatically changed that in your message, we see the issue, thank you for letting us know
管理者
ラッブ
子テーマを作成した後、プラグインを削除しても良いですか?
WPBeginnerサポート
Currently, you can do that with the plugin
管理者
Eitan
echo date(“Y”) の Y = (“Y”) に引用符を追加する必要があります。そうしないとエラーが発生します。 – echo date(“Y”)
WPBeginnerサポート
Thank you for pointing out the typo
管理者
Bomo
さて、子テーマを作成しましたが、子テーマが有効な状態で親テーマを更新するにはどうすればよいですか?
WPBeginnerサポート
親テーマは通常通り更新します。念のため、競合が発生した場合に備えて、親テーマを更新する前にバックアップを作成することをお勧めします。
管理者
RYAD
更新する前に親テーマを有効にし、その後無効にしてから子テーマを再度有効にする必要がありますか?
WPBeginnerサポート
いいえ、テーマをアクティブにしなくても更新できます