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

Sponsored Link
ロリポップ!レンタルサーバー

このサイトはWordPressで稼働しておりますが、記事のリンクを張るととても大きな表示になってしまうので、どうにかならない物かと思い調べたところfunctions.phpをカスタマイズする必要がありそうだ、という事が判明しました。

WordPressのテーマをカスタマイズする事はできるのですが、テーマ自体をいじってしまうとテーマをアップデートしたときに上書きされてしまうため子テーマを作成する事にしました。

子テーマを作るためには最小限のファイルを作成するだけでもよい、という記事をいくつか見つけたのですが、独自のサイトならともかくCMSの仕組みに手を入れてしまうと際限が無くなってしまいそうなので今回プラグインを入れてみました。

記事のリンク(oEmbed)については別途ご報告します。

子テーマを作るプラグイン Child Theme Configurator

プラグインの導入なので、WordPressの管理画面からプラグイン→新規追加で、Child Themeといったキーワードで検索します。

Child Theme Configurator

インストール数は20万を超えており、評価も222で星4.5とかなりの高評価ですね。

早速、インストールして有効化します。

このプラグインをインストールするとWordPress管理画面のツールに表示されるようになります。

WordPressメニュー

Child Themesをクリックすると作成画面に入ります。

Sponsored Link

Child Theme Configuratorで子テーマを作成

親テーマの選択

作成画面はまずアクションと親となるテーマの選択になります。

設定画面1

1)Select an action

CREATE a new Child Themeを選択

2)Select a Parent Theme

現在使っている”Lightning”を選択

Analyzeボタンを押すと解析結果が表示されます。

設定画面02

問題なさそうです。

ちなみに2番目のチェックの文章にはこう書かれています。

このテーマでは、外観に親テーマのstyle.cssファイルは必要ありません。

コンフィギュレーターは、「親スタイルシート処理」オプションに対して「親スタイルシート処理を追加しない」を選択しました(以下のステップ6を参照)。

(Google翻訳)

確かに以前中身を見てみたらstyle.cssは空だった気がする。

子テーマの名前

設定画面3

子テーマの名前は lightning-child としました。

新しいスタイルの保存先

設定画面4

とりあえず、Google翻訳で直訳。

1番目:プライマリスタイルシート(style.css)
既存の値を置き換えて、新しいカスタムスタイルを子テーマのプライマリスタイルシートに直接保存します。 プライマリスタイルシートは、テーマで設定された順序でロードされます。

2番目:個別のスタイルシート
新しいカスタムスタイルを別のスタイルシートに保存し、既存の子テーマスタイルを親と組み合わせてベースラインを形成します。 既存の子テーマのスタイルを上書きせずに保持する場合は、このオプションを選択します。 このオプションでは、プライマリスタイルシートの後に読み込むスタイルシートをカスタマイズすることもできます。

これはとりあえず個別の方を選択しました。(画像とは違っています。すみません)

親テーマのスタイルシート処理を選択

設定画面5

これは先ほどのAnalyzeの結果で3番目が選択されているので、そのまま。

Google翻訳の結果は以下の通り。

1番目:WordPressスタイルのキューを使用します。
Configuratorに適切なアクションと依存関係を決定させ、関数ファイルを自動的に更新します。

2番目:子テーマのスタイルシートで@importを使用します。
WordPressスタイルキューを使用して親スタイルシートをロードできない場合にのみ、このオプションを使用します。 @importの使用は推奨されません。

3番目:親スタイルシートの処理を追加しないでください。
このテーマがすでに親テーマのスタイルシートを処理している場合、または親テーマのstyle.cssファイルが外観に使用されていない場合、このオプションを選択します。

○追加の設定

このセクションは追加の設定がありました。今回は選択しませんでしたが、画像とGoogle翻訳を載せておきます。

設定画面6

1番目:親テーマのスタイルシートを無視します。
親テーマのスタイルをロードまたは解析しないでください。 子テーマがGenesisのようなフレームワークを使用し、その外観に子テーマスタイルシートのみを使用する場合にのみ、このオプションを使用します。

2番目:これらのスタイルシートハンドルの依存関係を強制しないでください。

素晴らしいフォント(注:font-awesome)
稲妻(注:Lightningテーマ)共通スタイル
雷(注:Lightningテーマ)のデザインスタイル

既定では、プライマリスタイルシートの前に読み込まれるスタイルシートの順序は、依存関係として扱うことで保持されます。 場合によっては、サイト全体で使用されていないスタイルシートがプレビューで検出されます。 必要に応じて、上記の特定のスタイルシートの依存関係を削除できます。

子テーマの情報(style.cssのコメント)

WordPressはテーマのバージョン情報などはstyle.cssに記載しますが、その内容です。

今回は何も変更しませんでした。確認するとしてもChild Theme Name程度でしょうか。

設定画面7

カスタマイズ設定のコピー

現在使っているテーマのカスタマイズ設定の内容をコピーするかどうかを選択。

画像ではチェックしていませんが、今回はチェックして進めました。

設定画面8

またもやGoogle翻訳。

メニュー、ウィジェット、その他のカスタマイザー設定を親テーマから子テーマにコピーします。

注:このオプションは、子テーマの既存のメニュー、ウィジェット、およびその他のカスタマイザー設定を親テーマの設定に置き換えます。 このオプションは、子テーマを初めて構成するときにのみ使用する必要があります。 一部のテーマでは、CTCの無料バージョンではコピーできない追加オプションを使用しています。 詳細については、[アップグレード]タブをクリックしてください。

この後 Create New Child Theme ボタンを押せば子テーマができあがります。

テーマの切り替え

子テーマが無事にできあがっていれば、テーマ選択画面にLightning Childが表示されます。

テーマ選択画面

Lightning Childをプレビューして問題が無ければ有効化しましょう。

今回は無効化していた1つのウィジェットが有効化されていました。こういうツールは過信せずによく確認しましょう。
(いきなり有効化していたのは秘密にしておきます。)


 

Sponsored Link

前の記事

Smartyでできること