WordPress 子テーマの特徴、作成方法と利用例の記事にマニュアルで子テーマを作成する方法を紹介しました。WordPressには、子テーマを作成するプラグインもあります。マニュアルで子テーマを作成して、うまく動作しない場合や作成方法が難しいと感じる場合には、プラグインを使用するのも選択肢となります。
プラグインを使用して子テーマを作成する手順
Child Theme Configuratorは、コードを使用する事なく手軽に子テーマを作成したり、カスタマイズできるプラグインです。
Child Theme Configurator プラグインをインストールして、有効化します。l
Child Theme COnfiguratorのページが表示されます。
1. 作業項目の選択
“① Select an action”の選択肢から、「新しい子テーマを作成」(CREATE a new Child Theme)を選択します。
2. 子テーマを作成する親テーマの選択
② 親テーマを選択します。の右に表示される親テーマ表示部をクリックすると現時点でインストールされている親テーマがリスト表示されます。その中から子テーマを作成する親テーマを選択します。
本記事では、例としてWordPress標準テーマ、”Twenty Twenty-Three”を選択し、子テーマを作成します。
3. 親テーマの分析
選択した親テーマのタイトルが表示されます。右にある”Analyze"(分析する)のボタンを押します。
分析結果が表示されます。
Twenty Twenty-Threeの分析結果として、以下の2つが表示されました。
- このテーマは子テーマを作成するのに使用するのに大丈夫(OK)と思われます。
- このテーマは、表示する上で親テーマのstyle.css ファイルは必須ではありません。
- 子テーマ作成プラグイン(Child Theme Configurator)は、「親スタイルシートの使用」オプションに親テーマのスタイルシートの使用を追加しないを選択しました。(手順6をご参照下さい)
4. 新しく作成する子テーマ用のディレクトリー名
新しく作成する子テーマ用のディレクトリー名が”Name the new theme directory:”の右に表示されます。
ここで表示される名前は、子テーマの名前ではありません。子テーマの名前や説明は、手順7で行う事ができます。
5. 新しいスタイルの保存場所を選ぶ
元来のstyle.cssにスタイルを直接保存するか、カスタムスタイル用に別のスタイルシートファイルを使用して既存の子テーマのスタイルと組み合わせて使うかのどちらかを選びます。既存の子テーマのスタイルを保持したい場合には、後者を選択します。
6. 親テーマのスタイルシートの利用方法の選択
選択肢は以下の3つがあります。
- WordPressのスタイルキューを使う
- 子テーマのスタイルシート内の@import を使う(非推奨)
- 親スタイルシートの使用は追加しない
- 親テーマのスタイルシートを既に子テーマが使用している場合、または親テーマのスタイルシートファイルを表示には使わない場合に選択
7. 子テーマの名前、説明、著者名、バージョンなどをカスタマイズ
8. メニュー、ウィジェット、その他のカスタマイザー設定を親テーマから子テーマにコピーする
子テーマをマニュアルで作成した場合、親テーマのメニューやウィジェットの設定は引き継がれません。手順8のボックスにチェックを入れると、Child Theme Configuratorは親テーマから、メニューやウィジェットのセットをコピーします。親テーマのメニューやウィジェットの設定を引き継ぎたい場合にはチェックを入れます。ただし、一部のプレミアムテーマでは、このオプションはサポートされていません。
9. 子テーマを作成
設定を確認後、”Create New Child Theme” (新しい子テーマを作成する)のボタンを押します。ボタンを押すと、プラグインは、子テーマ用のフォルダーを作成して、そこにstyle.cssとfunctions.phpファイルを追加します。
10. 作成された子テーマをプレビューで表示確認する
9. の子テーマ作成のボタンを押すと、Child Theme Configuratorのページがリロード(更新)され、ページ上部にTwenty Twenty-Three 子テーマが無事に作成されました。というメッセージと、有効化する前に子テーマをプレビューで確認して下さいのメッセージが表示されます。
上のメッセージ内の”Preview your child theme”をクリックして、作成された子テーマのプレビューを表示させます。
プレビューで問題なく表示されている場合には、作成した子テーマを有効にします。
コメントを残す(承認後表示されます)