皆さんワードプレスでどんなテーマを使っていますか?
Twenty Nineteenなどの最初からインストールされているものもあれば、有料、無料で配布されいるもの、自作テーマなど人によってさまざまなものを使っていると思います。
それでは子テーマは使っていますか?
ワードプレスを構築できる人は多いものの、意外と子テーマを使っていないという人も多いかと思います。(私も独学だったので小テーマの存在を知らずにクライアントにめっちゃ怒られたこともあります…)
今日は子テーマについてお話しします。
そもそも小テーマとは?その実装する意味は?
小テーマとは、通常のテーマのクローンのようなものだと思ったらOKです(ちょっと違いますが)
配布されている親テーマなどは、配布元がアップデートを加えた際、もともとテーマに入っていたファイルなどが最新版に書き換えられてしまいます。
そうなると当然、こちらで記述を書き加えた部分などが上書きされ消えてしまうのです。
そうなったら大変。バックアップも取っていなければ最悪、一から無償で構築のし直し…なんていう最悪なパターンも考えられます。
それを防ぐために小テーマがあります。小テーマは親テーマとは別ディレクトリで管理し、親テーマの内容が書き換えられても小テーマには影響しないという特徴があります。
さらに小テーマは親テーマのようにすべてのファイルを管理する必要が無く差分ファイルだけアップしていればいいので、カスタマイズを加えたファイルだけを格納できるのでとても管理もしやすいメリットがあります。
それでは、さっそく小テーマの作り方を解説していきます。
子テーマ用のフォルダの作成
親テーマがあるディレクトリと同じ/wp-content/themes/に、子テーマ用のフォルダを作成します。フォルダ名は「○○(親テーマ名など)_child」など、わかりやすいようにつけておきましょう。
style.cssを子テーマ内に用意して下記の記述を加える
子テーマのフォルダ内に、style.cssを作成してください。
その中の記述に下記のように入れてください。
1 2 3 4 |
/* Theme Name: 子テーマの名前 Template: 親テーマの名前 */ |
小テーマの名前は自由につけてOK。
親テーマの名前は、親テーマのフォルダ内に入っているstyle.cssのTheme Nameの内容をそのまま入れてください。一文字でも違うと小テーマと認識しないので注意
functions.phpを子テーマに用意し下記の記述を加える
次に、子テーマを認識させるための記述を加えます。
子テーマのフォルダ内にfunctions.phpを作成し、下記の記述を加えてください。
1 2 3 4 5 6 7 8 |
<?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') ); } ?> |
ワードプレス管理画面のテーマから子テーマを有効化
ここまでの作業はFTPで行い、サーバーに今までの子テーマの材料が上がっていたら、管理画面の外観⇒テーマに新たに子テーマがインストールされています。
今までのテーマと同じように、今回アップした子テーマを「有効化」。
これで一連の流れは完了です。
子テーマの編集方法など
現時点で、子テーマの中身にはstyle.cssとfunctions.phpの2つだけかと思います。
例えばい、page.phpを編集したいという場合、親テーマから子テーマにpage.phpをコピペしてきましょう。編集は小テーマ内のファイルを編集します。
この時点で親テーマと子テーマ両方にpage.phpが入っているかと思いますが、子テーマの内容が優先して表示される形になるのです。
これにより、親テーマにアップデートがあり、書き換えられたとしても自分の編集には影響がない状態を作り出すことが出来るのです。
優先順位について
親テーマのみにpage.phpが存在している
親テーマのpage.phpの内容が読み込まれる
子テーマのみにpage.phpが存在している
子テーマのpage.phpの内容が読み込まれる
親テーマ、子テーマにpage.phpが存在している
子テーマのpage.phpの内容が読み込まれる
style.cssとfunctions.phpはどちらものテーマからも読み込まれる
style.cssとfunctions.phpは例外で、どちらのテーマからも読み込まれます。
とはいえ、カスタマイズした内容などは常に子テーマのほうを触っていくのがベターです。
ワードプレスは何でもできる反面、事故も多発するCMSです。
少しでもこちらの過失による事故を減らすことでリスクの少ない仕事をしていきたいものですね。