WordPressプラグインで子テーマを3分で作成する方法（親テーマデザインの継承可能）

2021年4月11日

ワードプレスのカスタマイズには子テーマを使うことが望ましいですが、使用しているテーマによっては子テーマが提供されていません。

そんな場合、子テーマを自作する必要があるわけですが、今回はプラグインを使用して３分で制作してみましょう。

ちなみに、

• 子テーマがなぜ必要か？
• プラグインを使用しない子テーマの作り方
• 子テーマの使い方（親テーマ機能との連携を理解する）

についてはこちらの記事を参考にしてください。

使用プラグインChild Theme Configurator

プラグインChild Theme Configuratorは、有効インストール数も30万を超える実績のプラグインですので、安心して使用できると思います。
（2カ月前に更新されたばかりですが、本記事作成時はワードプレスversion5.7がリリース後間がないので使用中WordPressバージョンで未検証とはなっています。）

使用テーマはTwenty Twenty-One

今回はテーマTwenty Twenty-Oneを使っていきます。

ダッシュボードメニュー　外観＞テーマ　の画面

ちなみにサイト表示（トップページ）は次の通りです。
サイトタイトルとキャッチフレーズ以外はデフォルト状態です。

子テーマの作成手順

それでは、子テーマを実際に作成してみましょう。手順は以下の２ステップだけです。

• プラグインChild Theme Configuratorをインストール・有効化する
• プラグインの設定をする（設定画面で４クリックで終了）

では、Child Theme Configuratorをインストール・有効化後のプラグインの設定から解説していきます。

１．ダッシュボードメニュー　ツール＞Child Themes　に入る

２．設定をして子テーマを作成

①CREATE a new Child Themeを選択（デフォルトで選択されている）
②テーマを選ぶ
③”Analyze”ボタンをクリック
④”Create New Child Theme”ボタンをクリック

まずは手順①～③の画像です。
②のテーマの選択（ドロップダウンメニューから選択）して、③”Analayze”をクリックします。

しばらくすると、”This Theme appears OK to use as a Child Theme.”と子テーマが作成可能であることが表示されます。

※テーマによっては、子テーマを作成すると不具合の出るものもあるので、ここで確認が必要です。

画面を下へスクロールして一番下の”Create New Child Theme”をクリックすると子テーマが作成されます。

途中に設定する箇所がありますが、基本的にはデフォルトのままでOKです。
一応簡単な解説を画像で紹介します。

もし、親テーマですでにウィジェットやメニュー設定などをしていて、それを子テーマにも引き継ぎたい場合は、上の画像の場所にチェックを入れます（まずはチェックなしで作成）。

後ほど、ここにチェックを入れて親テーマの設定を実際に引き継げるかも別途確認します。

子テーマの確認

それでは、無事に子テーマが作成されているかを確認していきます。

インストールの確認と有効化

ダッシュボードメニュー　外観＞テーマ　で、子テーマがインストールされていることを確認します。

まだ親テーマが有効化されている状態なので、子テーマのほうを有効化します。

style.cssが機能することを確認

有効化した子テーマが意図した動きをするかを確認します。

まずは、style.cssにcssを記述して反映されるか確認します。

１．ダッシュボードメニュー　外観＞テーマエディター　を開ける

２．styel.cssファイル内にcssを記述する

文字色を白、背景色を青紫とするcssを記述します。

body {
    color: white;
    background-color: blueviolet;
}

style.cssの最初のコメント文が終了後の行に記述します。

記述後、”ファイルの更新”をします。

３．サイト表示して確認

子テーマのstyle.cssが機能していることがわかりました。

functions.phpが機能することを確認

ではもう一度ダッシュボードメニューの　外観＞テーマエディター　を開いて、functions.phpに次の記述をします。

function shortcode_test(){
    return "テストしてみる";
}
add_shortcode('test', 'shortcode_test');

簡単なショートコートを作成するコードです。
[test]というショートコードを記述すると”テストしてみる”と表示されるようになります。

functions.phpの最初のほうの記述が終了した後（//END ENQUE PARENT ACTIONの後）に記述します。

記述後”ファイルを更新”をします。

投稿エディター（ブロックエディター）の中でショートコードを入力してプレビューしてみると、無事ショートコードが機能していることが確認できました。

これでfunctions.phpも機能していることが確認できました。

親テーマのテンプレートファイルをコピーする方法

子テーマの中には、現在、style.css、functions.phpおよびテーマ一覧で表示するのに使う画像ファイル（screenshot.png）の３つしかありません。

したがって仮にテンプレートファイルを編集して使いたい場合は、親テーマから子テーマへコピーする必要があります。

テンプレートファイルのコピーは、FifleZillaなどのFTPソフトを使用して直接サーバー内でコピーすることができますが、プラグインChild Theme Configuratorで簡単にコピーできますので紹介しましょう。

再びダッシュボードメニュー　ツール＞Child Themes　からChild Theme Configuratorの設定画面に入って次の作業をします。

①Filesタブへ切り換える
②コピーしたいテンプレートファイルにチェックを入れる
③”Copy Selected to Child Theme”をクリックする

例えば、header.phpおよび関連テンプレートパーツをコピーしてみました。

コピーしたのは
header.php
template-parts/header/entry-header.php
template-parts/header/site-header.php
の３つです。

ダッシュボードメニューの　外観＞テーマエディター　で確認すると先ほどまでなかったこの３つのファイルがコピーされているのが確認できます。

このように必要なテンプレートを子テーマにコピーして編集することが可能になるのです。

親テーマのデザイン設定を子テーマに継承する

最後に、親テーマのデザイン設定の継承確認をしておきましょう。

ここでいう各種デザイン設定とは、本来ワードプレスやテーマが持っている機能を使った以下のようなものです。

• テーマカスタマイザーによるデザインカスタマイズ
• メニューを使ったナビゲーション設定
• ウィジェットによる記事エディター外エリア（サイドバーやフッターなど）への部品の配置

こういったデザインを親テーマで設定した後で子テーマを作成した場合、通常は引き継ぎできません。子テーマで最初から設定しなおす必要があります。

したがって通常はサイトづくりをスタートする前に子テーマを作成・有効化してから、各種デザイン設定をしていくのがセオリーなわけです。

しかし、プラグインChild Theme Configuratorならば、あとからでも親テーマのデザイン設定の引き継ぎが可能です。そのことを確認してみましょう。

親テーマを使ってデザイン設定をしておく

あらかじめ、テーマTwenty Twenty-One（親テーマ）を有効化した状態で、次のデザイン設定をしておきました。

①テーマカスタマイザーで背景色をピンク色に設定
②ナビゲーションメニューを作成
③投稿で1記事作成
④フッターにウィジェットでプロフィールを作成

子テーマを作成

プラグインChild Theme Configuratorで子テーマを作成します。

作成手順はすでに紹介した通りですが、以下のように”Copy・・・・from the Parent Theme to the Child Theme”にチェックを入れて”Create New Child Theme”をクリックします。

作成した子テーマを有効化してサイト表示させると以下の通りです。

• テーマカスタマイザーで設定した背景色
• 投稿した記事
• ナビゲーションメニュー
• フッタエリアのウィジェット

の全てが子テーマに継承されていることが確認できました。

子テーマ作成後はプラグインを無効化・削除してもOK

なお、子テーマ作成後にプラグインChild Theme Configuratorを無効化・削除しても、作成した子テーマはそのまま残ります。

したがって、プラグインの数を増やしたくない人は、子テーマ作成後に削除してしまえばよいでしょう。

ただし、親テーマからのテンプレートファイルのコピーはできなくなるので、FTPソフトを使用するようにしましょう。

まとめ

プラグインChild Theme Configuratorで、

• 簡単に子テーマを作成できる
• 作成前に子テーマを作成可能なテーマかどうかを分析してくれる
• 親テーマのテンプレートファイルを子テーマに簡単にコピーできる
• 親テーマのデザイン設定（メニュー・ウィジェット・テーマカスタマイザー）を引き継げる

といったことができることを確認・解説してきました。

また、プラグインが増えるのが嫌な場合は、子テーマ作成後に無効化・削除しても子テーマはそのまま使用可能です。

このように便利なプラグインですので、子テーマをつくろうかどうしようか迷っておられる方は、ぜひ使ってみてはいかがでしょうか？

再度以下の記事と合わせて確認するとよいでしょう。