「WordPress子テーマの作り方を知りたい。WordPressをカスタマイズするには子テーマを利用した方が良いことが分かったけど、自分が使っているテーマには残念ながら子テーマが配布されていない、、、。」
この記事ではこういった疑問に答えます。
- WordPress子テーマを作るための事前準備
- WordPress子テーマの作り方【４つの手順】
- WordPress子テーマを利用する際の注意点
WordPressの子テーマとは、親テーマ（通常のテーマ）と呼ばれる別のテーマと組み合わせて使う、カスタマイズ用のテーマのことです。
子テーマを利用することで、親テーマが更新されてもカスタマイズ内容が残りますし、何よりも誤って重要なコードを削除することが避けられます。
しかし、WordPressの公式テーマや国内の無料テーマだと子テーマを配布していないことが多くあります。
そこでこの記事では、WordPress子テーマの作り方と、利用する際の注意点を解説します。
WordPress子テーマを作るための事前準備
はじめに、子テーマを構成するファイルを作るために、「テキストエディタ」を用意します。
テキストエディタは、テキストファイル（コンピュータの文字情報）を編集するためのアプリケーションのことです。
Macユーザーであれば「CotEditor」、Windowsユーザーであれば「メモ帳」がデフォルトのテキストエディタとしてインストールされています。
ただし、デフォルトのエディタはやや使いづらいので、個人的には「Sublime Text」か「Atom」をおすすめします。
どちらも無料で利用できて、とても使いやすいと思います。
ナオ
予備知識：子テーマに必要なファイル
子テーマは、１つのフォルダ（ディレクトリ）と２つのファイルで構成されます。
- 子テーマのフォルダ
- style.css
- functions.php
作り方の全体像としては、テキストエディタでstyle.cssとfunctions.phpのファイルを作り、必要なコードを書き加え、子テーマのフォルダに入れる流れになります。
ナオ
WordPress子テーマの作り方【４つの手順】
この手順では、初期テーマであるTwenty Twentyの子テーマを作ることにします。
手順１：フォルダを作る
style.cssとfunctions.phpを入れるフォルダを作ります。
フォルダの名前は、親テーマのディレクトリ名＋「-child」か「_custom」とすることが一般的です。
TwentyTwentyの子テーマを作るので、ディレクトリ名は「twentytwenty-child」にしようと思います。
手順２：style.cssを作る
テキストエディタでstyle.cssを作成します。
ファイル内に以下の記述を入力します。このままコピぺすればOKです。
@charset "UTF-8";
/*
Theme Name: Twenty Twenty child
Template: twentytwenty
Description: Twenty Twentyの子テーマです。
Version: 1.0
*/テキストエディタで表示するとこんな感じです。
気を付けるべき点として、「Template」に関しては、親テーマのディレクトリ名を正確に入力します。ディレクトリ名が間違っていると子テーマとして認証されません。
なお、Theme NameとTemplate以外は任意なので、DescriptionとVersionは消しても問題ありません。
補足として、、、記述ルールは以下の通りです。
| Theme Name | 子テーマの名前（必須） |
|---|---|
| Template | 親テーマのディレクトリ名（必須） |
| Theme URI | テーマのURI（任意） |
| Author | 開発者の名前（任意） |
| Author URI | 開発者のURI（任意） |
| Version | 子テーマのバージョン（任意） |
手順３：functions.phpを作る
style.cssと同じように、つぎはfunctions.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' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>テキストエディタで表示するとこんな感じです。
これで必要なファイルが揃ったので、先ほど作った子テーマフォルダにstyle.cssとfunctions.phpのファイルを入れます。
手順４：子テーマをインストールする
作成した子テーマをインストールして、有効化します。
手順は次の通りです。
ナオ
WordPress子テーマを利用する際の注意点
さいごに、WordPress子テーマを利用する際の注意点を補足しておきます。
今後例えば、トップページのデザインを変えるためにhome.phpや、ヘッダーのデザインを変えるためにheader.phpを子テーマ内に新しく作成したとします。
そうすると、親テーマ内にあるhome.phpやheader.phpは読み込まれず、子テーマのファイルが読み込まれることになります。
この時に、もし親テーマがhome.phpやheader.phpに関連する新機能をアップデートした際、その機能が使えない場合があります。
新機能を利用するには、更新されたコードを子テーマのファイルにコピペして、カスタマイズした箇所を再度付け加えれば済む話ですが、親テーマのアップデートの際は修正される箇所を確認しておきましょう。
注意点としてはこんな感じです。
というわけで以上です。
