WordPressの子テーマを作ってみた話
いつもなんとなく触っていたWordPress。
言われるがままにカスタマイズしていたWordPress。
ちょっと落ち着いて「子テーマ」を作って、いろいろ遊んでみることにしました。
子テーマって何？なんで作るの？
WordPressのテーマは、管理画面からインストールすると wp-content/themes の中に保存されます。
テーマを購入した時に「ここに入れてね」と書かれていることも多いと思います。
そのフォルダを開けば、テーマのコードが見られて、直接編集することもできます。（楽しい♡）
でもでもちょっと待って！
テーマを直接編集すると、テーマの更新でカスタムしたコードが消えてしまいます。
だからといって更新しないのは、セキュリティ的に危険。
(ただでさえオープンソースだしね)
子テーマを作ろう！
子テーマを作ると、親テーマの機能を引き継ぎつつ、自分のカスタマイズだけを上書きできるようになります。
親テーマが更新されても、子テーマの変更はそのまま残る！便利！
子テーマの作り方
① フォルダを作る
wp-content/themes に、親テーマ名＋-child のフォルダを作ります。
例：
親テーマが astra なら → astra-child
② style.css を作る
作ったフォルダの中に style.css を作成し、以下のように記述します：
astraの例:
/*
Theme Name: Astra Child
Template: astra
Author: 自分の名前
Version: 1.0.0
Description: Astraの子テーマです
*/
-
Theme Name:は管理画面に表示される名前（分かりやすい名前がおすすめ） -
Template:は親テーマのフォルダ名（大文字小文字も正確に！）
最低限、Theme Name: と Template: があればOKです。
③ 子テーマを有効化する
ローカル環境ならそのまま見れます。Web環境なら作ったフォルダをアップしましょう。
WordPress管理画面 → 外観 → テーマ
作成した子テーマが表示されているはずなので、「有効化」します。（勝手に有効化されていることもあるかも）
※ screenshot.png をフォルダに入れると、テーマ一覧で画像が表示されます（推奨サイズ：1200×900）
④ functions.php を作る
子テーマの functions.php に、親テーマのCSSを読み込むコードを書きます。
astraの例:
<?php
add_action( 'wp_enqueue_scripts', 'astra_child_enqueue_styles' );
function astra_child_enqueue_styles() {
wp_enqueue_style( 'astra-child-style', get_stylesheet_uri(), array( 'astra-theme-css' ), '1.0.0' );
}
-
wp_enqueue_style()：CSSを読み込む関数 -
'astra-child-style'：子テーマのCSSの名前 -
get_stylesheet_uri()：子テーマのstyle.cssのURLを取得 -
array( 'astra-theme-css' )：親テーマのCSSに依存しているよ、という指定 -
'1.0.0'：バージョン番号（キャッシュ対策にも使える）
カスタマイズのポイント
- 子テーマの
style.cssに書いたCSSは、親テーマのスタイルを上書きできます。 -
functions.phpには、カスタム投稿タイプやタクソノミーの登録なども書けます。
親テーマのテンプレートファイルをコピーして、子テーマに同じ名前で保存すれば、テンプレートのカスタマイズも可能です。
親テーマの functions.php をコピーして使うのはNGです。
関数が重複して不具合が出ることがあります。
注意点
- 子テーマでテンプレートをカスタマイズすると、親テーマのアップデートの影響を受けなくなります。
→ セキュリティ対策や機能追加は自分で管理する必要があります！ 気を付けよう！
参考リンク
おわりに
WordPressって、テーマのフォルダを開くとコードが見れるから楽しいよね。
次はカスタム投稿タイプやタクソノミーについても書いてみたいと思います！