この記事は約 3 分で読めます。
WordPressで公開されているテーマを自分なりにカスタマイズしたいとき、2通りの方法があると思います。
1つ目は直接テーマをいじる方法。
2つ目は、「子テーマ」を作って、「親テーマ」はそのままで、「子テーマ」をいじる方法。
頻繁にテーマのアップグレードがある場合は、直接「親テーマ」をいじっているとアップグレードした時に消えてしまうので、「子テーマ」を作る方が良いです。
WordPressの「子テーマ」に関することをメモしていなかったので、今回書くことにします。
この記事の目次
- 必要なファイル
- ファイルの記述方法
- ファイルをアップロード
必要なファイル
親テーマの一部をカスタマイズしたい時に、「子テーマ」を作ってカスタマイズ部分のみ親テーマを上書きします。
そのため、親テーマから以下のファイルをコピーしておきます。
最低①～②のファイルがあればOKです！
- style.css
- functions.php
- 場合によっては、上書きするphpファイルがあるかもしれません
ファイルの記述方法
ここでは、①と②のファイルの記述をメモしておきます。
「style.css」の記述
「style.css」は、子テーマと認識してもらうために、最初に以下のようなコメント記述をします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ |
必須は、2行目の「新しいテーマ名」と、7行目の「親のテンプレート名」です。他は省略しても構いません。(親テーマ名は、親テーマのフォルダー名を確認！)
親テーマをカスタマイズしたい新しいスタイルは、この後に続けて書きます。
「functions.php」の記述
「functions.php」には、親テーマのcssを読むために、以下のように記述します。
(これを記述することで、cssに@importを記述しなくて済みます)
|
1 2 3 4 5 |
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } |
「functions.php」は、親テーマに重複した内容があると画面が真っ白になるようです。
カスタマイズしたい内容だけ、記述します。
また空白もエラーの原因になりますので、ちょっと注意が必要です。
ファイルをアップロード
新規でフォルダを作り(名前は自由)、上記の「style.css」と「functions.php」を入れます。
その他のphpファイル(header.phpやindex.php等)は、カスタマイズしたファイルがあれば、これもフォルダの中に入れます。
ファイルが一通り揃ったら、WordPressの「themes」フォルダの中にアップします。
管理画面から、「外観」→「テーマ」で見ると、新しいテーマが加わっていればOKです！
これを有効化して、表示がきちんとされたら「子テーマ」完成です♪
テーマの画像を表示したい時は、子テーマのフォルダの中に「screenshot.png」を入れると表示できます。
サイズは、横300px、縦225pxです。
