みなさんこんにちは！
筋肉カメレオンです。
WordPressのテーマを選ぶ際に、子テーマを作っていますか？
子テーマを選択するメリットと、基本的な子テーマの作り方をご紹介します。
メリット①カスタマイズしやすい
親テーマを直接編集してカスタマイズしてしまうと、親テーマのアップデート時にすべて初期化されてしまいます。
泣きますね。
でも子テーマとして親テーマを参照しつつカスタマイズしている場合は、親テーマをアップデートしてもカスタマイズ部分は子テーマとして残ります。
WordPressの利用を続けていると多少はカスタマイズしたくなってくるので、最初から子テーマを作って有効化しておくと良いでしょう。
メリット②カスタマイズ時にいつでも元に戻せる
親テーマのカスタマイズしたいファイルを子テーマにコピーしてカスタマイズを行うため、万が一めちゃくちゃになって動作しなくなったとしても、元データが親テーマに残っているので、いつでも元の状態に戻せます。
メリット③カスタマイズ部分のソースコードがシンプルになる
上書きしたい部分だけ子テーマとして記述するので、子テーマのファイルとして存在するのは、自分がカスタマイズした部分のみとなります。
ごちゃごちゃした複雑な親テーマ部分と、自分のカスタマイズした部分で分けて管理できるのでソースコードが見やすいですね。
子テーマの作成方法
それでは、子テーマの基本的な作成方法です。
まず今回はWordpress5.0.1のデフォルトテーマ「twentynineteen」を親テーマとしてみます。
/wp-content/themes/twentynineteen と同階層に、「twentynineteen-child」というフォルダを作成します。
※子テーマは親テーマに「-child」を付けるというのが慣習になっています。
その中に、「functions.php」と「style.css」を作成します。
最低限必要なのはこの2ファイルです。
まずは、「functions.php」から。
<?phpadd_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );function theme_enqueue_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}上記を記述し、親テーマのstyle.cssのあとに子テーマのstyle.cssを読み込ませます。
これで自動的に下記のように親テーマ→子テーマの順でstyle.cssが読み込まれます。
<link rel='stylesheet' id='parent-style-css' href='＊＊ブログドメイン＊＊/wp-content/themes/twentynineteen/style.css?ver=5.0.1' type='text/css' media='all' /><link rel='stylesheet' id='twentynineteen-style-css' href='＊＊ブログドメイン＊＊/wp-content/themes/twentynineteen-child/style.css?ver=5.0.1' type='text/css' media='all' />次に、style.cssを作成します。
@charset "UTF-8";/*Template: twentynineteenTheme Name: Twenty Nineteen 子テーマ*/1行目の「@charset “UTF-8”;」は、日本語（マルチバイト文字）を扱うためのおまじないみたいなものです。
Templateは、親テーマのフォルダ名を記述します。
Theme Nameは、子テーマの名称です。Wordpress管理画面のテーマ名として表示されます。
基本はこの2ファイルを最低限用意し、上書きしたい部分を子テーマの中にどんどん追加してカスタマイズするだけです。
簡単ですよね。
さいごに
カスタマイズは怖くありません。さすがに親テーマを直接いじるのは危険ですが、子テーマなら安全にカスタマイズできるので、まずは子テーマを作ってみてください。
それでは。
コメント