WordPressで子テーマを作る

今年に入ってから本格的に仕事でWordpressを扱うことになり、少しずつではありますが慣れてきたところです。
基本的にはデザインを制作してコーディングをして、Wordpressを構築するといった流れなので、オリジナルテーマを使っています。
ですがこのブログではまずは文章を書くということが第1目的なので、手っ取り早くTwenty Seventeenという無料のWordpressのテーマを使用しています。

テンプレートのテーマを使うときは子テーマを作る

恥ずかしながら子テーマという存在を知りませんでした。
子テーマとはこのブログでいえば、親テーマにあたるTwenty Seventeenの機能やスタイルを継承したうえで、変更したところを自分でカスタマイズするためのテーマとなります。
例えば元々color:#000と指定されていた箇所を、子テーマのCSSでcolor:#fffと記述すれば子テーマのCSSで書いたcolor:#fffが優先されるため、フォントカラーは白になります。

子テーマを使わないと…

子テーマの存在を知らなかった私は昨日Twenty Seventeenのテーマを直接編集してしまいました。
それでも確かにカスタマイズはできるのですが、のちのち面倒なことになることが分かりました。
Wordpressをお使いの方はよくわかると思うのですが、Wordpressにはたびたびアップデートというものがあり、テンプレートのテーマもご多分に漏れずアップデートがあります。
アップデートがあった場合Wordpressでは、それを推奨してきます。何も考えずにアップデートしてしまうと直接編集したファイルも上書きされてしまい、再度ファイルを編集しなおさないといけないことになります。
そのため子テーマを使った方が良いとのことでした。
早速子テーマを作ってみたいと思います。

子テーマのフォルダを作成

まず、子テーマを入れるフォルダを作ります。私は「twentyseventeen-child」としました。フォルダを作成する場所は親テーマのディレクトリと同じ階層でOKです。

「style.css」「function.php」ファイルの作成

style.cssには
Theme Name:   何でもよい
Template: 親テーマの名前(ここではtwenty seventeen)
最低限以上の2つのことを書く必要があります。

一方のfunction.phpには
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>
上記をコピペします。
これを書くことで、親テーマのスタイルが子テーマに引き継がれます。

「外観」→「テーマ」に行くと先ほど作った子テーマが選択できるようになりました。早速選択して適用してみます。
以上が子テーマを作成する第1歩となります。

 

コメントを残す

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