WordPress : 子テーマの作成方法

WordPressのテーマカスタマイズにおいて、公式に推奨されている子テーマの利用について紹介します。

なぜ子テーマを使うのか

WordPressの高機能な無料テーマをベースに、独自のデザインに合わせるためカスタマイズして使う人は多くいます。

しかしテーマファイル自体に手を入れると、テーマがアップデートされても対応できなくなる問題があります。アップデート=ファイルの上書きのため、自分のカスタマイズが帳消しにされるためです。

後から機能やデザインを変更されても困るのであえてアップデートしないケース(特に受託制作)もありますが、テーマ自体にセキュリティホールがあった場合に対応できない問題が残ります。

オリジナルのテーマは親として手を入れず、親の機能やデザインを継承する子テーマを作ることで、親のアップデートは継続して受けつつ自由にカスタマイズができるメリットがあります。

子テーマの作り方

公式テーマの「Twenty Seventeen」を例に「Twenty Seventeen Child」という子テーマを作ります。

テーマディレクトリ(wp-content/themes/)に、親テーマと子テーマのフォルダを並行に配置します。

themes
├ twentyseventeen          //オリジナルの親テーマ
└ twentyseventeen-child    //子テーマ

子テーマに functions.phpstyle.css の2つのファイルを新規作成します。
内容は以下になります。

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 を読み込むための設定なので、テーマの style.css をフロントエンドで使っていなければ記述不要で functions.php は空でも構いません。

style.css

/*
Theme Name: Twenty Seventeen Child
Template:   twentyseventeen
*/

テーマフォルダの style.css はそのテーマ情報を記載するファイルですが、子テーマ自身の名前と親テーマを指定しています。

「twentyseventeen-child」のフォルダ内は以下の構成になった状態です。これが子テーマの最低限の状態です。

twentyseventeen-child
├ functions.php
└ style.css

この2つのファイルの入った「twentyseventeen-child」をテーマディレクトリにアップした後、WPのテーマ設定画面で「Twenty Seventeen Child」を有効化すると親テーマ「Twenty Seventeen」と全く同じ状態になっていることが確認できます。

子テーマのカスタマイズ

例として投稿ページの表示をカスタマイズするとします。

投稿ページは single.php で構成されているため、親テーマの single.php を子テーマにコピーします。

twentyseventeen
├ ...
├ single.php  //親テーマのファイル。コピーだけして手は入れない。
└ ...
twentyseventeen-child
├ functions.php
├ single.php  //親テーマからコピーしたファイル。これに手を入れる。
└ style.css

「twentyseventeen-child」側の single.php を編集することで親に影響を与えることなくカスタマイズすることができます。

親子テーマの特徴まとめ

  • 子テーマに親テーマと同名のファイルがある場合、子テーマの内容が優先される。
  • 子テーマに無いファイルの仕事は親が受け持つ。
  • 例外的に functions.php のみ子→親の順で処理される。
  • 親テーマに無い子テーマだけのファイルを追加してもOK。

仕組み大雑把に言うと、子テーマが親テーマを上書きしているだけなので理解は難しくないと思います。

ゼロから独自テーマを作る時には必要ない機能ですが、何らかのテーマをベースに作る方が時間短縮になるので子テーマは積極的に使いたい機能です。