[WordPress]「子テーマ」の構造と自作する方法

• WordPressの子テーマは親テーマをもとに作られたカスタマイズ用の追加テーマで、テーマのアップデート時にも自分の変更内容を保持できます。
• 子テーマを作るには主にstyle.cssとfunctions.phpの2つのファイルが必要で、親テーマとの連携にはTemplateの指定が重要です。
• 作成した子テーマはZIP形式に圧縮してWordPressの管理画面からアップロードすると簡単にインストールできます。

1. 子テーマとは何か？

WordPressの「子テーマ」は、「親テーマ」をもとに作られた、カスタマイズ用の追加テーマです。
子テーマはstyle.cssとfunctions.phpの2つのファイルがあれば作れます。

WordPressのウェブサイトを運営していると、デザインや機能をカスタマイズしたくなることがあります。
子テーマを作る最大の理由は、利用しているテーマがアップデートされても自分のカスタマイズ内容を保持できることです。

1. 親テーマをアップデートしてもカスタマイズ内容が失われない
2. 親テーマのファイルを直接編集する必要がない
3. 問題が発生しても親テーマを適用すれば元に戻せる

親テーマのファイルを直接変更すると、テーマのアップデート時にその変更内容が上書きされてしまいます。
しかし、アップデートには、致命的なエラー修正やセキュリティ対策も含まれていて、無効にするわけにもいきません。

せっかく自分でカスタマイズしたものが、「全部やり直し」にならないようにするために、「子テーマ」という仕組みが用意されています。

しかも、子テーマは親テーマの一部を上書きするだけのファイルなので、内容もシンプル。
編集するハードルも低くなります。
「カスタマイズ」と「アップデート」を両立させるために、子テーマを作るのです。

ちょっと読み込み処理が複雑になりますが、コードレベルでカスタマイズをするなら、子テーマを作るメリットが大きいです。

1-1. 子テーマ制作に必要なもの

子テーマを自分で作る場合、主に2つのファイルが必要です：

1. style.css：
   テーマのデザインスタイルを設定するファイルです。
2. functions.php：
   WordPressに機能を追加するファイルで、プラグインのような役割を持ちます。

子テーマでは、親テーマの同じファイルの内容を上書きしたり、新しい機能を追加したりします。

その他にも、header.phpやindex.phpなど、親テーマのファイルを細かくカスタマイズしたい場合は、それらのファイルも子テーマに追加できます。

2. 子テーマの作り方

2-1. 子テーマのフォルダを作る

まず、子テーマ用のフォルダを作ります。
パソコンのエクスプローラーで「新規作成」→「フォルダー」を選びます。

フォルダ名に決まりはないですが、わかりやすいように「テーマ名-child」というように付けるのが一般的

2-2. style.cssの雛形を作る（Template）

次に、子テーマのstyle.cssファイルを作ります。

/*
Theme Name:Chiilabo child
Theme URI:
Description:WordPressテーマ「Chiilabo」の自作子テーマです。
Template:ParentThemeName
Author:ちいラボ
Author URI:http://chiilabo.com/
Version:0.0.8
*/

このコードでは、子テーマの情報をコメント内に記載しています。
一番重要なのは、「Template」。
親テーマのフォルダ名で、これで親テーマと連携します。
間違えると子テーマが正しく動作しません。

あと、Theme Nameも大事です。
半角英数だけにするのが無難です。
&などの記号を含めたら、テーマファイルエディタでファイルの保存ができない不具合がありました。

2-3. functions.phpの雛形を作る（theme_enqueue_styles）

次に、functions.phpファイルを作ります。

WordPressに「親テーマのstyle.cssを読み込み、その後に子テーマのstyle.cssを読み込む」という指示を与えています。

<?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')
);
}
?>

これにより、親テーマのスタイルの上に子テーマのスタイルが適用されます。
これで子テーマの基本ファイルが完成しました。

<?php
function theme_enqueue_styles() {
wp_dequeue_style('main-style');
wp_deregister_style('main-style');
wp_enqueue_style( 'main-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('main-style') );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11 );
?>

3. サイトに子テーマをインストールする（ZIP形式）

作った子テーマをWordPressサイトにアップロードする方法は2つあります：

1. FTPソフトを使って直接アップロードする
2. WordPress管理画面から圧縮したフォルダ（ZIP形式）をアップロードする

ZIP形式に圧縮する方がかんたんです。

まず、パソコンで作成した子テーマのフォルダを右クリックし、「圧縮」→「.zip」を選んでZIPファイルを作っておきます。

1. WordPressの管理画面にログインし、「外観」→「テーマ」を開きます。
2. 「新規追加」→「テーマのアップロード」を選び、作成したZIPファイルをアップロードします。
3. アップロードが完了したら、子テーマを「有効化」します。

子テーマの編集画面に「この子テーマは親テーマ「〇〇」のテンプレートを引き継ぎます」と表示されていれば成功です。

QRコードを読み込むと、関連記事を確認できます。