WordPress子テーマの作り方

by

最近まで知らなかったし、必要性も分からなかった親テーマと子テーマ。WelcarというECプラグインを使って初めて知った程度。

子テーマ作成のメリット

通常、wordpressでサイトを作るときにテーマをインストールして有効化するけど、これはすべて親テーマを操っている。しかしながら、サイトを少しいじったりした場合に、テーマをアップデートしたときに、修正をかけたfunctions.phpやstyle.cssが上書きされてしまうんです。

上記のようなことを防ぐために子テーマを作成し、親テーマのアップデートに左右されないようにできるのです。

例えば、よくテーマのフッター部分のコピーライトを見てると（任意文字) powered by wordpressとかBuilt with 〇〇〇なんて文字が入ってたりしてて、テーマエディターを使って余計な文字を削除したりしますよね。でも、親テーマがアップデートされると、また元に戻ってしまうのです。

私がメインで使ってるテーマはGeneratePressです。海外のテーマだけど高速で、そこそこカスタマイズできるので重宝してます。実際に子テーマを作ったサイトと、親テーマだけのサイトで、GeneratePressのアップデートをしてみけど、親テーマで設定しているサイトのフッター部分が見事に元に戻ってしまいました。

他にも親テーマでphpなどをいじってしまって、記述をミスるとサイト全体に影響を及ぼしてしまうこともありますよね。

子テーマの作り方

私はmixhostを使っているためブラウザ上で済ましてしまうのですが、フォルダとファイルを作った後で、FTPで飛ばしても大丈夫です。ここにテーマが入っています。このサイトだと

asabond.com/wp-content/themes/

フォルダの追加で「generatepress-child」というフォルダを新たに作ります。色々調べたけど、みんなこうしてるみたい「-child」。FTPで飛ばす場合はデスクトップで〇〇-childというフォルダを新規作成してください。

style.cssの設定

mixhostのCPanelを使うと、ファイル追加ボタンを押してstyle.cssというファイルを作って、下のコードをコピペします。
Theme Nameが子テーマ名で、Templateが親テーマの名前です。

/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 0.1
*/

functions.phpの設定

これもstyle.cssと同様にファイル追加して名前を付けて、内容はまるっとコピーです。意味は分かりません。おそらく「こっち後に読み込めよっ！」みたいなもんでしょうか。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>
  • wp_enqueue_script()　親テーマのファイルを読み込んだ後で子テーマのファイルを読み込む

私の場合、面倒くさがりなので、CPanelという設定画面で「ちょちょっと」やってしまいましたが、FFFTPなど使って対象のフォルダにアップロードしても同様にできますね。

テーマを有効に

サイトのテーマを見に行くと、GeneragePressとCocoon、TwentyNineteenの3つのテーマにGeneratePress Childという新しいテーマがあるのでこれを有効にします。

あとは、style.cssやfunctions.phpをいじり倒してください。親テーマがアップロードされても変更されないのが良いですね。

公式の子テーマ・・・。

ここまでやって、他にも調べ物をしてたんですけど、GeneratePressは子テーマが準備されてました…。最初からこれ入れればよかったね。

Using a Child Theme

確かに、テーマの画像がなかったりしてたのが気にはなってたけどよ。下の画像は公式の子テーマ。

追記

公式の子テーマの中身を見てたけど、ほとんど変わらずなんだけど、GeneratPress-Childフォルダにscreenshot.png（800×688px）という新しい画像ファイルが追加されてるだけだった。この画像は何でも良さそう。

他のサイトでtortugaのテーマを使ってるので、子テーマを作って安易な画像（1200×900px）も作ってみたところ、うまくいった。

コメントする