WordPressで子テーマを作成する

まいどー。かっちです。

テーマを少しカスタマイズしてみようと思い、色々と調べているうちに小テーマを作成したほうが便利だと気付いたので、今回は小テーマの作成について説明していきます。

小テーマとは？

公式のテーマファイルのレイアウトをカスタマイズする際に直接テーマを編集していませんか？

直接テーマファイルを修正しても問題はないのですが、テーマをアップデートした際に修正していた箇所が初期状態に戻ってしまいます。子テーマを使用すれば修正した箇所が戻ることなく保持されます。

また、編集している最中で元の状態に戻したくなった場合に直接編集してしまうと編集前の状態が分からなくなり元に戻せなくなってしまうかもしれません。 （編集前にバックアップしとけば問題ないのですが．．．）

親テーマ（公式のテーマファイル）をそのまま引き継いでくれますので、新たに構成を考える必要がなく変更したい箇所だけを修正できるのです。 そういった時に使えるのが子テーマなのです。

例えば以下の図のように「index.php」を修正したとすれば、小テーマに「index.php」をコピーして追加すれば親テーマ側に反映されます。同様に新しいテンプレートを追加するのであれば小テーマ側に追加すると親テーマ側に反映されます。

まずは小テーマの作り方を説明していきます。

小テーマの作成方法

小テーマを作るのに難しそうなイメージがありますが、実は初心者でも簡単に作ることができます。今回は親テーマを「twentyfifteen」の場合で説明していますので、他のテーマを使用している方は置き換えてください。

子テーマは、少なくとも 1つのフォルダ(子テーマフォルダ)と、2つのファイル(style.css と functions.php) から構成されます。

子テーマフォルダの作成

WordPressがインストールされている以下に新規フォルダを作成します。

/www/wp-content/themes/twentyfifteen-child

今回、フォルダ名は親のフォルダ名に「-child」を付けています。フォルダ名に関しては特に決まりはないのですが、空白文字を含めてしまうとエラーが発生しますので注意してください。

ファイルの作成

小テーマのファイル構成は以下のようになっています。

・style.css　※必須
・functions.php　※必須
・各テンプレートファイル（header.phpやfooter.php、single.phpなど）

「style.css」と「functions.php」は必ず作成してください。作成しないと以下のように小テーマとして認識されずに壊れたテーマと表示されてしまいます。

以下の内容で「style.css」を作成します。

/*
Template:twentyfifteen
Theme Name:Twenty Fifteen Child
Description:Twenty Fifteeの子テーマ
Author:作成者
Version:1.0
*/

■項目の説明
Template    ： 親テーマのディレクトリ名　※必須
Theme Name　： 子テーマの名前　※必須
Description ： 子テーマの説明
Author　    ： 子テーマの作者
Version　   ： 子テーマのバージョン

作成した「style.css」を「twentyfifteen-child」フォルダにコピーします。 管理画面から「外観」→「テーマ」を選択します。小テーマとして認識されるようになります。

スタイルの設定

親テーマと子テーマのスタイルシートをキューに入れる作業が必要なります。

スタイルの設定を行わずにテーマを有効化すると小テーマのスタイルシートが優先して表示されますのでレイアウトが崩れて表示されてしまいます。

親テーマのスタイルを引き継ぐ為に次の手順を行う必要があります。

以下の内容で「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' );

}

作成した「functions.php」を「twentyfifteen-child」フォルダにコピーします。

これで子テーマを有効化する準備ができました。有効化ボタンをクリックすれば小テーマが有効化されます。

テンプレートファイルの設定

スタイルシート以外のテンプレートファイルをカスタマイズする場合も同様に、子テーマは親テーマのすべてのファイルを上書きできます。 同じ名前のファイルを子テーマフォルダにコピーすることで親テーマ内の同名のファイルは上書きされ優先的されて使用されます。

例えば親テーマの「index.php」をカスタマイズしたのであれば小テーマにも同じ名前のファイルをコピーし、コピーした「index.php」をカスタマイズすることでテーマのカスタマイズすることが可能となります。

親テーマに存在しないファイルでも、子テーマに新しく作成することでテンプレートファイルが読み込まれ子テーマにある情報を優先的に使ってくれます。

functions.phpに関して

スタイルシートやテンプレートファイルとは異なり、子テーマの「functions.php」は、親テーマの機能を上書きしてくれません。

親テーマのファイルの直前に読み込まれまますので追加したい機能のみを追加するだけで有効となります。親テーマの「functions.php」のすべての内容を子テーマの「functions.php」にコピーしないように気を付けてください。

最後に

カスタマイズを進めていく内に分かってきますが、必要に応じて必要なファイルをコピーしながらカスタマイズを進めていけばいいと思います。

今回は小テーマとして機能させる為の最低限の作成方法を紹介させて頂きました。