WordPressの子テーマ作成プラグイン Child Theme Configurator

スポンサーリンク

Child Theme Configurator

初心者でも簡単にWordPressの子テーマを作成できるプラグイン「Child Theme Configurator」をご紹介します。

WordPressはテーマを更新すると、テーマファイルに加えた追記や修正が上書きされて消えてしまいますが、子テーマを使えばそれを防ぐことができます。

でも、いざ自分で子テーマを作成するとなると、サーバー内にフォルダを作成したり、ファイルへの呼び出し用コード記入が必要で、思った以上に面倒です。

初心者が一から子テーマを作ると、functions.phpやstyle.cssが反映されないといったトラブルが起こりがちですが、今回紹介するプラグイン「Child Theme Configurator」を使えば簡単に子テーマを作成することができますよ。

スポンサーリンク

WordPress 子テーマ作成の必要性

WordPressテーマ

WordPressのテーマは、脆弱性が発見されたり、機能の追加や修正があるとテーマの更新が行われます。これによって最新の機能を追加したり、セキュリティを強化することができます。

しかし、テーマを更新すると、テーマファイルへの追記やカスタマイズはすべて上書きされて消えてしまいます。こうなるとテーマのカスタマイズや修正は一からやりなおしです。

テーマ更新のたびに一からカスタマイズするのは大変なので、後から追記や修正を加えたテーマファイルを別にして、更新してもそのまま残るようにしたものが子テーマです。

この仕組みなら、本体のテーマ(親テーマ)を常に最新の状態にしつつ、追記や修正したテーマファイル(子テーマ)も使うことができます。

WordPressの公式テーマ(Twenty Seventeenなど)や、大抵のブログテーマ、有料テーマには子テーマが用意されていないので、自分で作成する必要があります。

子テーマ作成に最低限必要なテーマファイルは function.php と style.css の2つで、これに親テーマ呼び出し用のコードや、後から加えた修正などを記載します。

他にカスタマイズしたテーマファイルがあれば、子テーマに追加していきます。

Child Theme Configurator をインストール

では、Child Theme Configurator をインストールしましょう。

ダッシュボード左メニューから「プラグイン」→「新規追加」に進み、右上の検索窓に「Child Theme Configurator」と入力します。

プラグインが見つかったら「今すぐインストール」→「有効化」してください。

Child Theme Configurator インストール

もう一度ダッシュボードから「ツール」→「Child Theme」に進むと、Child Theme Configurator の設定画面が表示されます。

Child Theme Configurator 設定

スポンサーリンク

子テーマを作成する

では、子テーマを作成してみましょう。「Select a Parent Theme:」でテーマ名をクリックすると、プルダウンメニューが開きます。

テーマを選んで「Analyze」をクリックしてください。

Child Theme Configurator 子テーマ作成

テーマの解析結果が表示されます。子テーマが作成可能であれば「This theme appears OK to use as a Child theme.」と表示されるので、④以降の項目を順にチェックしていきます。

Child Theme Configurator 子テーマ作成

④ 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です。

⑦ Customize the Child Theme Name, Description, Author, Version, etc.:
子テーマの詳細です。「Show/Hide Child Theme Attributes」をクリックすると、子テーマの詳細が表示されます。ここもそのままでOKです。

⑧ Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme:
ここにチェックを入れると、親テーマで設定していたメニューやウィジェット、カスタマイザーの内容を、子テーマに引き継ぐことができます。

通常、子テーマを作成すると、親テーマで設定していたウィジェットやカスタマイズは最初からやり直しになるので、この機能はとても便利です。

Child Theme Configurator 子テーマ作成

最後に⑨ Click to run the Configurator: の「Create New Child Theme」をクリックして、子テーマを作成します。

親テーマファイルを子テーマに移動

子テーマを作成すると、テーマファイル function.php と style.css の2つが追加されます。

また、上のタブメニューからウェブフォントの設定や、子テーマのスクリーンショット追加、子テーマのZIPファイル作成など、様々な設定ができるようになります。

Child Theme Configurator 子テーマ設定

もし親テーマで header.php や footer.php、sidebar.php など、子テーマに引き継がれないテーマファイルを変更していた場合は、ここで移動させましょう。

例えば header.php や footer.php に、Googleアナリティクスのコードや jQuery のコードを直接追記していたり、sidebar.php にリンクやバナーを表示していた場合、子テーマに変更は引き継がれません。

この状態で親テーマを更新すると、変更箇所はすべて消えてしまいます。それを防ぐために、変更した親テーマファイルを子テーマに引き継ぎます。

上タブメニューの「Files」から、小テーマに引き継ぐ親テーマファイルをチェックして「Copy Selected to Child Theme」をクリックすると、親テーマファイルが引き継がれます。

Child Theme Configurator 親テーマファイル引き継ぎ

子テーマを有効化する

あとはダッシュボード左メニュー「外観」→「テーマ」から、作成した子テーマを有効化しましょう。

Child Theme Configurator 子テーマ有効化

「テーマの編集」で、子テーマ内のファイルを確認してください。最低限必要な function.php と style.css の他に、親テーマから引き継いだテーマファイルも表示されています。

Child Theme Configurator 子テーマファイル

これでテーマを更新するたびに、テーマファイルを修正する手間が省けます。

Child Theme Configurator まとめ

初心者にとってWordPressの子テーマ作成は簡単ではありませんが、テーマ更新のたびに一からカスタマイズする手間を考えると、子テーマはぜひとも使いたいところです。

とはいえ、子テーマをサーバーにアップしたり、テーマファイルに呼び出しコードを記載する必要があり、子テーマを作成してもfunctions.phpやstyle.cssが反映されないといったトラブルが起こりがちで、それなりの知識がないと難しい作業です。

そんなときは初心者でも簡単に子テーマを作成できるプラグインの出番です。子テーマ作成がうまくいかない場合は、ぜひ一度 Child Theme Configurator を使ってみてください。

スポンサーリンク
PC用
PC用

フォローする