[WordPressプラグイン] 子テーマはChild Theme Configuratorで簡単に作成しよう!

Child Theme Configurator バナー

WordPressのテーマをカスタマイズする場合、基本的に子テーマの利用を前提としています。これは直接テーマを有効化してテンプレートやスタイルシートをカスタマイズすると、テーマの更新時にせっかく修正した内容が初期状態に戻ってしまう為ですが、WordPressの公式ディレクトリからインストール出来るテーマには必ずしも子テーマが用意されているとは限りません。

そこで当エントリーではプラグインのChild Theme Configuratorを使って、子テーマを簡単に作成する方法を紹介したいと思います。

Child Theme Configuratorのインストール

プラグインの新規追加画面からChild Theme Configuratorで検索してインストール&有効化します。プラグイン本体に関する設定は無いので有効化した後は即利用可能です。

尚、プラグインのインストール及び有効化の手順についてよくわからないという方は、こちらのエントリーを参照していただけると幸いです。

子テーマを作成する前の注意点

このChild Theme Configuratorは優れたプラグインですが、万能というわけではありません。ごく一般的な構造のテーマなら問題無く子テーマを作成出来ますが、中には特殊な構造というか複雑な作り方をしたテーマもあるかと思います。そのような場合に子テーマの作成がうまくいかない、または作成した子テーマが正しく機能しない可能性もあるという事を頭の片隅にでも置いといて下さいませ。

なので、ぶっつけ本番で絶賛運営中のサイトに適用するような事はせず、ある程度のテスト確認が可能なサイトで親テーマと作成した子テーマ両方のプレビュー結果を比較検討した上で有効化する事をオススメします。

実際はそのくらい複雑な構造のテーマなら大抵の場合は子テーマが用意されている事が多いです。なので、まずは配布サイトのドキュメントやFAQをよく探して、子テーマが見つからなければこのChild Theme Configuratorを利用すると良いでしょう。

子テーマの作成手順

それでは子テーマの作成手順に入りたいと思います。

子テーマ作成の前準備

  • Child Theme Configuratorがインストール&有効化済み
  • 子テーマを作成したいテーマがインストール済み

以上が揃っていれば準備OKです。

子テーマ作成の最短手順

オプション的な項目は一切イジらず、ごく普通の子テーマが欲しい!という場合は最短手順として

  • 1.Select an action
  • 2.Select a Child Theme
  • 3.Analyze Child Theme
  • 9.Click to run the Configurator

以上の4ステップで子テーマが作成出来ます。項目を入力する必要が無いのでマウスの操作だけで済みますし、慣れると1分かからずに終わっちゃうくらいの簡単なお仕事です。

子テーマ作成手順の詳細

それだけで終わってしまうのはさすがに不親切なので、私のわかる範囲でひと通り各項目の説明をしてみたいと思います。

まずはダッシュボードからツール > Child Themesをクリックします。

子テーマ作成開始 ダッシュボード > ツール > Child Theme

1.Select an action

子テーマが1つもインストールされていない場合は、他に選択肢が無いのでこのままでOKですが

Child Theme Configurator 子テーマが1つもインストールされていない場合

子テーマが1つでも存在する場合はこんな感じになるので、ラジオボタンのCREATE a new Child Themeをオンにします。

Child Theme Configurator 子テーマが1つ以上インストールされている場合

2.Select a Child Theme

子テーマを作成したいテーマをプルダウンメニューから選択します。

Child Theme Configurator テーマの選択

3.Analyze Child Theme

テーマを選択したらAnalyzeをクリックします。

Child Theme Configurator テーマの分析

This theme appears OK to use as a Child theme.と表示され、4.以降の項目が表示されたら下の方にスクロールして作業を続けますが、4.~7.の項目は特に変更する必要は無いので一般的な用途で使用する子テーマなら入力をスキップして構いません。

Child Theme Configurator テーマの分析完了

とは言うもののその部分も簡単に説明を。

4.Name the new theme directory

子テーマのディレクトリ名を設定します。「親テーマ名-child」が一般的なので特に変更する必要はありません。

5.Select where to save new styles

子テーマ用のスタイルシートを設定します。style.cssでいいのでこのままでノープロブレムです。

6.Select Parent Theme stylesheet handling

これも特別な理由が無い限りこのままでOKです。むしろこの項目は意図的に変更しないと不具合の原因になるので、よくわからなければスルー推奨です。

7.Customize the Child Theme Name, Description, Author, Version, etc.

最初は非表示になっているのでShow/Hide Child Theme Attributesをクリックすると表示されます。

Child Theme Configurator テーマの詳細を表示/非表示

子テーマの詳細画面に表示される内容なので特に変更する必要はありませんが、大幅な修正を加えて「私がカスタマイズしました」的なオリジナル子テーマですよアピールしたい場合に使うくらいでしょうか。と言っても普段は見えない部分ですけどね?(調べる方法はありますが、それはまた別の機会に)

Child Theme Configurator テーマ詳細編集画面

ちなみにここに表示される内容になります。

Child Theme Configurator テーマ詳細画面

8.Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme

既に親テーマを有効化して利用していた場合は、この項目にチェックを入れる事で親テーマのメニュー・ウィジェット・その他の設定を引き継ぐ事が出来ます。

Child Theme Configurator 親テーマの設定引き継ぎ

テンプレートやスタイルシートに加えた修正までは引き継ぎませんが、親テーマを更新するまでは一見引き継いでるように見える場合があるので注意して下さい。

9.Click to run the Configurator

Create New Child Themeをクリックで子テーマを作成します。

Child Theme Configurator 子テーマの作成

以上で子テーマの作成は完了です!簡単ですね?

Child Theme Configurator 子テーマの作成完了とプレビュー

あとはPreview your child themeをクリックしてプレビュー画面を確認しつつ、よさげな感じだったら有効化すれば作業は終了です。

Child Theme Configuratorの他の機能

このChild Theme Configurator、名前にConfigとつくだけあって子テーマの編集に関してはなかなか便利なプラグインで単純に子テーマを作成するだけではありません。子テーマの作成以外にも

  • 子テーマのカスタマイズ
  • 親テーマからテンプレート(ほにゃらら.phpみたいな)をコピー
  • WEBフォントの設定
  • スクリーンショットの設定
  • 子テーマのアーカイブ化(zipファイル)

このような機能を持っています…が、実は私もまだ子テーマの作成以外に利用した事がほとんど無かったりするので、そちらについてはまたの機会にしたいと思います。