[WordPressプラグイン] 子テーマはChild Theme Configuratorで簡単に作成しよう！
WordPressのテーマをカスタマイズする場合、基本的に子テーマの利用を前提としています。これは直接テーマを有効化してテンプレートやスタイルシートをカスタマイズすると、テーマの更新時にせっかく修正した内容が初期状態に戻ってしまう為ですが、WordPressの公式ディレクトリからインストール出来るテーマには必ずしも子テーマが用意されているとは限りません。
そこで当エントリーではプラグインのChild Theme Configuratorを使って、子テーマを簡単に作成する方法を紹介したいと思います。
Child Theme Configuratorのインストール
https://ja.wordpress.org/plugins/child-theme-configurator/プラグインの新規追加画面からChild Theme Configuratorで検索してインストール＆有効化します。プラグイン本体に関する設定は無いので有効化した後は即利用可能です。
尚、プラグインのインストール及び有効化の手順についてよくわからないという方は、こちらのエントリーを参照していただけると幸いです。
https://unlimitedchaos.net/uc/how-to-install-wordpress-plugi...子テーマを作成する前の注意点
この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分かからずに終わっちゃうくらいの簡単なお仕事です。
子テーマ作成手順の詳細
それだけで終わってしまうのはさすがに不親切なので、私のわかる範囲でひと通り各項目の説明をしてみたいと思います。
まずはダッシュボードからツール > をクリックします。
1.Select an action
子テーマが1つもインストールされていない場合は、他に選択肢が無いのでこのままでOKですが
子テーマが1つでも存在する場合はこんな感じになるので、ラジオボタンのCREATE a new Child Themeをオンにします。
2.Select a Child Theme
子テーマを作成したいテーマをプルダウンメニューから選択します。
3.Analyze Child Theme
テーマを選択したらをクリックします。
This theme appears OK to use as a Child theme.と表示され、4.以降の項目が表示されたら下の方にスクロールして作業を続けますが、4.～7.の項目は特に変更する必要は無いので一般的な用途で使用する子テーマなら入力をスキップして構いません。
とは言うもののその部分も簡単に説明を。
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.
最初は非表示になっているのでをクリックすると表示されます。
子テーマの詳細画面に表示される内容なので特に変更する必要はありませんが、大幅な修正を加えて「私がカスタマイズしました」的なオリジナル子テーマですよアピールしたい場合に使うくらいでしょうか。と言っても普段は見えない部分ですけどね？（調べる方法はありますが、それはまた別の機会に）
ちなみにここに表示される内容になります。
8.Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme
既に親テーマを有効化して利用していた場合は、この項目にチェックを入れる事で親テーマのメニュー・ウィジェット・その他の設定を引き継ぐ事が出来ます。
9.Click to run the Configurator
をクリックで子テーマを作成します。
以上で子テーマの作成は完了です！簡単ですね？
あとはPreview your child themeをクリックしてプレビュー画面を確認しつつ、よさげな感じだったら有効化すれば作業は終了です。
Child Theme Configuratorの他の機能
このChild Theme Configurator、名前にConfigとつくだけあって子テーマの編集に関してはなかなか便利なプラグインで単純に子テーマを作成するだけではありません。子テーマの作成以外にも
- 子テーマのカスタマイズ
- 親テーマからテンプレート（ほにゃらら.phpみたいな）をコピー
- WEBフォントの設定
- スクリーンショットの設定
- 子テーマのアーカイブ化（zipファイル）
このような機能を持っています…が、実は私もまだ子テーマの作成以外に利用した事がほとんど無かったりするので、そちらについてはまたの機会にしたいと思います。