【WordPress】子テーマの作り方

子テーマイメージ

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

WordPressの子テーマとは?

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

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

子テーマを使うメリット

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

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

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

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

子テーマの作り方

それでは早速、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:  [子テーマのテキストドメイン]
*/
// 以下に追加または上書きしたいスタイルを書いていく

上記「twentysixteen」と書かれている部分は、親テーマのディレクトリ名を記述する。

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

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

子テーマを使う

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

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

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

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

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

  • functions.php
  • style.css

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

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

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

子テーマ運用上の注意点

良いこと尽くしのように書いてきたが、子テーマ運用上の注意点もある。

上記の継承関係にて、子テーマで上書きされるファイルについては、親テーマのアップデートによって、修正が必要になる場合がある。
functions.phpstyle.css以外のファイル)

なので、親テーマのアップデートごとに差分を取り、必要ならば修正をすること。

投稿者: Output48

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

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください