【2023年】これからブログを始める人へおすすめの書籍

Kissy

【WordPress】子テーマの作成方法

作成: 更新:

【WordPress】子テーマの作成方法

この記事ではWordPressで子テーマを作成する方法を記載します。

子テーマはたいてい親テーマの提供元から提供されているため、通常は知る必要はありません。しかし、テーマのカスタマイズを初めてみたい方や、テーマを自作してみたい方は、手始めに子テーマから作成してみると、テーマの構成を理解しやすいと思います。

実際にあるテーマのファイルをはじめから理解しようとすると、ファイル数も多く途中で挫折しがちです。子テーマを作ってカスタマイズしていくと理解が進むと思います。

子テーマとは?

そもそも子テーマとは何でしょうか?

テーマは通常そのまま使うことはなく、サイトに合うようにカスタマイズして使うことが多いです。その際、インストールしたテーマのファイルを修正してしまうと問題になります。それはテーマのアップデートが行われた場合です。

テーマは機能追加やバグ修正のためアップデートが行われます。アップデートを行うと、それまでカスタマイズしたファイルがアップデートで上書きされてしまい、修正した内容が消されてしまうわけです。悲しいですね。

そこで子テーマを使います。子テーマはそれ単体ではテーマとして機能しません。親テーマがある前提のテーマとなります。子テーマは親テーマから変更したいファイルだけを持っており、子テーマにないファイルは親テーマのファイルを参照するようになっています。

テーマのカスタマイズをする際は、子テーマに対して行います。そしてカスタマイズしていないファイルは親テーマのファイルを参照します。このような仕組みとしておくことで、親テーマのアップデートが行われても子テーマのファイルは上書きされずにすむわけです。

最小限の子テーマの構成

子テーマは少なくともfunction.phpstyle.cssを持っている必要があります。

<子テーマのフォルダ>
・function.php
・style.css

子テーマのフォルダ名は任意ですが、<親テーマのフォルダ名>に-childをつけることが多いようです。

親テーマとの紐づけ

親テーマとの紐づけはstyel.cssのファイル先頭のコメントで行います。ファイル先頭のコメントは単なるコメントではなく意味があります。そのため、子テーマは少なくともファイル先頭のコメントが記載されて、決まったフォーマットで記載する必要があります。

/*
Theme Name: <子テーマのファイル名>(必須)
Author: <作者>
Template: <親テーマのフォルダ名>(必須)
Version: <子テーマのバージョン>
License: <子テーマのライセンス>(GPLv2 or laterなど)
License URI: <子テーマのライセンスURI>(http://www.gnu.org/licenses/gpl-2.0.htmlなど)
Text Domain: <子テーマのテキストドメイン>(よくわからない。子テーマのフォルダ名でよいと思う。)
*/

上記をUTF-8で保存します。

親テーマと子テーマのファイルの関係

冒頭で説明した通り、基本的に子テーマにあるファイルは親ファイルを上書きして動作します。カスタマイズする際は、親テーマのファイルを子テーマにコピーして、編集していきます。

親テーマのファイルをコピー&編集して使うことは、必要なファイルのみ修正すればよいというメリットがある一方、アップデート等で親テーマに変更があった場合、その修正は子テーマには反映されないという点です。

1つだけ例外があって、style.cssだけは親テーマと子テーマの両方のファイルが有効になるようにします。このようにしておくと、style.cssは親テーマと差分のスタイルをすればよいことになります。また、CSSファイルでは同じスタイルの定義がある場合、上書き定義できるのでこのような運用が可能になっています。

親テーマと子テーマの両方を有効にする

なお、親テーマのstyle.cssと子テーマのstyle.cssの両方を有効にするために、子テーマのfunction.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'),
                    filemtime( get_theme_file_path( 'style.css' ) ) );
}

子テーマのパッケージ

子テーマのパッケージは「子テーマのフォルダ」をzip圧縮したものになります。

子テーマの作成手順

まとめると、子テーマの作成手順は以下になります。

  1. 子テーマのフォルダを作成する。
  2. 子テーマのフォルダにfunction.phpファイルを作成します。(内容は前述の通り)
  3. 子テーマのフォルダにstyel.cssを作成します。(内容は前述の通り)
  4. 子テーマのフォルダをzip圧縮します。
  5. 子テーマの完成です。

子テーマのインストール

子テーマができたらインストールします。子テーマは親テーマがあることが前提なので、親テーマもインストールしている必要があります。

  1. WordPressの[外観]-[テーマ]-[新規追加]から、親テーマをインストールし、有効化します。
  2. WordPressの[外観]-[テーマ]-[新規追加]から、子テーマをインストールし、有効化します。

もし、FTPなどでサーバーへファイルを直接アップロードできる場合は、直接WordPressのテーマフォルダ<WordPressのインストールフォルダ>\wp-content\themesにアップロードしても構いません。(カスタマイズ中は、zip圧縮の手間がなくて早い。)

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

関連記事

SPONSORED LINK
SPONSORED LINK