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

子テーマは、WordPressでよく使われる言葉でありながら、初心者を混乱させるものの1つです。聞いたことはあっても、複雑に見えるため作成をスキップしたかもしれません。

その気持ちはわかります。しかし、私たちの経験では、子テーマは後々の多くの頭痛の種を減らすことができます。貴重なカスタマイズを保護し、サイトを壊すことなく実験でき、テーマの更新を簡単に行えます。

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

WordPress の子テーマを作成する方法

子テーマはどのように機能し、なぜ必要なのですか?

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

継承には、テーマのメインスタイルを定義する親テーマのstyle.cssファイルが含まれます。子テーマは、独自のファイルを追加したり、既存のファイルを変更したりすることで、継承されたプロパティをオーバーライドまたは拡張できます。

子テーマをインストールせずにWordPressテーマをカスタマイズすることは可能ですが、それでも子テーマが必要になる可能性のある理由はいくつかあります。

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

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

WordPressユーザーの中には、技術的なことに飛びついたものの、エラーが表示されて落胆してしまう人がたくさんいます。わかります。だからこそ、子テーマを作成する前に、何に取り組んでいるのかを知ることが重要です。

このステップバイステップガイドを続ける前に、まず以下のことを行うことをお勧めします。

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

既存のテーマから子テーマを作成するには、いくつかの方法があります。1 つは手動でコードを作成する方法で、もう 1 つはプラグインを使用する方法で、これは初心者にとってより簡単です。

技術的な経験がない場合、最初の方法は少し intimidating に見えるかもしれません。とはいえ、プラグインの方法を選択した場合でも、プロセスと関連ファイルに慣れるために、手動の方法を最後まで読むことをお勧めします。

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

これらすべてを念頭に置いて、WordPressで子テーマを作成する方法を見ていきましょう。以下のリンクを使用して、希望する方法にジャンプできます。

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

まず、WordPressインストールフォルダの/wp-content/themes/を開く必要があります。

これは、WordPressホスティングのファイルマネージャーまたはFTPクライアントを使用して行うことができます。最初のオプションの方がはるかに簡単なので、それを使用します。

もしあなたが Bluehost のクライアントであれば、ホスティングアカウントのダッシュボードにログインし、「Websites」タブに移動できます。その後、「Settings」をクリックしてください。

Bluehostサイト設定

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

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

Bluehostファイルマネージャーボタン

この段階で、ウェブサイトのpublic_htmlフォルダに移動し、/wp-content/themes/パスを開く必要があります。

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

Bluehostファイルマネージャーで新しいフォルダを作成する

フォルダ名は自由に設定できます。

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

Bluehostファイルマネージャーで新しい子テーマファイルに名前を付ける

次に、作成したフォルダーを開き、「+ ファイル」をクリックして、子テーマの最初のファイルを作成する必要があります。

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

Bluehostファイルマネージャーで新しいファイルを作成する

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

次に、「新しいファイルを作成」をクリックします。

Bluehostファイルマネージャーで新しいスタイルシートファイルを作成する

次に、style.cssファイルを右クリックします。

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

Bluehost ファイルマネージャーで 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
*/

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

Bluehostファイルマネージャーでスタイルシートファイルを保存する

次に、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オプションが表示されるはずです。

「有効化」ボタンをクリックして、子テーマをサイトで使用開始してください。

WordPress管理画面で子テーマを有効化する

方法2:プラグインを使用して子クラシックテーマを作成する

次の方法では、Child Theme Configurator プラグインを使用します。この使いやすいWordPressプラグインを使用すると、コードを使用せずにWordPressの子テーマをすばやく作成およびカスタマイズできますが、クラシック(ブロックではない)テーマでのみうまく機能します。

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

「親/子」タブで、アクションを選択するように求められます。「新しい子テーマを作成」を選択して開始してください。

Child Theme Configurator を使用した新しい子テーマの作成

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

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

Child Theme Configurator で親テーマを選択する

次に、子テーマが保存されるフォルダーの名前を入力するように求められます。フォルダー名は任意に使用できます。

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

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

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

デモンストレーション目的で、最初のオプションを選択します。しかし、子テーマのカスタマイズに創造性を発揮するにつれて、いつでもこのプロセスを繰り返し、2番目のオプションを選択できます。

Child Theme Configuratorでスタイルシートを保存する場所を選択する

次に、親テーマのスタイルシートにどのようにアクセスするかを選択する必要があります。

プラグインが適切なアクションを自動的に判断できるように、「WordPressのスタイルキューを使用する」のデフォルト設定を使用します。

Child Theme Configuratorでの親テーマのスタイルシート処理の選択

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

次に、子テーマの詳細を入力できます。

Child Theme Configuratorで子テーマの詳細を入力する

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

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

Child Theme Configurator で「Create New Child Theme」ボタンをクリックする

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

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

Child Theme Configuratorで子テーマをプレビューする

すべてうまくいっているように見えたら、「アクティベート&公開」ボタンをクリックします。

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

この段階では、子テーマは親テーマとまったく同じように見え、動作します。

Child Theme Configuratorで作成した子テーマのアクティベート

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

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

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

ここで、「[現在のテーマ名]の子テーマを作成」を選択するだけです。

Create Block Themeプラグインで子テーマを作成する

次に、子テーマの情報を入力します。この例ではTwenty Twenty-Fourを使用しているため、Twenty Twenty-Four Childと名付けます。

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

Create Block Themeプラグインで子ブロックテーマの情報を挿入する

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

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

Create Block Themeプラグインで作成した新しい子テーマを表示する

ボーナスのヒント:テーマに子テーマジェネレーターがあるかどうかを確認する

運が良ければ、WordPressテーマに子テーマを作成する既存の機能が既に搭載されている場合があります。

例えば、Astraを使用している場合、Astra Child Theme Generatorのウェブサイトにアクセスできます。その後、子テーマの名前を入力して「Generate」ボタンをクリックするだけです。

Astra 子テーマジェネレーターのウェブサイト

ブラウザは自動的に子テーマをコンピューターにダウンロードします。その後、ご自身でWordPressにインストールできます。

また、子テーマジェネレーターを備えた他のいくつかの人気のWordPressテーマも見つかりました。

クラシック子テーマをカスタマイズする方法

注意: このセクションは、従来のWordPressテーマユーザー向けです。ブロックテーマを使用している場合は、次のセクションに進んでください。

技術的には、テーマカスタマイザーを使用することで、コードなしで子テーマをカスタマイズできます。そこで行う変更は、親テーマに影響しません。まだコーディングに慣れていない場合は、カスタマイザーを使用しても構いません。

とはいえ、子テーマをコードでカスタマイズすることも推奨します。

WordPressテーマ開発についてさらに学ぶことに加えて、コードのカスタマイズにより、子テーマのファイル内に変更を記録できるため、追跡が容易になります。

現在、子テーマをカスタマイズする最も基本的な方法は、style.cssファイルにカスタムCSSを追加することです。そのためには、カスタマイズする必要のあるコードを知る必要があります。

親テーマの既存のコードをコピーして変更することで、プロセスを簡略化できます。そのコードは、ChromeまたはFirefoxのインスペクトツールを使用するか、親テーマのCSSファイルから直接コピーすることで見つけることができます。

方法1:ChromeまたはFirefoxインスペクターからコードをコピーする

修正が必要なCSSコードを見つける最も簡単な方法は、Google ChromeやFirefoxに付属しているインスペクターツールを使用することです。これらのツールを使用すると、ウェブページの任意の要素の背後にあるHTMLとCSSを確認できます。

インスペクターツールについては、WordPressをDIYユーザー向けにカスタマイズする要素の基本に関するガイドで詳しく読むことができます。

Webページを右クリックして要素を検査すると、ページのHTMLとCSSが表示されます。

異なるHTML行にマウスカーソルを移動すると、インスペクターはそれらを上のウィンドウでハイライト表示します。また、ハイライトされた要素に関連するCSSルールも次のように表示されます。

Chrome のインスペクトツールの仕組みを実演する

CSS をその場で編集して、どのように見えるかを確認できます。たとえば、テーマの body の背景色を #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管理画面で外観 » テーマファイルエディターを開くと、このようになります。

テーマファイルエディタで子テーマのスタイルシートにカスタムCSSを追加する

初心者で他の変更も加えたい場合は、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のフルサイトエディターで行われたあらゆる変更を子テーマのtheme.jsonファイルに記録できます。そのため、プラグインがすべて処理してくれるので、コードに一切触れる必要はありません。

例を見てみましょう。まず、外観 » エディターに移動して、WordPressフルサイトエディターを開きます。

WordPress管理パネルからフルサイトエディタを選択

いくつかのメニューが表示され、選択できます。

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

フルサイトエディターでスタイルメニューを開く

次のページでは、いくつかの組み込みスタイルコンビネーションから選択できます。

今回の目的のためには、それらはすべてスキップして、鉛筆のアイコンをクリックするだけでかまいません。

フルサイトエディターで「スタイルを編集」ボタンをクリックすると

さて、子テーマのフォントなどをいくつか変更してみましょう。

この例では、右側のサイドバーにある「タイポグラフィ」をクリックしてください。

フルサイトエディターでタイポグラフィメニューをクリックする

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

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

フルサイトエディターで見出しをクリックする

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

必要に応じて、外観、行の高さ、文字間隔、大文字/小文字を変更できます。

フルサイトエディターでの見出しのスタイリング

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

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

Create Block Theme プラグインで子テーマに加えられた変更を保存する

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

フォント、カスタムスタイル、テンプレートの変更などが含まれます。

Create Block Themeプラグインで子テーマに保存する変更を選択する

完了したら、サイドバーを一番下までスクロールしてください。

次に、「変更を保存」をクリックします。

Create Block Theme プラグインの「変更を保存」ボタンをクリックする

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

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

Create Block Theme プラグインで theme.json ファイルを表示するためにクリックします。

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

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

Create Block Themeプラグインでtheme.jsonファイルを閲覧する

そのため、子ブロックテーマを編集する際は、必ずレンチアイコンをクリックして変更を保存し、適切に記録されるようにしてください。

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

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

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

テンプレートを変更したい場合は、親テーマフォルダでファイルを見つけて子テーマフォルダにコピーする必要があります。その後、ファイルを開いて希望する変更を加える必要があります。

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

Bluehostファイルマネージャーでfooter.phpをコピーする

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

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

Bluehostファイルマネージャー内で、子テーマのファイルパスを入力してfooter.phpをコピー&ペーストします

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

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

Bluehostファイルマネージャーで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 -->

テキストエディタには、次に示すものが表示されているはずです。

Bluehost ファイルマネージャー内の footer.php で WordPress のフッターリンクを置き換える

変更を正式に適用するために、ファイルを保存してください。

その後、ウェブサイトにアクセスして、新しい著作権表示を確認してください。

footer.php に動的な著作権表示を追加する

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

テーマのfunctions.phpファイルは、PHPコードを使用してWordPressサイトの機能を追加したり、デフォルトの機能を変更したりします。これは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コミュニティは非常に resourceful なので、どんな問題に直面していても、おそらくすでに解決策が存在します。

まず、最も一般的なWordPressのエラーとその修正方法を確認して、解決策を見つけることができます。

おそらく最もよく見かけるエラーは、コードのどこかを見落としたことによって引き起こされる構文エラーです。これらの問題を解決するのに役立つのは、WordPressで構文エラーを見つけて修正する方法に関するクイックガイドです。

さらに、何か重大な問題が発生した場合でも、いつでも最初からやり直すことができます。たとえば、親テーマで必要とされるものを誤って削除してしまった場合は、子テーマからファイルを削除して最初からやり直すことができます。

この記事が WordPress の子テーマの作成方法を学ぶのに役立ったことを願っています。また、最新の標準に対して WordPress テーマをテストする方法に関する究極のガイドや、無料 vs プレミアム WordPress テーマの比較記事も参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

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

読者とのインタラクション

108 CommentsLeave a Reply

  1. この記事は、WordPressの旅を始めたばかりの私たちにとって、非常に示唆に富んでいます。私が最初に始めた頃、子テーマを使用することの重要性を過小評価しており、テーマのアップデート後にすべてのカスタマイズを失ってしまったことを覚えています。苦労して学ぶことで、変更を保存する上で子テーマの価値を実感しました。作成前に何をすべきかを強調していただきありがとうございます。このガイドは、多くの初心者が同様のフラストレーションから救われるでしょう!

  2. 子テーマが提供する柔軟性が気に入っています。なぜなら、親テーマがアップデートされても、子テーマで行った変更は維持されるからです。また、子テーマを手動で作成することも気に入っています。その方法で間違いを犯すことで、私の理解と専門知識が増加すると信じているからです。私たちは間違いから学びます。

    • 全く同感です!子テーマが提供する柔軟性は、特に親テーマのアップデート時にカスタマイズを維持する上で、ゲームチェンジャーとなります。私も同じ理由で、手動で子テーマを作成することを楽しんできました。最初は少し daunting に感じるかもしれませんが、コードに深く入り込むことで、理解が深まるだけでなく、開発者としての自信も高まることに気づきました。

      子テーマの作業を始めたばかりの頃、スタイルのエンキューを忘れたり、functions.phpファイルをいじってしまったりと、いくつかの間違いを犯したことを覚えています。一つ一つの間違いが貴重な学習機会となり、WordPressテーマの仕組みをより深く理解するのに役立ちました。さらに、更新中にカスタマイズが安全であることを知っていると安心できます。間違いなく開発する価値のあるスキルです!あなたの考えを共有してくれてありがとう。実践的な学習を重視する他の人々とつながることができて嬉しいです。

  3. 子テーマは必要ないと思っていて、あまり深く考えていませんでした。この記事を読むまで、テーマがアップデートされたときに、カスタマイズされた関数がfunctions.phpファイルから削除されることに気づいていませんでした。私にとって、WordPressテーマリポジトリからテーマを使用する場合、子テーマは必須です。この有益な記事をありがとうございます!

    • 子テーマに関する素晴らしい指摘です。ただし、もう1つの選択肢も検討できます… 一部のプレミアムテーマでは、コード編集を完全に不要にするカスタマイズパネルが提供されています。しかし、特にコードに慣れている場合は、子テーマの方が長期的にはより柔軟性があります。

    • 私も最初に始めた頃は同じようなことがありました。子テーマのことは全く考えていませんでしたが、後になって、頻繁に更新される無料テーマにカスタマイズを追加する際に、いかに役立つかを知りました。子テーマのファイルは親テーマの前に読み込まれるため、追加したカスタマイズを保持することができます。

  4. この包括的なガイドをありがとうございます。プラグイン方式で子テーマを作成したいのですが、まだいくつか不明な点があります。
    WPCodeプラグインのコードは子テーマに有効になりますか?親テーマが更新され、子テーマが更新されない場合、競合してエラーが発生する可能性はありませんか?

    • はい、WPCodeのコードは子テーマに表示され、親テーマを更新した場合に競合する可能性がありますが、それは保証されるものではありません。

      管理者

    • ハジャラさん、良い質問ですね。
      私も子テーマを作成し始めた頃は同じような懸念を抱いていました。WPCodeプラグインを使用すれば、コードが正しく配置されていれば、親テーマと子テーマの両方に適用されるはずです。しかし、親テーマが更新されて子テーマが更新されない場合、競合が発生する可能性があります。私もかつてこの問題でレイアウトの不具合を経験しましたが、ステージングサイトで更新をテストすることでエラーを回避することができました。

  5. 新しくインストールしたサイトでは、まず子テーマを作成します。WP Codeを多用して問題を回避しようとしますが、テンプレートの更新時に子テーマは非常に役立ち、更新後にメインテンプレートから消えてしまうコードの紛失による多くのトラブルを回避できます。

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

      管理者

  6. こんにちは、wpbeginnerチームの皆さん、
    この素晴らしいガイドをありがとうございます。これでテーマの子テーマを作成できるようになったと思います。とても助かります。

  7. 「wp_get_theme()->get(‘Version’)」という行

    こうなるべきです:
    「wp_get_theme()->get(‘Version’) )」

    ありがとう!

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

      管理者

  8. echo date(“Y”) の Y = (“Y”) に引用符を追加する必要があります。そうしないとエラーが発生します。 – echo date(“Y”)

  9. さて、子テーマを作成しましたが、子テーマが有効な状態で親テーマを更新するにはどうすればよいですか?

    • 親テーマは通常通り更新します。念のため、競合が発生した場合に備えて、親テーマを更新する前にバックアップを作成することをお勧めします。

      管理者

返信する

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