WordPressのテーマをカスタマイズする際には欠かせないのが子テーマです。
私もWordPressのサイトを制作するにあたって、まずは子テーマを作り、カスタマイズしまくっています。
そんな子テーマの作成方法を、改めてまとめてみることにしました。
子テーマとは何か？
子テーマとは、通常のテーマ（親テーマ）と組み合わせて使う、カスタマイズ用のテーマのことです。
管理画面の外観→テーマより、子テーマを有効化することで反映されます。
もし、テーマに直接カスタマイズのコードを書き加えますと、テーマがアップデートされた時に変更が水の泡になってしまいます。
アップロードの度に毎回カスタマイズしていては非常に面倒です。
しかし、子テーマを作り、子テーマでカスタマイズしておけば、親テーマをアップデートしても影響を受けずに済みます。
子テーマは、親テーマの内容を継承出来ますので、親テーマの内容を丸ごとコピーする必要はありません。
子テーマに変更点だけ記述すれば、親テーマ＋子テーマの内容が反映されます。
子テーマの作成方法
それでは、デフォルトのテーマ「Twenty Seventeen」の子テーマを作成していきます。
子テーマに最低限必要なもの
子テーマに最低限必要なファイル、ディレクトリは以下の3つのみです。
- 子テーマディレクトリ
- style.css
- functions.php
子テーマディレクトリの作成
FTPソフトでサーバーに接続します。
/wp-content/themes 配下にテーマディレクトリが複数存在しています。
これらが、管理画面の外観→テーマで表示されているテーマです。
今回は「twentyseventeen」を親テーマとしますので、まずは「twentyseventeen」の子テーマディレクトリを作成します。
FTPソフト上で、「twentyseventeen-child」というディレクトリを新規作成します。
style.cssの作成
子テーマ「twentyseventeen-child」ディレクトリ内に、「style.css」ファイルを新規作成します。
作成したら、ファイルをテキストエディタで開き、以下の内容を記述して保存します。
そのままコピペすればOKです。
|
1 2 3 4 |
/* Theme Name: Twenty Seventeen 子テーマ Template: twentyseventeen */ |
「Theme Name」には、子テーマの名前を記載します。外観→テーマに表示されるテーマ名になります。
「Template」には、親テーマのディレクトリ名を記載します。
functions.phpの作成
子テーマ「twentyseventeen-child」ディレクトリ内に、「functions.php」ファイルを新規作成します。
作成したら、ファイルをテキストエディタで開き、以下の内容を記述して保存します。
そのままコピペすればOKです。
|
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' ); } |
これを記述することにより、親テーマのstyle.cssを呼び出せるようになりました。
親テーマのstyle.cssが反映されますので、子テーマのstyle.cssには変更点だけ記述すれば良いということです。
子テーマの有効化
子テーマそのものの作成が完了しましたので、有効化させてみます。
管理画面の外観→テーマをクリックすると、子テーマが追加されていますので、通常のテーマと同様に「有効化」ボタンをクリックすれば、子テーマが有効化されます。
もし、子テーマの画像も設定したいという場合は、子テーマ「twentyseventeen-child」ディレクトリ内に、「screenshot.png」という名前にした画像ファイルをアップロードすれば、反映されます。
子テーマが反映されているかの確認
現時点では何も変更を加えておらず、親テーマと全く同じ状態ですので、子テーマのstyle.cssにカスタマイズを加えてみます。
|
1 2 3 4 5 6 7 |
/* Theme Name: Twenty Seventeen 子テーマ Template: twentyseventeen */ body.has-header-image .site-title a { color: green; } |
5〜7行目で、タイトルの文字色を緑にする記述を追加しました。
変更前
タイトル文字色は白です。
変更後
タイトル文字色が緑に変更されましたので、子テーマが反映されていることが確認出来ました。
まとめ
テーマをカスタマイズしたい場合、直接カスタマイズするのではなく、子テーマを作成してからカスタマイズしましょう。
意外と簡単に作成出来ますので、ぜひお試しください。
