【重要】WordPress子テーマとは!?作成方法から徹底解説!

【重要】WordPress子テーマとは!?作成方法から徹底解説!

この記事を書いた人

まりこ

専業主婦から在宅ワーママに転身した一児の母。 制作会社でコーダーとして勤務しながらフリーランスとしても活動中!

「カスタマイズするなら子テーマを作った方がいい」、と聞いたことがあるかもしれませんが、初めてだとなんだか難しそうだし、不安ですよね?

実はやり方さえ知ってしまえばそこまで難しくないんですが、しっかり理解せずに進めると、失敗してサイトが崩れたりと大変なことになります。

そこでこの記事では、わたしがこれまでWeb制作でWordPressテーマを自作してきた経験から、子テーマとは何なのか、必要な人・必要でない人、使うメリット・デメリットや作成方法に至るまで解説します!

記事を読み終えると、失敗しないサイトカスタマイズ方法を知ることができますよ!

WordPressの子テーマとは?

WordPressの子テーマとは、テーマ(親テーマ)をカスタマイズするためのテーマファイルのことです。

たとえばWordPressのテーマをカスタマイズするすると、アップデートの際に上書きされ、せっかくカスタマイズしたものが消えてしまう、といったことがあります。

そんな場合に、親テーマから子テーマを作ることで、親テーマのデザインや機能を引継ぎつつ、自分が手を加えたい部分だけカスタマイズをすることができます。

追加CSS機能を使ったカスマイズとの違い

追加CSS機能とはWordPress4.7のからはじまった標準機能で、WordPress>外観>カスタマイズ>追加CSSから利用できます。

追加CSS

追加CSSでの変更はリアルタイムプレビューで変更内容が確認できる点が便利です。

また、追加CSSはテーマのアップロードの影響を受けませんので、「見出し」 「ボタン」 「枠線」 など、軽微なデザインを変える程度であれば子テーマを作らずこちらで対応します。

子テーマを作るメリット・デメリット

次に子テーマのメリットとデメリットを整理しておきます。

メリット

  • 親テーマのアップデート時に内容が消えてしまうのを避ける
  • 誤って重要なコードを消してしまう心配がない

デメリット

  • 子テーマを作るという作業がある
  • 子テーマを使っている場合少しだけ表示速度が遅くなることがある

子テーマの作成が必要な人

サイトの機能に関わる内容や、全体的な改修をする必要がある方は子テーマの作成が必要です。

なぜなら大幅なレイアウト変更や、高度な機能面の追加や修正には、WordPressを構成しているプログラミング言語の”PHP”を触る必要があります。

その場合、テーマエディタを触って、テンプレートをカスタマイズする必要があるので、子テーマの作成が必要となります。

子テーマの作成が必要ではない人

軽微なデザイン修正しかしない方です。

ポイントでのデザイン修正であれば、PHPを触る必要がないため、子テーマを作成するまでもありません。(上で紹介した追加CSS機能で十分です)

子テーマの作成方法

ここからは子テーマの作成方法を紹介していきます。

初学者の方は難しそうに感じるかと思いますが大丈夫です。4ステップで簡単に作成する方法を丁寧に解説していきます!

必要なフォルダやファイルは以下の3つだけ

  • 子テーマに必要なファイルを格納するフォルダ
  • style.css
  • functions.php

では順番に解説します。

手順1 子テーマ用のフォルダを作成

子テーマフォルダを作成

子テーマ用のフォルダを作成します。

作成場所は任意の場所でOKです。デスクトップでも構いません。

フォルダ名は何でもいいですが、親テーマのテーマ名+childとつけることを推奨しています。

例)親テーマ名がpenginだったら「pengin-child」といった風です。

手順2 style.cssファイルを作成

フォルダ内にstyle.cssファイルを作成し、以下の記述を記入します。

/*
 Theme Name:   pengin child
 Template:     pengin
*/

最低限必要なのは、Theme NameとTemplateこの2つになります。

その他の記述はWordPressの公式オンラインマニュアルWordPress Codexを参考にしてください。

Theme Name

子テーマの名前を入れます。こちらは自由に付けて構いませんが、何の子テーマか分かりやすい名前にしましょう。

Template

親テーマのフォルダ名になります。

フォルダ名がわからない場合は、WordPressをアップロードしているレンタルサーバーから確認できます。

基本的には同じような手順で確認ができますので、今回はエックスサーバーを例にあげて紹介します。

xserverログイン画面

ログインしたらトップページのサーバーから該当するサーバーIDのファイル管理を選択します

ファイル管理

子テーマを追加したいサイトを選択します

サイトを選択

この中から”public_html” → “wp-content” → “themes” と選択したら該当のテーマが入っているので、ここでフォルダ名がわかります。

※このフォルダが入っているディレクトリに直接子テーマのフォルダを作成することもできます。その場合は手順2から手順3をすることで子テーマが認識されます。

手順3 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.cssのあとに子テーマのstyle.cssを読み込んでね、という指示です。

手順4 管理画面から子テーマを有効化

作成した子テーマをWordPressに反映させるにはいくつか方法があります。

  • FTPソフトを使う
  • プラグインを使う(たくさんのサイトの子テーマを作るときに便利)
  • zip化して直接管理画面からアップロード

この中でも今回は一番簡単な、zipファイルを作成し読み込む方法を説明します。

1:zipファイルを作成

zip化

作成した子テーマフォルダ(style.cssとfunctions.phpが入っている)のzipファイルを作成します(zipファイルは右クリック→圧縮で作成できます)

2:管理画面からアップロード

外観→テーマ

WordPressの管理画面から「外観→テーマ」を選択します。

「新規追加→テーマのアップロード」を選択し、フォルダから作成したzipファイルを選択するか直接ドラッグしてアップロードします。

zipを管理画面へドラッグ

すると子テーマが認識され表示されるので、有効化を選択します。

3:子テーマ反映を確認

子テーマが有効になっているかを確認し、問題なければ子テーマの作成は完了です。

「外観→テーマエディター」で進んで、エディタ右側に”この子テーマは親テーマの〇〇のテンプレートを引き継ぎます”と表示されていればOK。(画像はSWELLのテーマを使用しています)

子テーマ反映

サイトの見た目は変わっていませんが、無事に子テーマが作成されました。

子テーマ作成時の注意点

親テーマの主要なテンプレートファイル(header.phpやfooter.php、single.phpやpage.phpなど)を子テーマにコピーしてカスタマイズしすぎるとメンテナンス性が悪くなります。

親テーマのバージョンはアップデートしているのに、子テーマにあるファイルだけアップデートされないという不具合が起きる場合があります。

子テーマでカスタマイズしてみる

実際に子テーマをカスタマイズしてみましょう。

今回はstyle.cssに以下のコードを記入し、サイトの見た目が変わるかを確認してみてください。

背景をピンク色にしてみましょう。追加コードから下の箇所を追記してみてください。

/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
*/

/* 追加コード */
body {
 background-color: pink;
}

▼Before

スタイル反映前

▼after

スタイル反映後

変更を保存すると、body部分がピンク色の背景に変わりました!

これで子テーマからのカスタマイズが可能になったことが確認できました。

うまく反映しない場合

もしもうまく反映しない場合は以下の項目をチェックしてみてください。

子テーマを有効化していない

外観→テーマから有効化をクリックしているか確認しましょう

有効化

style.css内の記述に不備がある

style.cssに内の記述に不備がないかを確認しましょう。特に間違いやすいのはTemplate名です。

親テーマの名前ではなく、親テーマが格納されているフォルダ名であることに注意してください。

funcitons.phpに不備がある

よくfunction.phpと間違える場合があります。“s”が抜けています。

正しくはfunctions.phpですのでファイル名に間違いがないか確認しましょう。

記入する記述はすべて選択しコピー&ペーストしてください。一文字でも違うと作動しません。

キャッシュが残っている

キャッシュが残っていて変更が反映されていない場合があります。

Chromeを例にあげると、右クリックもしくは(command + option + i)で検証ツールを開きます。

検証ツールを開いている状態で左上のリロードマークを長押しすると、3つのコマンドが出てきますので、一番下のキャッシュの消去とハードの再読み込みを選択してください。

キャッシュの削除

これでキャッシュの削除(スーパーリロード)が出来ます。

また、ブラウザ毎のキャッシュ削除方法についてはこちらの記事内でも詳しく触れています!

プラグイン「WPS Child Theme Generatorr」で簡単に子テーマを作成

サイトの重さ(=速度)への影響も考慮すると、出来る限り余計なプラグインは入れないほうがよいです。

また、一つのテーマに対して子テーマを作成する機会はそう多くないので、できるだけ自作をオススメしますが、上記説明を見たうえで「やっぱり自作で子テーマ作るのは難しそう…」と感じてしまった方もいるかもしれません。

そんな方向けに、実は子テーマを簡単に作成できるプラグインが WordPressには用意されています。

それが「WPS Child Theme Generator」です。

※同様のプラグインで「Child Theme Configurator」というものがあり、こちらのほうがダウンロード実績や情報も多いですが、2021年6月時点で最新WordPressバージョンが未検証となっています。

設定項目

プラグイン名を検索しインストール後、設定の画面で以下項目を入力してください。

WPS Child Theme Generator
  • Parent Theme → プルダウンで親テーマを選択(必須)
  • Title → 子テーマ名(必須)
  • Theme URL → 子テーマURL (未記入でもいい)
  • Author → 子テーマ著者名(未記入でもいい)
  • Author URL → 子テーマ著者URL(未記入でもいい)
  • Screenshot → 子テーマのスクリーンショット(なくてもいい)

必須項目を入力したら「Create child theme」をクリックすることで子テーマが作成されます。

外観→テーマから確認できたら有効化するだけです!

まとめ

今回は子テーマは何なのか?といったところから、子テーマの作成方法まで説明しました。

子テーマの作成、意外と簡単ではなかったでしょうか?

子テーマを作るメリット・デメリットまでしっかり理解したうえで、必要に応じて正しく使いこなせるようにしていきましょう!