WordPressでテーマをカスタマイズしたくなることがあります。でも、テーマを直接編集するのは野蛮。見た目をちょっと変えるくらいな「カスタマイズ」の「追加CSS」を使えばOK。

それ以上のことをやろうとすると、やはりテーマを編集せざるを得ません。その場合は、「子テーマ」を使用することで、テーマ本体(親テーマ)を直接編集せずに済みます。

しかし、すべてのテーマに「子テーマ」が用意されているわけではありません。というよりも、子テーマがない方が多い。そう言う場合、どうするか?そう、子テーマを自分で作ればいいのです。

子テーマを作るというと大変そうに思いますけど、実は簡単。調べれば情報がたくさん見つかります。数行の簡単なファイルを作ればOKみたいです。

でも、そこはWordPerss。子テーマ作りのプラグインがあります。

プラグインをインストール

子テーマを作るプラグインはいくつかあるようですが、ここでは「Child Theme Configurator」を取り上げます。名前もそのものズバリです。この名前で検索すれば簡単に見つかりますので、インストールして有効化するだけです。

子テーマを作成

では、早速、子テーマ作ります。

サイドバーの「ツール」の中に「Child Themes」という項目が追加されています。

これを開きます。

最初に使用するのは一番左のタブ「Parent/Child」です。

番号で手順が示されていますので、それに沿って進めます。

  1. Select an action」では「CREATE a new Child Theme」を選択してます(子テーマ新規作成)。最初はこれしか出てこないようです。
  2. Select a Parent Theme」では「親テーマ」を選択します。ここでは、(現時点での)WordPressの標準テーマの「Twenty Twenty」を対象にします。
  3. 続いて「Analyze」ボタン(先程の親テーマ選択の直ぐ側にあります)を押します。これで、親テーマを分析してくれます。

    上の図が親テーマの分析が終った様子です。
  4. 子テーマのファイルを入れるディレクトリの名前を決めます。デフォルトで親テーマ名に「-child」を付けたものが入っています。特段の希望がなければ、このままでOKです。
  5. Select where to save new style」はスタイルシートの置き場所のようですが、どちらを選ぶべきかわかりませんでしたので、標準の「Primary Stylesheet (style.css)」のママとしておきました。
  6. Select Parent Theme stylesheet hantling」も標準のままで。
  7. ここで子テーマの名前などをカスタマイズできます。

    Customize the Child Theme Name~」を開きます。

    テーマ名は元のテーマの名前に「Child」を付けた物になっています。特にこだわりがなければ、それ以外も含めて、変更不要です。
  8. Copy Menus~」は親テーマからメニューなどをコピーするもののようです。とりあえず、デフォルト(未チェック)のままで。
  9. Create New Child Theme」ボタンを押せば、子テーマが作成されます。

    ~generated successfully~」と、作成できたことが表示されます。

子テーマを有効化

では、「外観」の「テーマ」を開きます。

今作った子テーマが見つかるはずです。インストール作業もやってくれています。テーマのアイコンは親テーマのものを引き継いでいます(画像を別のものに入れ換えていなければ)。

あとは、普通に「有効化」すれば、この子テーマが使用されます。

サイトにアクセスして表示を確認します。子テーマを作ってそのまま使っているだけなので、親テーマを使っているときと変っていないはずです。

子テーマを編集

子テーマの編集も通常のテーマと同様、「外観」の「テーマエディター」から行えます。

CSSを編集(追加)するなら、ここ(style.css)に書きます。が、最初にも書いたとおり、「追加CSS」を使えばいいので、わざわざこれを使う必要はないと思います。

また、何か特別な処理を追加したいと言った場合には、functions.phpを使って実現することが多いと思います。その際に親テーマのfunctions.phpに書いてしまうと、テーマのバージョンアップ時にそれが消えてしまうので、この子テーマが活きてきます。

これだけなら、わりとシンプルな話です。今回、Child Theme Configuratorというプラグインを使ったわけですが、実は、ここからが本番です。

対象ファイルを追加

子テーマを使わざるを得ない本当のところは、PHPで書かれたファイルをいじらなければならない場合です(だと、私は思っています)。

ここまでの手順では、繰り返しになりますが、スタイルファイル(style.css)と関数ファイル(functions.php)の雛形だけが作られています。他はありません。そこで、今度は、編集したいPHPファイルを親テーマから持ってきます。

対象ファイルの選定

まず、どのファイルを持ってくるかを決めます。一旦、テーマを親テーマに切り替えます。そして、テーマエディターを開きます。

テーマを構成しているファイルの一覧から、目的のファイルを見つけます。今回は、「投稿」の個別ページの表示を対象にします。これは「単一テンプレート」と書かれているもの、すなわち、「singular.php」というファイルです。このファイル名はテーマによって違います(「single.php」の場合が多いようですが、このてんぷれーとでは「singular.php」でした)。

ファイルを決めたら、テーマの設定を子テーマに戻しておきます。

子テーマにファイルを追加

「ツール」メニューから「Child Themes」を選び、管理画面を開きます。

Currently loaded」が目的の子テーマ(ここでは、Twenty Twenty Child)になっていることを確認します。もしなっていなければ、テーマの設定を確認して切り替えます。

選択されているテーマがOKなら、「Files」タブを選びます。

先程調べたファイル名「singular.php」にチェックを入れます。

そして、「Copy Selected to Child Theme」ボタンを押します。

無事、ファイルが子テーマにコピー(追加)されました。

テーマエディターを開いて確認します。

テーマファイルの一覧の中に「単一テーマ (singular.php)」が入っているのが確認できます。あとは、このファイルを希望するように編集すればOKです。

注意!

子テーマの編集はこれで行うことができますが、これをやってしまうと、このファイルは親テーマから切り離された状態になってしまいます。つまり、親テーマがバージョンアップされた際に、コピーしてきたファイルにはそれが反映されません(当然ですけど)。

したがって、親テーマがバージョンアップされた際には、コピーしてきたファイル(ここでは、singular.php)に変更がないか確認し、変更があるならその対応を考えなければなりません。

ですので、こうした編集はできるだけ行わないに越したことはありません。どうしても仕方ない場合にとどめておくべきです。

また、同じ理由で、コピーしてくる必要のないファイルはコピーしないように。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)