WordPressの子テーマを簡単に作成できるプラグイン「Child Theme Configurator」の使い方をご紹介します。
SWELLやCocoonなどのブログテーマは、専用の子テーマが用意されていますが、WordPressの公式テーマ(Twenty Twenty-Fourなど)や有料テーマ(OnePressなど)を使う場合は、自分で子テーマを作成する必要があります。
WordPress初心者が子テーマを自作するのは大変ですが、今回紹介するプラグイン「Child Theme Configurator」を使うと、簡単に子テーマを作成できますよ。
また、Child Theme Configuratorは後から子テーマを適用できるというメリットもあります。
Child Theme Configurator をインストール
では、「Child Theme Configurator」を使って、子テーマを作成してみましょう。まずはプラグインをインストールします。
ダッシュボード左メニューから「プラグイン」→「新規追加」に進み、右上の検索窓に「Child Theme Configurator」と入力します。
プラグインが見つかったら「今すぐインストール」→「有効化」してください。
もう一度ダッシュボードから「ツール」→「Child Theme」に進むと、Child Theme Configurator の設定画面が表示されます。
WordPress子テーマを作成する
では、子テーマを作成してみましょう。①～⑨まで順番に説明していきます。
① Select an action:は「CREATE a new Child Theme」となっています。そのまま進みます。
② Select a Parent Theme:でテーマ名をクリックするとプルダウンメニューが開くので、子テーマを作成するテーマを選択します。
③ Analyze Parent Themeで「Analyze」ボタンをクリックしてください。
WordPress子テーマの設定
テーマの解析結果が表示されます。子テーマが作成可能であれば「This theme appears OK to use as a Child theme.」と表示されるので、④以降の項目を順にチェックしていきます。
④ Name the new theme directory
子テーマのディレクトリ名を変更します。ここはそのままでOKです。
⑤ Select where to save new styles
子テーマ用のスタイルシートを設定します。「Primary Stylesheet (style.css) 」のままでOKです。
⑥ Select Parent Theme stylesheet handling:
親テーマのスタイルシート呼び出し方法を設定します。以前は@importを利用して、子テーマ側のstyle.cssで呼び出す方法が主流でしたが、現在はfunctions.phpを使う方法が推奨されています。
ここは下手にいじると正しく表示されないので、特に問題がなければ一番上の「Use the WordPress style queue.」でOKです。
その下の「Advanced handling options:」は特にさわる必要はありません。
⑦ Customize the Child Theme Name, Description, Author, Version, etc.:
子テーマの詳細です。「Click to Edit Child Theme Attributes」をクリックすると、子テーマの詳細が表示されます。ここもそのままでOKです。
⑧ Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme:
ここにチェックを入れると、親テーマで設定していたメニューやウィジェット、カスタマイザーの内容を、子テーマに引き継ぐことができます。
通常、子テーマを作成すると、親テーマで設定していたウィジェットやカスタマイズは最初からやり直しになるので、この機能はとても便利です。
⑨ Create New Child Theme
最後に⑨ Click to run the Configurator: の「Create New Child Theme」をクリックして、子テーマを作成します。
親テーマファイルを子テーマに移動
子テーマを作成すると、テーマファイル function.php と style.css の2つが追加されます。
また、上のタブメニューからウェブフォントの設定や、子テーマのスクリーンショット追加、子テーマのZIPファイル作成など、様々な設定ができるようになります。
もし親テーマで header.php や footer.php、sidebar.php など、子テーマに引き継がれないテーマファイルを変更していた場合は、ここで移動させましょう。
例えば header.php や footer.php に、Googleアナリティクスのコードや jQuery のコードを直接追記していたり、sidebar.php にリンクやバナーを表示していた場合、子テーマに変更は引き継がれません。
この状態で親テーマを更新すると、変更箇所はすべて消えてしまいます。それを防ぐために、変更した親テーマファイルを子テーマに引き継ぎます。
上タブメニューの「Files」から、小テーマに引き継ぐ親テーマファイルをチェックして「Copy Selected to Child Theme」をクリックすると、親テーマファイルが引き継がれます。
子テーマを有効化する
あとはダッシュボード左メニュー「外観」→「テーマ」から、作成した子テーマを有効化しましょう。
「テーマの編集」で、子テーマ内のファイルを確認してください。最低限必要な function.php と style.css の他に、親テーマから引き継いだテーマファイルも表示されています。
これでテーマを更新するたびに、テーマファイルを修正する手間が省けます。
後から子テーマを適用できる
Child Theme Configuratorを使うと、後から子テーマを適用できるというメリットがあります。
WordPressはテーマ追加と同時に子テーマを適用するのが原則です。後から子テーマを適用すると、親テーマのカスタマイザー設定が子テーマに引き継がれず、内容が消えてしまいます。
しかし、Child Theme Configuratorは後からでも親テーマからメニューやウィジェット、カスタマイザー設定、さらに変更した親テーマファイルを子テーマに引き継ぐことができます。
子テーマを後から適用する場合は、データベースの「wp_options」を変更するという手もありますが、Child Theme Configuratorを使ったほうがはるかに簡単ですよ。
WordPress 子テーマとは
WordPressには多くのテーマがあり、脆弱性が発見されたり、機能の追加や修正があると更新が行われます。これによって最新の機能を追加したり、セキュリティを強化することができます。
しかし、WordPressはテーマを更新すると、テーマファイルが上書きされて、修正やカスタマイズした部分が消えてしまいます。
テーマ更新のたびに一からカスタマイズするのは大変なので、後から追記や修正を加えたテーマファイルを別にして、更新してもそのまま残るようにしたものが子テーマです。
この仕組みなら、本体のテーマ（親テーマ）を常に最新の状態にしつつ、追記や修正したテーマファイル（子テーマ）も使うことができます。
WordPress 子テーマの自作は大変
WordPressの子テーマ作成で最低限必要なテーマファイルは function.php と style.css の２つで、これに親テーマ呼び出し用のコードや、後から加えた修正などを記載します。
他にカスタマイズしたテーマファイルがあれば、子テーマに追加していきます。
ただし、WordPressは自作で子テーマを作成すると、サーバー内にフォルダを作成したり、ファイルへの呼び出し用コード記入が必要になるので少し大変です。
初心者が子テーマを自作すると、functions.phpやstyle.cssが反映されないといったトラブルが起こりがちですが、WordPressには子テーマ作成用のプラグインがあります。
「Child Theme Generator」や、今回紹介する「Child Theme Configurator」を使えば、簡単に子テーマを作成することができます。
Child Theme Configurator まとめ
初心者にとってWordPressの子テーマ作成は簡単ではありませんが、テーマ更新のたびに一からカスタマイズする手間を考えると、子テーマはぜひとも使いたいところです。
とはいえ、子テーマをサーバーにアップしたり、テーマファイルに呼び出しコードを記載する必要があり、子テーマを作成してもfunctions.phpやstyle.cssが反映されないといったトラブルが起こりがちで、それなりの知識がないと難しい作業です。
そんなときは初心者でも簡単に子テーマを作成できるプラグインの出番です。子テーマ作成がうまくいかない場合は、ぜひ一度 Child Theme Configurator を使ってみてください。
