web技術メモ

【WordPress】 子テーマの作り方

WordPressで公開されているテーマを自分なりにカスタマイズしたいとき、2通りの方法があると思います。

1つ目は直接テーマをいじる方法。
2つ目は、「子テーマ」を作って、「親テーマ」はそのままで、「子テーマ」をいじる方法。

頻繁にテーマのアップグレードがある場合は、直接「親テーマ」をいじっているとアップグレードした時に消えてしまうので、「子テーマ」を作る方が良いです。

WordPressの「子テーマ」に関することをメモしていなかったので、今回書くことにします。

この記事の目次

  • 必要なファイル
  • ファイルの記述方法
  • ファイルをアップロード

必要なファイル

親テーマの一部をカスタマイズしたい時に、「子テーマ」を作ってカスタマイズ部分のみ親テーマを上書きします。
そのため、親テーマから以下のファイルをコピーしておきます。
最低①~②のファイルがあればOKです!

  1. style.css
  2. functions.php
  3. 場合によっては、上書きするphpファイルがあるかもしれません

ファイルの記述方法

ここでは、①と②のファイルの記述をメモしておきます。

「style.css」の記述

「style.css」は、子テーマと認識してもらうために、最初に以下のようなコメント記述をします。

WordPress Codex「子テーマ」より抜粋

必須は、1行目の「新しいテーマ名」と、7行目の「親のテンプレート名」です。他は省略しても構いません。(親テーマ名は、親テーマのフォルダー名を確認!)

親テーマをカスタマイズしたい新しいスタイルは、この後に続けて書きます。

「functions.php」の記述

「functions.php」には、親テーマのcssを読むために、以下のように記述します。
(これを記述することで、cssに@importを記述しなくて済みます)

「functions.php」は、親テーマに重複した内容があると画面が真っ白になるようです。
カスタマイズしたい内容だけ、記述します。
また空白もエラーの原因になりますので、ちょっと注意が必要です。

ファイルをアップロード

新規でフォルダを作り(名前は自由)、上記の「style.css」と「functions.php」を入れます。
その他のphpファイル(header.phpやindex.php等)は、カスタマイズしたファイルがあれば、これもフォルダの中に入れます。

ファイルが一通り揃ったら、WordPressの「themes」フォルダの中にアップします。
管理画面から、「外観」→「テーマ」で見ると、新しいテーマが加わっていればOKです!
これを有効化して、表示がきちんとされたら「子テーマ」完成です♪

子テーマのアイキャッチ画像を設定するなら

テーマの画像を表示したい時は、子テーマのフォルダの中に「screenshot.png」を入れると表示できます。
サイズは、横300px、縦225pxです。

【参考】WordPress Codex「子テーマ」

ABOUT ME
Resound Web Lab
Resound Web Lab 代表。 福岡県北九州市で、Web制作サポート・運営指導、女性の起業支援、カウンセリングをしています。 お客さま「らしさ」を引き出し、人とひと・人とモノを繋げていきます。 このサイトでは、Webの技術的な情報や、ご自身で情報発信をされる方に向けて、記事を更新しています。