WordPress子テーマの作り方を4つの手順で解説【コピぺで作れる】

「WordPress子テーマの作り方を知りたい。WordPressをカスタマイズするには子テーマを利用した方が良いことが分かったけど、自分が使っているテーマには残念ながら子テーマが配布されていない、、、。」

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

本記事の内容

  • WordPress子テーマを作るための事前準備
  • WordPress子テーマの作り方【4つの手順】
  • WordPress子テーマを利用する際の注意点

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

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

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

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

WordPress子テーマを作るための事前準備

はじめに、子テーマを構成するファイルを作るために、「テキストエディタ」を用意します。
テキストエディタは、テキストファイル(コンピュータの文字情報)を編集するためのアプリケーションのことです。

Macユーザーであれば「CotEditor」、Windowsユーザーであれば「メモ帳」がデフォルトのテキストエディタとしてインストールされています。

ただし、デフォルトのエディタはやや使いづらいので、個人的には「Sublime Text」か「Atom」をおすすめします。
どちらも無料で利用できて、とても使いやすいと思います。

ナオ

私自身はもともとAtomを利用していましたが、今ではSublime Textを利用しています。

予備知識:子テーマに必要なファイル

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

  • 子テーマのフォルダ
  • style.css
  • functions.php

作り方の全体像としては、テキストエディタでstyle.cssfunctions.phpのファイルを作り、必要なコードを書き加え、子テーマのフォルダに入れる流れになります。

ナオ

コードを書くことに苦手意識を持つ方もいると思いますが、とても簡単な作業なので安心してください。

WordPress子テーマの作り方【4つの手順】

この手順では、初期テーマである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を作る

style.cssと同じように、つぎはfunctions.phpを作成します。

以下の記述をコピペしてください。

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.cssfunctions.phpのファイルを入れます。

手順4:子テーマをインストールする

作成した子テーマをインストールして、有効化します。

手順は次の通りです。

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に関連する新機能をアップデートした際、その機能が使えない場合があります。

新機能を利用するには、更新されたコードを子テーマのファイルにコピペして、カスタマイズした箇所を再度付け加えれば済む話ですが、親テーマのアップデートの際は修正される箇所を確認しておきましょう。

注意点としてはこんな感じです。
というわけで以上です。