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子テーマの作り方(初心者ガイド)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressで子テーマを作りたいですか?

子テーマは、他のWordPressテーマの機能を継承したWordPressテーマです。多くのユーザーは、テーマ開発者が更新をリリースしたときに変更を失うことなく、安全にサイトデザインをカスタマイズできるように、現在使用しているテーマの子テーマを作成します。

この投稿では、WordPressサイトに子テーマを作成する方法を紹介します。

How to Create a WordPress Child Theme

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

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

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

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

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

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

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

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

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

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

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

プロのヒント 子テーマを作成せずにテーマをカスタマイズしたいですか?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プラグインをインストールして有効化する必要があります。その後、外観 ” ブロックテーマを作成する。

ここでは、「[テーマ名]の子テーマを作成」を選択するだけです。この例ではTwenty Twenty-Fourを使っています。

オプションを設定したら、テーマの情報を入力してください。

Creating a child theme with Create Block Theme

その下には、他のテーマと差別化するためにテーマのスクリーンショットをアップロードしたり、画像クレジットを追加したり、必須のWordPressプラグインへのリンクを貼ったり、テーマタグを追加したりといったことができます。

設定が終わったら、すべて下にスクロールして「ジェネレータ」ボタンを押す。

Generating a child theme with Create Block Theme

プラグインは新しい子テーマのzipファイルを作成し、コンピューターにダウンロードします。

開くと、readme、style.css、theme.jsonの3つのファイルがある。

theme.jsonファイルは、色、タイポグラフィ、レイアウトなど、ブロックテーマのさまざまな側面を定義します。プラグインは初期設定でこのファイルを作成し、後で子テーマで親テーマのスタイルを上書きまたは拡張できるようにします。

この段階で、次にすることはすべて、外観 ” テーマに行くことです。

その後、「新規テーマを追加」をクリックします。

Adding a new theme in WordPress

次に、「テーマのアップロード」を選択します。

次に、ZIPファイルを選択し、「今すぐインストール」をクリックしてWordPressテーマをインストールします。

Uploading a child theme in WordPress

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

運がよければ、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ボタン(レンチのアイコン)をクリックします。

次に、「変更を保存」をクリックします。これで変更内容がすべて子テーマ.jsonファイルに保存されます。

Saving a child block theme's changes using the Create Block Theme plugin

theme.jsonファイルを開くと、変更内容がコードに反映されているのがわかります。

子テーマを更新した結果は以下の通り:

A child block theme.json file after changes were made to it using the Create Block Theme plugin

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

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

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

ほとんどの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のスピードとパフォーマンスを向上させる究極のガイドと、サイトを簡単にデザインできるドラッグ&ドロップ式のページビルダーを専門家が厳選した記事もご覧ください。

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$編集プロセスをご覧ください。

Avatar

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

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

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    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.

    • WPBeginner Support says

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

      管理者

  3. Yogesh Sambare says

    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 .

  4. Ricardo says

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

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

    cheers!

    • WPBeginner Support says

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

      管理者

  5. Eitan says

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

  6. Bomo says

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

    • WPBeginner Support says

      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 says

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

  7. Mahesh Yadav says

    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 says

      While the load time would technically increase, it shouldn’t be by a noticeable amount.

      管理者

  8. Daniel Waduka says

    I am just starting to use child themes, and this article has been of so much help to me.

    Thanks so much.

  9. Marcos Flores says

    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)

  10. Khema says

    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.

  11. rReons says

    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?

  12. balu says

    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.

  13. Alfonso de Garay says

    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 says

      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.

      管理者

  14. Lisa Bruce says

    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 says

      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.

      管理者

  15. Nell Yang says

    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!

  16. Tony Agee says

    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.

  17. JP says

    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!

  18. Rob Brooks says

    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");
    

    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 says

      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.

      管理者

  19. Carrie says

    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!

  20. Nalin says

    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.

  21. Rebecca says

    So, I don’t have the wp content folder on my computer. What should I do?
    Should I have downloaded this at some point?

  22. Jean-philippe says

    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.

  23. Kevin says

    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.

  24. Francesco says

    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.

  25. Carolina says

    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?

  26. Mike says

    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

  27. Olamide says

    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.

  28. lucia says

    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.

  29. Leigh says

    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!

  30. Bhautik Andhariya says

    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.

  31. Angelo says

    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!

  32. Djamila says

    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.

  33. Amanda says

    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?

      • Amanda says

        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?

  34. Laura says

    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!

  35. Boyet says

    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…

  36. Tony Arnold says

    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

  37. Xander says

    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 says

      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 says

        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?

    • WPBeginner Support says

      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.

      管理者

  38. Daniel Garneau says

    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.

  39. Maria says

    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?

  40. Louise Mason says

    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!

      • Sonam says

        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 says

          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…

返信を残す

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