子テーマを作成してWordPressテーマをカスタマイズする方法

2020年11月13日

WordPressのテーマを大幅にカスタマイズする場合は、子テーマを使うのが便利です。なぜ子テーマはカスタマイズに役立つのでしょうか？この記事では、子テーマの仕組みや使い方、基本的な子テーマの作り方について説明します。

WordPressの子テーマ

子テーマとは

既存のテーマを「親」として、親テーマのデザインや機能を継承するための「子」となるテーマを、子テーマといいます。

子テーマは、テーマ開発者によって配布されている場合があります。また、自分で子テーマを作成することもできます。

子テーマを使う理由

子テーマを使用する最大の目的は、テーマをカスタマイズした内容を保持することです。

テーマのカスタマイズとは、テーマ内に含まれるファイルの内容を書き換えることです。例えば、テーマに対して何らかの機能を追加したい場合、その機能に関するプログラムをテーマ内のファイルに追加することができます。

もしプログラムの追加や削除を既存のテーマに直接行うと、そのテーマがアップデート（更新）されたときにカスタマイズ内容が失われるおそれがあります。

しかし、機能を継承できる子テーマに対してカスタマイズを行えば、親テーマがアップデートされてもカスタマイズした内容を保持することができるわけです。

子テーマを使い始める前に知っておきたいのが、テーマのデザインや機能をカスタマイズをするには、HTML・CSS・PHPなどの知識が必要だということです。

言い換えれば、HTML・CSS・PHPなどの言語・プログラムに関する知識がなければ、子テーマを利用する意味はありません。

子テーマは、初心者向けの機能とは言えないですね。

そもそも子テーマが必要ですか？

子テーマは、テーマをとことんカスタマイズしたい人や、既存のテーマをベースにして独自性の強いテーマを開発したい人など、中級者以上の人にとって便利な機能です。

あなたが子テーマを使って、やりたいことは何でしょうか？「文字の色や大きさの変更」など、ちょっとした見た目の変更なら

「追加CSS」機能を使いましょう。

追加CSSは、テーマに独自のCSSコードを追加できる、WordPressの標準機能です。テーマカスタマイザーのメニューから選択できます。既存のテーマにない機能を追加したいなら

別のテーマを手に入れるか、プラグインの導入を検討してみてください。

そもそも追加しようとしている機能が本当に必要なのか、いま一度考えることも大切です。そのカスタマイズは、ブログ読者にとってメリットがありますか？「見た目をカッコよくしたい」など、ただの自己満足になっていないでしょうか。

これらを踏まえた上で、「やっぱり子テーマが必要だ」と感じたのであれば、ぜひこの先も読み進めてください。

子テーマの作り方

Web上で販売・配布されているテーマの中には、子テーマも合わせてダウンロードできるものがあります。

ブログ初心者におすすめのWordPressテーマでご紹介しているテーマは、すべて開発者が作成した子テーマをダウンロードできます。

もし開発者が作成した子テーマをダウンロードできるなら、その子テーマを利用するのが効率的です。子テーマをダウンロード後、子テーマのインストールと有効化へ進んでください。

子テーマを自分で作成する場合は、次の説明を参考にしてください。

子テーマに最低限必要なもの

子テーマを機能させるために最低限必要なのは、以下の3つです。

子テーマに最低限必要なもの

子テーマ用のフォルダ
スタイルシート「style.css」
関数ファイル「functions.php」

子テーマ用のフォルダ

まずは、子テーマに必要なファイルの入れ物となる、フォルダを作っておきましょう。フォルダ名の付け方

半角英数字を使う
空白を含めない
末尾に「-child」を付ける（推奨。必須ではない）

例えば、標準テーマ「Twenty Twenty」の子テーマを作成する場合、フォルダには「twentytwenty-child」のように名前を付けます。

スタイルシート「style.css」

スタイルシート「style.css」は、親テーマと子テーマを関連付けるために必須のファイルです。

テキストエディタを開き、下の例を参考にしてコードを記述してください。

/*
Theme Name: Twenty Twentyの子テーマ
Template: twentytwenty
*/

Theme Name:

ここで入力した名前は、WordPress管理画面[外観]→[テーマ]をクリックすると開く「インストール済みテーマの一覧」で表示されます。

実際に表示されるのは、子テーマをインストールした後です。 Template:

親テーマのフォルダ名を記述します。フォルダ名を確認するには、FTPクライアントなどでWordPressインストール先の/wp-content/themes/を開きます。

WordPressインストール先の/wp-content/themes/で親テーマのフォルダ名を確認

WordPressユーザーのためのFTPソフトの使い方【初心者向け】

コードが書けたら「style.css」というファイル名で保存します。

保存先は、子テーマ用に作成したフォルダ（例：twentytwenty-child）の中です。

関数ファイル「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' );
}

参考：子テーマ – WordPress Codex 日本語版

コードが書けたら「functions.php」というファイル名で保存します。

保存先は、子テーマ用に作成したフォルダ（例：twentytwenty-child）の中です。

以上で、子テーマが作成できました。「○○○-child」というフォルダの中に、「style.css」と「functions.php」が含まれていますか？

子テーマに最低限必要なもの：「○○○-child」フォルダの中に「style.css」「functions.php」

続いて、子テーマをブログに反映させるための「インストールと有効化」を行います。

子テーマのインストールと有効化

子テーマのインストール方法は、以下の2つがあります。

FTPクライアントを使ってインストールする（おすすめ）
WordPress管理画面上でインストールする

FTPクライアントを使う方法がおすすめです。理由は2つあります。 FTPクライアントを使う方法をおすすめする理由

1つ目は、管理画面を使ったインストールだと、子テーマフォルダをzip圧縮する手間がかかるからです。

2つ目は、これから子テーマを使いこなすには、FTPクライアントのほうが使い勝手がいいからです。子テーマ内のファイルの編集は管理画面（テーマエディター）でもできますが、ファイルの新規追加や削除の操作はFTPクライアントでしかできません。

子テーマをインストールする前に、親テーマをインストールしておくとスムーズです。

1.FTPクライアントを使って子テーマをインストールする

WordPressのインストール先の/wp-content/themes/の中に子テーマフォルダをアップロードすると、インストールが完了します。

管理画面[外観]→[テーマ]をクリックしてインストール済みテーマ画面を開き、子テーマの[有効化]ボタンをクリックします。

2.WordPress管理画面上で子テーマをインストールする

FTPクライアントの使い方がよくわからない場合は、以下の手順で子テーマをインストールしてください。

まず、子テーマフォルダをZIP形式に圧縮します。圧縮方法がわからない場合は、下記ページを参考にしてください。

フォルダをzip圧縮する方法

次に、

管理画面[外観]→[テーマ]
[新規追加]ボタン
[テーマのアップロード]ボタン

の順にクリックし、先に圧縮したZIPファイルを選択・インストールします。

WordPress非公式テーマのインストール方法

インストール完了後、[有効化]をクリックします。

子テーマの仕組みと使い方

子テーマを使いこなすには、子テーマがブログ・サイトにどのように反映されるのかを知っておくといいです。

子テーマの役割について、子テーマの使い方の具体例をまじえながら説明します。

例：子テーマを使って、ブログのヘッダー部分をカスタマイズする

テーマには様々な役割を持つファイルが含まれています。「Twenty Twenty」をはじめとした一般的なWordPressテーマでは、ブログのヘッダー部分の出力に「header.php」というファイルを使います。

子テーマでブログのヘッダーをカスタマイズするには、親テーマの「header.php」を子テーマ内に複製して内容を書き換えます。

こうすることで、親テーマのアップデートで「header.php」の内容が変更されても、ブログには子テーマの「header.php」のほうが反映されるため、カスタマイズ内容を保持することができます。

子テーマは、親テーマに含まれるファイルを全て複製するのではなく、内容を変更したいファイルだけで構成するのが基本です。

読み込まれるファイルのルール

上の例のように、親テーマと子テーマの中に同じ名前のファイルが含まれている場合、子テーマ内のファイルが優先して読み込まれる仕組みになっています。

ただし、例外もあります。子テーマに最低限必要なもので作成した、

スタイルシート「style.css」
関数ファイル「functions.php」

については、親テーマ・子テーマ両方のファイルが読み込まれる仕組みになっています。 style.css 親テーマ→子テーマの順に読み込まれます。親子で同じセレクタを指定している場合は、子テーマが親テーマの内容を上書きします。 functions.php 子テーマ→親テーマの順に読み込まれます。親テーマと子テーマで関数の重複使用はできません。したがって、子テーマが親テーマの内容を上書きすることはありません。

子テーマの仕組みや、ファイルの読み込みに関するルールについて、以下の図と表にまとめました。

スタイルシート「style.css」	親テーマ→子テーマの順に読み込まれる
関数ファイル「functions.php」	子テーマ→親テーマの順に読み込まれる
その他、親子で同じ名前のファイル	子テーマ内のファイルが優先して読み込まれる
親テーマにしかないファイル	親テーマ内のファイルが読み込まれる

子テーマを使うメリット・デメリット

メリットテーマのアップデートの際に、カスタマイズ内容を失うおそれがないことです。もし子テーマがなければ、テーマがアップデートされるたびにカスタマイズが必要な箇所を修正しなければなりません。デメリット

親テーマのアップデートの際に、子テーマ内にある複製ファイルのメンテナンスが必要になることです。

先ほどの「子テーマを使って、ブログのヘッダー部分をカスタマイズする」例では、親テーマのアップデートによって「header.php」の内容に重要な変更があった場合、子テーマの「header.php」にもその変更内容を反映させないと、不具合が生じる可能性があります。

このような理由から、アップデートの際に変更されたファイル名を公開するテーマもあります。子テーマ内の複製ファイルの数が多いほど、アップデート時のメンテナンスは面倒になってしまいます。子テーマを使う場合は、ファイルの複製は必要最小限にすべきですね。

よくある質問

子テーマのサムネイル画像を表示させたい

インストール済みテーマの一覧画面で、子テーマのサムネイル画像を表示させたい場合は、自分で作成することができます。

どんな画像がいいの？
一般的には、その子テーマを使用したブログのスクリーンショットを用意します。

画像のサイズは？
WordPress公式ページによると、880×660ピクセルが推奨されています。画像ファイルの形式は？ PNG形式が推奨されています。どこに保存するの？「screenshot.png」という名前で、子テーマのフォルダ内にアップロードしてください。

子テーマのスタイルシート「style.css」が読み込まれない

まずは、ブラウザのキャッシュを削除してみてください。

キャッシュとは

アクセスしたWebサイトのデータ・履歴を一時的に保管し、再度同じページにアクセスしたときに速やかに表示させることができる機能です。

主なブラウザのキャッシュ削除方法については、下記の公式ヘルプを参照してください。

キャッシュを削除しても解決しない場合は、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');
}

functions.php編集時の注意点