Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress子テーマの作り方(初心者ガイド)

子テーマはWordPressのキーワードのひとつで、初心者を混乱させる。子テーマの名前を聞いたことがあっても、複雑そうなので作るのをやめてしまったという人もいるかもしれません。

それはわかります。しかし、私たちの経験では、子テーマはあなたの頭痛の種をたくさん救うことができます。貴重なカスタマイザーを保護し、サイトを壊すことなく試すことができ、テーマの更新を簡単にします。

ご興味のある方は、この初心者向けのガイドで、子テーマの仕組み、カスタマイズ方法、子テーマの変更方法について説明しています。

How to Create a WordPress Child Theme

子テーマの仕組みと必要性

子テーマは、別のWordPressテーマのすべての機能、関数、スタイルを継承します。子テーマを作成した場合、元のテーマは親テーマと呼ばれます。

継承には、テーマのメインスタイルを定義する親テーマのstyle.cssファイルが含まれます。子テーマは独自のファイルを追加するか、既存のファイルを修正することで、継承されたプロパティを上書きまたは拡張できます。

子テーマをインストールしなくてもWordPressテーマをカスタマイズすることは可能ですが、子テーマが必要な理由はいくつかあります:

  • 子テーマはテーマ更新時にカスタマイザーを保護し、上書きされないようにします。親テーマを直接変更した場合、その調整は更新時に消えてしまうかもしれません。
  • 子テーマは、ステージング環境と同様に、サイトのオリジナルテーマを台無しにすることなく、安全に新しいデザインや機能を試すことができます。
  • もしあなたがコードの書き方を知っているなら、子テーマは開発プロセスをより効率的にすることができます。子テーマのファイルは親テーマのファイルよりもずっとシンプルです。親テーマの変更または拡張したい部分だけを修正することに集中できます。

WordPressの子テーマを作る前にやるべきこと

多くのWordPressユーザーが、技術的なことに興奮しながらも、エラーが出て落胆しているのを私たちは見てきました。それはわかります。だからこそ、子テーマを作成する前に、自分が何をしようとしているのかを知ることが重要なのです。

このステップ・バイ・ステップ・ガイドを続ける前に、まずやっておくことをお勧めします:

  1. コードを扱うことを意識してください。最低限、HTML、CSS、PHP、オプションとしてJavaScriptの基本的な知識があれば、どのような変更が必要かを理解することができます。これについてはWordPressテーマハンドブックで詳しく説明されています。
  2. 希望のサイトデザインと機能を備えた親テーマを選びましょう。可能であれば、ほんの少しの変更で済むものを探しましょう。必要であれば、WordPressテーマを変更する前にやるべきことのチェックリストに従ってください。
  3. テーマ開発には、ローカルサイトまたはステージングサイトを使用してください。本番サイトで意図しないエラーを発生させたくないからです。
  4. まずサイトをバックアップしましょう。初めての場合は、Duplicatorのようなバックアッププラグインを使用することをお勧めします。

既存のテーマから子テーマを作成するには、いくつかの方法があります。ひとつは手作業でコードを書く方法、もうひとつはプラグインを必須とする方法です。

技術的な経験が乏しい場合、最初の方法は敷居が高く感じられるかもしれません。とはいえ、プラグインを使用する方法を選択した場合でも、手順と関連ファイルに慣れるために、マニュアルを一読することをお勧めします。

プロのヒント 子テーマを作成せずにテーマをカスタマイズしたいですか?WPCodeを使えば、サイトを壊すことなく、カスタムコードスニペットで安全に新機能を有効化できます。

すべてを理解した上で、WordPressで子テーマを作成する方法を説明しよう。以下のリンクからお好きな方法にジャンプできます:

方法1:WordPressの子テーマを手動で作成する

まず、WordPressインストールフォルダーの/wp-content/themes/を開きます。

WordPressホスティングサービスのファイルマネージャーまたはFTPクライアントを使用してこれを行うことができます。私たちは、最初の設定の方がずっと簡単だと思うので、それを使います。

あなたがBluehostのクライアントであれば、ホスティングアカウントのダッシュボードにログインし、’ウェブサイト’タブに移動することができます。その後、 ‘設定’をクリックします。

Bluehost site settings

概要」タブで「クイックリンク」セクションまでスクロールダウンします。

次に「ファイルマネージャー」を選択する。

Bluehost File Manager button

この段階で、サイトのpublic_htmlフォルダーに行き、/wp-content/themes/パスを開く必要がある。

ここで、左上の「+フォルダー」ボタンをクリックして、子テーマ用の新規フォルダーを作成します。

Creating a new folder in Bluehost file manager

フォルダーには好きな名前をつけることができる。

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

Naming a new child theme file in Bluehost file manager

次に、先ほど作成したフォルダーを開き、「+ File」をクリックして、子テーマの最初のファイルを作成します。

FTPクライアントを使用している場合は、メモ帳のようなテキストエディターを使って後でファイルをアップロードすることができます。

Creating a new file in Bluehost file manager

このファイルを「style.css」と命名してください。これは子テーマのメイン・スタイルシートであり、子テーマに関する情報を含むからです。

そして、『新規ファイルを作成』をクリックします。

Creating a new stylesheet file in Bluehost file manager

style.cssファイルを右クリックする。

その後、下のスクリーンショットのように「編集」をクリックして新しいタブを開きます。

Editing a style.css file in Bluehost file manager

この新しいタブで、以下のテキストを貼り付け、必要に応じて調整することができます:

/*
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
*/

完了したら、「変更を保存」をクリックするだけです。

Saving a stylesheet file in Bluehost file manager

次に必要なことは、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子テーマの設定があるはずです。

有効化」ボタンをクリックして、子テーマのサイトでの使用を開始します。

Activating a child theme in WordPress admin

方法2:プラグインで子クラシックテーマを作る

次の方法では、Child Theme Configuratorプラグインを使用します。この使いやすいWordPressプラグインを使うと、コードを使わずにWordPressの子テーマを素早く作成・カスタマイズできますが、クラシックな(ブロックではない)テーマでしかうまく動作しません。

最初に行う必要があるのは、WordPressプラグインをインストールして有効化することです。有効化したら、WordPressダッシュボードのツール ” 子テーマに移動する必要があります。

親/子タブで、アクションを選択するよう求められます。CREATE a new Child Theme “を選択してください。

Creating a new child theme with Child Theme Configurator

次に、ドロップダウンメニューから親テーマを選択する。ここではHestiaテーマを選択します。

その後、「分析」ボタンをクリックして、テーマが親テーマとして使用するのに適していることを確認します。

Choosing a parent theme in Child Theme Configurator

次に、子テーマを保存するフォルダー名を尋ねられます。任意のフォルダー名を使用できます。

その下で、新規スタイルを保存する場所を選択する必要があります:プライマリスタイルシートか区切り。

プライマリスタイルシートは、子テーマに付属するデフォルトのスタイルシートです。このファイルに新しいカスタマイザーを保存すると、子テーマのメインスタイルを直接変更することになります。すべての変更は元のテーマのスタイルを上書きします。

区切りオプションを使用すると、新しいカスタムスタイルを別のスタイルシートファイルに保存できます。元のテーマのスタイルを保持し、上書きしたくない場合に便利です。

デモンストレーションのため、最初のオプションを設定します。しかし、子テーマのカスタマイゼーションをよりクリエイティブにしていくうちに、いつでもこのプロセスを繰り返し、2番目のオプションを選択することができます。

Choosing where to save the stylesheet in Child Theme Configurator

下に進むと、親テーマのスタイルシートへのアクセス方法を選択しなければならない。

プラグインが自動的に適切なアクションを決定するので、初期設定の「Use the WordPress style queue」にします。

Choosing the parent theme stylesheet handling in Child Theme Configurator

ステップ7に進んだら、「Click to Edit Child Theme Attributes」と書かれたボタンをクリックします。

その後、子テーマの詳細を記入することができます。

Filling out the child theme details in Child Theme Configurator

手動で子テーマを作成すると、親テーマのメニューやウィジェットが失われます。Child Theme Configuratorはそれらを親テーマから子テーマにコピーすることができます。これを行いたい場合は、ステップ8のボックスにチェックを入れてください。

最後に、「新規子テーマを作成」ボタンをクリックして、新しい子テーマを作成します。

Clicking the Create New Child Theme button in Child Theme Configurator

プラグインは子テーマ用のフォルダを作成し、後でテーマをカスタマイズするために使用するstyle.cssとfunctions.phpファイルを追加します。

テーマを有効化する前に、画面上部のリンクをクリックしてプレビューし、見栄えがよく、サイトを壊さないことを確認してください。

Previewing a child theme in Child Theme Configurator

すべてがうまくいっているようであれば、「有効化して公開する」ボタンをクリックしてください。

これで子テーマが公開されます。

この段階では、子テーマは親テーマとまったく同じ外観と動作をします。

Activating a child theme after it was made with Child Theme Configurator

方法3:プラグインで子ブロックテーマを作る

ブロックテーマを使用している場合、WordPressはCreate Block Themeプラグインで簡単に子テーマを作成できます。

まず、WordPressプラグインをインストールして有効化する必要があります。その後、外観 ” ブロックテーマを作成する。

ここで、’Create a Child of [現在のテーマ名]’を選択するだけです。

Creating a child theme with Create Block Theme plugin

次に、子テーマの情報を入力します。この例ではTwenty Twenty-Fourを使っているので、Twenty Twenty-Four Childという名前にします。

また、子テーマの説明と投稿者を指定しました。完了したら、「子テーマを作成」ボタンをクリックします。

Inserting the child block theme's information in the Create Block Theme plugin

プラグインはWordPressテーマのzipファイルを作成し、管理エリアにインストールします。

完了すると、あなたのサイトは自動的にこの新しく作成された子テーマを有効化します。外観 ” テーマで確認できます。

Seeing the newly created child theme made with the Create Block Theme plugin

ボーナスのヒントテーマに子テーマジェネレータがあるか調べる

運がよければ、WordPressテーマにはすでに子テーマを作成する機能が備わっているかもしれない。

例えば、Astraを使用している場合、Astra Child Theme Generatorのサイトに行くことができます。その後、子テーマ名を記入して「Generate」ボタンをクリックするだけです。

Astra Child Theme Generator website

ブラウザーは自動的に子テーマをコンピューターにダウンロードし、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ルールもこのように表示されます:

Demonstrating how the Chrome inspect tool works

そこで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のエディターから外観 テーマファイルエディターを開くと、以下のようになります:

Adding custom CSS in a child theme's stylesheet in the theme file editor

もしあなたが初心者で、他の変更を加えたいのであれば、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へ)する必要があるかもしれません。

また、これらのチュートリアルに従って、子テーマのカスタマイズを試すこともできます:

ブロックの子テーマをカスタマイズする方法

子ブロックテーマを使用する場合、カスタマイザーのほとんどはstyle.cssではなくtheme.jsonファイルで行います。

しかし、私たちのテストでは、プロセスが複雑であることがわかりました。クラシックな子テーマとは異なり、WordPressのテーマ開発に慣れていない場合、(特にJSONとそこでのCSSの扱い方について)埋めなければならない知識の差が大きくなります。

とはいえ、私たちはCreate Block Themeプラグインを使うことで、もっと簡単な代替手段を見つけた。このツールは、WordPressフルサイトエディターで行った変更を、子テーマ.jsonファイルに記録することができる。そのため、プラグインがあなたの代わりに処理してくれるので、コードをすべて触る必要はない。

例をお見せしましょう。まず、外観 ” エディターから WordPressフルサイトエディターを開きます。

Selecting the Full-Site Editor from the WordPress admin panel

いくつかのメニューが表示されます。

ここでは「スタイル」を選択するだけだ。

Opening the Styles menu in Full Site Editor

次のページでは、いくつかのビルトインスタイルの組み合わせをご覧いただけます。

今回の目的では、すべて省略して鉛筆アイコンをクリックするだけでいい。

Clicking the Edit Styles button in the Full Site Editor

では、フォントのような子テーマの一部を変更してみましょう。

この例では、右サイドバーの「Typography」をクリックする。

Clicking the Typography menu in Full Site Editor

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

デモンストレーションのために「見出し」をクリックしてみよう。

Clicking Headings in the Full Site Editor

フォントのドロップダウンメニューで、元のピックを利用可能な任意のフォントに変更します。

必要に応じて、外観、行の高さ、文字間隔、字体を自由に変更してください。

Styling headings in the Full Site Editor

完了したら、「保存」をクリックするだけです。その後、’Save’の隣にあるCreate Block Themeボタン(レンチのアイコン)をクリックします。

そして、「変更をテーマに保存」をクリックします。

Saving changes made to a child theme with the Create Block Theme plugin

次に、子テーマに保存する変更を選択します。

カスタマイズの例としては、フォント、カスタマイザー、テンプレートの変更などがあります。

Selecting what changes to save to the child theme with the Create Block Theme plugin

サイドバーをすべてスクロールしてください。

その後、『変更を保存』をクリックします。

Clicking on the Save Changes button in the Create Block Theme plugin

それでは、コードに反映された変更を確認できるように、theme.jsonファイルを表示してみましょう。

これを行うには、もう一度「ブロックテーマを作成」ボタンをクリックし、「theme.jsonを表示」を選択します。

Clicking to view the theme.json file in the Create Block Theme plugin

クリックすると、そのファイルにいくつかの新しいコードが追加されていることがわかります。

この場合、見出しタグはセミボールドのInterフォントを使用し、行の高さは1.2、行間は1ピクセルで、小文字であることを示すコードがファイルに含まれています。

Viewing the theme.json file in the Create Block Theme plugin

ですから、子ブロックテーマを編集するときはいつでも、レンチアイコンをクリックし、変更を保存するようにしてください。

子テーマのテンプレートファイルを編集する方法

ほとんどのWordPressテーマにはテンプレートがあり、これはテーマ内の特定のエリアのデザインとレイアウトをコントロールするテーマファイルです。例えば、フッターセクションは通常footer.phpファイルで処理され、ヘッダーはheader.phpファイルで処理されます。

WordPressテーマもそれぞれレイアウトが異なる。例えば、Twenty Twenty-Oneテーマには、ヘッダー、コンテンツループ、フッターウィジェットエリア、フッターがある。

テンプレートを修正したい場合は、親テーマのフォルダーにあるファイルを探し、子テーマのフォルダーにコピーする必要がある。その後、そのファイルを開き、必要な修正を加えてください。

例えば、Bluehostを使用していて、親テーマがTwenty Twenty-Oneの場合、ファイルマネージャーで/wp-content/themes/twentytwentyoneに移動します。そして、footer.phpのようなテンプレートファイルを右クリックし、「コピー」を選択する。

Copying footer.php in Bluehost file manager

その後、子テーマのファイルパスを入力します。

完了したら、「ファイルをコピー」をクリックするだけです。

Entering the child theme's file path to copy and paste the footer.php into inside Bluehost file manager

その後、ファイル・パスにリダイレクトされます。

footer.phpファイルを編集するには、右クリックして「編集」を選択します。

Editing footer.php in Bluehost file manager

例として、フッターエリアから「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 -->

テキストエディターで表示される内容は以下の通りだ:

Replacing the WordPress footer links in footer.php inside Bluehost file manager

ファイルを保存して、変更を正式なものにする。

その後、あなたのサイトにアクセスして、新しい著作権表示をご覧ください。

Adding a dynamic copyright notice in footer.php

子テーマに新規機能を追加する方法

テーマの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ダッシュボードの外観 ” ウィジェットページにアクセスしてください。

ここに、ウィジェットを追加できる新しいカスタムウィジェットエリアが表示されます。

Creating a custom widget area for a child theme

カスタムコードスニペットを使ってテーマに追加できる機能は他にもたくさんあります。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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

98件のコメント返信を残す

  1. Jiří Vaněk

    A child theme is always the first thing I create on a newly installed site. Although I try to use WP Code a lot and avoid problems, but the child theme is an absolutely brilliant thing when updating a template and can save a lot of trouble with lost code that disappears from the main template after an update.

  2. Asad

    Sir, what should I write in function.php to call the Parent theme?

    • WPBeginner Support

      You would want to use the code from our article below the text /* enqueue scripts and style from parent theme */ :)

      管理者

  3. Yogesh Sambare

    Hi, Team wpbeginner,
    Thanks for this awesome guide, now I think I’m able to make my themes child theme, and it’s really helpful for me .

    • WPBeginner Support

      Glad you found our guide helpful! :)

      管理者

  4. Ricardo

    The line:
    “wp_get_theme()->get(‘Version’) )”

    Should be:
    “wp_get_theme()->get(‘Version’) )”

    cheers!

    • WPBeginner Support

      While our comments automatically changed that in your message, we see the issue, thank you for letting us know :)

      管理者

  5. Rubb

    Can I delete the plugin after I create the child theme?

    • WPBeginner Support

      Currently, you can do that with the plugin :)

      管理者

  6. Eitan

    You need to add quotation marks to the Y = (“Y”) at the echo date, or you’ll get an error. – echo date(“Y”)

    • WPBeginner Support

      Thank you for pointing out the typo :)

      管理者

  7. Bomo

    So now that we have created a child theme, how do we update the parent theme when the child theme is activated?

    • WPBeginner Support

      You would update the parent theme as you normally would. For safety, you may want to create a backup before you update the parent theme in case there is a conflict somewhere.

      管理者

      • RYAD

        But do we have to activate the parent theme before we update and them desactivate it and reactivate the child theme ?

        • WPBeginner Support

          No, you can update the theme without it being active

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。