ダウンロードした誰かのテーマにコード変更を加えると、将来テーマのアップデートがあったときに自分のコードが消えてしまうので困りますよね。いつも僕は自分のコードが書かれたファイルを退避しておいてアップデート後に戻していたのですが、もっといい方法がありました。
それは子テーマを作る方法です。子テーマとは親テーマを設定して、差分を作り込んでいくテーマです。親テーマのアップデートがあっても、子テーマに影響を与えるようなアップデートでなければほとんどの場合、問題なく子テーマが継続して使えるようになります。
作成方法
ではさっそく子テーマの作成方法をみていきましょう。
ここでは次の構成とします。
- 親テーマ: twentyseventeen (公式テーマ)
- 子テーマ: twentyseventeenchild
テーマフォルダの作成
テーマディレクトリに子テーマ用のフォルダ
を作ります。
wp-content/themes/twentyseventeenchild
子テーマを定義する
style.css
を作成します。
wp-content/themes/twentyseventeenchild/style.css
次の内容にします。
/* Theme Name: [子テーマ名] Template: [親テーマ名 ※1] Author: [作者名] Version: [バージョン番号] */
※1 親テーマ名は分かりますか? テーマ名は、外観–テーマメニューでテーマをクリックするとURLに表示されています。?theme=twentyfifteen
のような感じになっているかと思います。
例) 親テーマとして Twenty Seventeen
を使う場合は次のようにします。
/* Theme Name: Twenty Seventeen Child Template: twentyseventeen Author: keruu Version: 1.0.0 */
これで子テーマが使えるようになりました。しかし、まだ有効化してもスタイルが適用されません。
親テーマのスタイルを適用する
次のようにして親テーマのスタイルを使うようにします。
functions.php
を作成します。
wp-content/themes/twentyseventeenchild/functions.css
中身を下記のようにします。
<?php add_action('wp_enqueue_scripts', 'enqueue_parent_styles'); function enqueue_parent_styles() { wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css'); }
完成!
これで子テーマは完成です。テーマを有効化してみましょう。どうですか。表示されましたでしょうか。
こんな便利な方法があるなんてもっと早く知りたかったです。でも、これでテーマ開発が一層楽になりますね。
関連した商品
ビジネスサイト制作で学ぶ WordPress「テーマカスタマイズ」徹底攻略
|
「WordPressの基本はわかった。で、その次何をすればステップアップできるだろう?」 という人のための、WordPress活用本。 |
小さな会社のWordPressサイト制作・運営ガイド[オリジナルテーマ作成編]
自前でできる! WordPressの本格テーマ作成。 |
初めてWordPressのオリジナルテーマ制作にトライする方に向けて、テーマの制作フロー(工程)と周辺知識をまとめました。 |