WordPress子テーマの作り方を3つの手順に分けて解説【作業時間5分】

「WordPressをカスタマイズするには、子テーマを利用した方が良いことが分かった。でも私が利用しているテーマには子テーマがないから作り方を知りたい。」

この記事ではこういった疑問に答えます。

本記事の内容

  • WordPress子テーマの作り方
  • WordPress子テーマの注意点

WordPressの子テーマとは、親テーマ(通常のテーマ)と呼ばれる別のテーマと組み合わせて使うカスタマイズ用のテーマのことです。

子テーマを利用することで、親テーマが更新されてもカスタマイズ内容が残りますし、何よりも誤って重要なコードを削除することが避けられます。

しかし、WordPressの公式テーマや国内の無料テーマだと子テーマを配布していないことが多くあります。

そのため、この記事では、WordPress子テーマの作り方と子テーマを利用する上での注意点を解説します。

WordPress子テーマの作り方

まず、子テーマ用に必要なファイルを作るためには「テキストエディタ」が必要です。

テキストエディタとは、テキストファイル(コンピュータの文字情報)を編集するためのアプリケーションのことで、主にマークアップ言語やプログラミング言語を書く時に利用されます。

Macを使っている方であれば「CotEditor」がデフォルトでインストールされています。

なお、個人的には「Atom」か「Sublime Text」をおすすめします。どちらも無料ですし、使いやすいと思います。

ちなみに私は「Sublime Text」を使っています。

子テーマに必要なファイル

子テーマは、1つのディレクトリと2つのファイルで構成されます。

  • 子テーマのディレクトリ
  • style.css
  • functions.php

ディレクトリとはファイルを入れるフォルダのことです。

そして、style.cssfunctions.phpのファイルを作り、子テーマに必要なコードを書くことになります。

子テーマを作るための手順

この手順ではWordPressに初めからインストールされている、Twenty Twentyの子テーマを作ることにします。

手順1:ディレクトリ

まずは、style.cssfunctions.phpを入れるフォルダを作ります。

フォルダの名前は、親テーマのディレクトリ名+「-child」か「_custom」とすることが一般的です。

TwentyTwentyの子テーマを作るので、ディレクトリ名はtwentytwenty-childにしようと思います。

手順2:style.css

つづいて、テキストエディタでstyle.cssを作成します。

以下の記述をコピペすればOKです。

style.css
@charset "UTF-8";
/*
Theme Name: Twenty Twenty child
Template: twentytwenty
Description: Twenty Twentyの子テーマです。
Version: 1.0
*/

テキストエディタで表示するとこんな感じです。

Templateに関しては、親テーマのディレクトリ名を正確に入力します。ディレクトリ名が間違っていると子テーマとして認証されません。

なお、Theme NameとTemplate以外は任意なので、DescriptionとVersionは消しても問題ありません。

補足ですが子テーマ用に読み込ませるための記述ルールは次の通りです。

Theme Name 子テーマの名前(必須)
Template 親テーマのディレクトリ名(必須)
Theme URI テーマのURI(任意)
Author 開発者の名前(任意)
Author URI 開発者のURI(任意)
Version 子テーマのバージョン(任意)

手順3:functions.php

次はテキストエディタでfunctions.phpを作成します。

以下の記述をそのままコピペすればOKです。

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')
);
}
?>

テキストエディタで表示するとこんな感じです。

子テーマを有効化する

最後に、子テーマを有効化します。

STEP.1
style.cssfunctions.phpを入れたディレクトリを圧縮します。

STEP.2
圧縮すると「.zip」フォルダが作成されます。

STEP.3
子テーマをインストールするので、WordPressの管理画面から「テーマ」をクリックします。

STEP.4
「新規追加」をクリックします。

STEP.5
「テーマのアップロード」をクリックします。

STEP.6
「ファイルを選択」をクリックします。

STEP.7
先ほど圧縮した「.zip」のファイルを選択肢してインストールします。

STEP.8
テーマディレクトリ内にtwentytwenty-childがインスールされています。

STEP.9
この子テーマを有効化すれば完了です。

WordPress子テーマの注意点

WordPress子テーマには利用上の注意点があります。

今後例えば、トップページのデザインを変えるためにhome.phpや、ヘッダーのデザインを変えるためにheader.phpを子テーマ内に新しく作成したとします。

そうすると、親テーマ内にあるhome.phpheader.phpは読み込まれず、子テーマのファイルが読み込まれることになります。

この時に、もし親テーマがhome.phpheader.phpに関連する新機能を実装した場合、その機能が使えない場合があります。

新機能を利用するには、更新されたコードを子テーマのファイルにコピペして、カスタマイズした箇所を再度付け加えれば済む話ですが正直面倒です。

こんな感じで注意点を覚えておきましょう。

というわけで以上です。