WordPressの子テーマを作成する

子テーマイメージ

デフォルトテーマのTwenty Sixteenをカスタマイズして使ってたら、テーマのアップデートがかかったので、更新する前に子テーマを作成してカスタマイズ部分を残すことにした。

WordPressの子テーマとは?

子テーマ」とは、名前の通り「親テーマの内容を引き継いだテーマ」のこと。

さらに、重複部分は子テーマが優先されるため、親テーマの変更したい部分だけ再定義することで、親テーマに影響せず、カスタマイズすることが出来る。

子テーマを使うメリット

提供されたテーマをカスタマイズして使用する場合、子テーマでカスタマイズしておくと、冒頭で述べたような親テーマのアップデートに関係なく、カスタマイズ内容を保持することが出来る。

仮に子テーマを使用していない場合、テーマのアップデートを行うと、カスタマイズしたファイルが上書きされてしまい、カスタマイズ内容はなくなってしまう。

つまり、子テーマを使うメリットは、親テーマの保守性を維持したまま、新たなテーマを作成できる点である。

もっと端的に言えば、自分のテーマのメンテナンス(バグ修正など)を第三者がやってくれるようなもの。
これはもう子テーマを使わない手はない!

子テーマの作り方

例として、Twenty Sixteenテーマを流用する場合。

まず、子テーマで最低限必要な以下の2ファイルを用意する。

  • functions.php
  • style.css

文字コードとか改行コードとかよく分からない人は、親テーマの同名のファイルをコピーすればいい

で、それぞれのファイルの内容を以下のように記述する。

functions.php

<?php
/**
 * 子テーマサンプル
 * functions.php
 */

// 親テーマからスタイルの継承
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

style.css

/*
 Theme Name:   [子テーマの名前](必須)
 Theme URI:    [子テーマのダウンロードURL]
 Description:  [子テーマの説明]
 Author:       [子テーマの作成者]
 Author URI:   [子テーマ作成者のホームページ]
 Template:     twentysixteen(必須。親テーマの名前)
 Version:      [子テーマのバージョン]
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         [子テーマのタグ]
 Text Domain:  [子テーマのテキストドメイン]
*/
// 以下に追加または上書きしたいスタイルを書いていく

上記で(必須)って書いてるところ以外は書いても書かなくてもどっちでもいい。
面倒なら、Theme NameとTemplateの2行だけ書いておけばオッケー。

上記2ファイルが出来たら、適当なフォルダに入れて「./wp-content/themes/」以下に格納する。
以上で下準備は完了。

子テーマを使う

子テーマの使い方は、普通にテーマを指定するのと同じ。
WordPressの管理画面から、「外観」→「テーマ」を選択して、子テーマを選択するだけ。

子テーマをカスタマイズする

子テーマの継承関係は以下の通り。

記述した内容が親テーマに追加されるファイル

下記のファイルで記述した内容は、親テーマの同名のファイルに追加されて扱われる。

  • functions.php
  • style.css

記述した内容が親テーマに上書きされるファイル

上記以外のテーマファイルについては、親テーマと同名のファイルを子テーマに定義すると、親テーマのファイルは呼び出されず、子テーマのファイルだけ呼び出される。

つまり、同名のファイルは子テーマで上書きされる。

子テーマの運用について

functions.phpとstyle.css以外のファイルは、親テーマのアップデートごとに、差分を取って、必要ならば修正する必要がある。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です