WordPressのテーマカスタマイズは、子テーマを使うのが一般的です。
親テーマを直接カスタマイズすると、テーマをアップデートした際にカスタマイズした箇所が初期化されますが、子テーマを使えば、カスタマイズした箇所を引き継ぐことができるからです。
もちろん、簡単な「style.css」の編集だけなら、ワードプレスの標準のカスタマイズ機能「追加CSS」を使えば問題ありません。ただ、「functions.php」を編集したい場合や、テーマファイルに大きな変更を加えたい場合は、子テーマを作ることをおすすめします。
Contents
子テーマの作り方
難しいことは一切ありません（初めての方でも10分あれば作れます）。流れは以下の通りです。
- 子テーマフォルダの作成
- style.cssの作成
- functions.phpの作成
- 親テーマを継承するためのコードを記述
- 子テーマの有効化
実際にエックスサーバーで公式テーマtwentyseventeenの子テーマを作ってみます。
ファイル管理画面を開く
エックスサーバーにログインして、操作メニュー「ファイル管理」をクリックします。
ファイルマネージャにログイン
テーマフォルダに子テーマのフォルダを作る
テーマフォルダを開きます。
パス：/該当ドメイン/public_html/wp-content/themes/
- 「該当ドメイン」をクリック
- 「public_html」をクリック
- 「wp-content」をクリック
- 「themes」をクリック
- 子テーマのフォルダを作成
例えば、twentyseventeenの子テーマを作りたい時は、「twentyseventeen-child」等の名前をつけて子テーマのフォルダを作成します（フォルダ名は半角英数字ならなんでも構いません）。
子テーマフォルダの作成
子テーマフォルダに「style.css」と「functions.php」を作成する
先程作成した子テーマのフォルダを開き、2つのファイルを作成します。
- style.css
- functions.php
子テーマフォルダに2つのファイルを作成
子テーマのstyle.cssにスタイルシートヘッダを入力する（必須項目のみ）
style.cssにチェックを入れて、「編集」をクリックします。
style.cssの編集
下記コードを記述して、「保存する」をクリックします（下記はtwentyseventeenの場合）。
|
1 2 3 4 |
/* Theme Name: Twenty Seventeen Child Template: twentyseventeen */ |
この際、「Template:○○」の部分には、必ず「親テーマのフォルダ名」をそのまま入力して下さい（先ほどのテーマフォルダに子テーマのフォルダを作るの画面で確認できます）。
| Theme Name | テーマ一覧で表示される名前（自由につけてOK） |
|---|---|
| Template | 親テーマのフォルダ名 |
style.css編集内容
スタイルシートヘッダに詳細な情報を入力したい方は、WordPress Codexを参考に入力して下さい（後から管理画面のテーマ編集から入力することもできます）。
ちなみに、「@import:」を使用して親テーマのスタイルシートをインポートすることもできますが、WordPress Codexでは「functions.php」で呼び出す方法を推奨しています。
以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。
子テーマのfunctions.phpに親テーマを継承するためのコードを記述する
functions.phpにチェックを入れて、「編集」をクリックします。
functions.phpの編集
下記コード（全てのテーマ共通）を記述して、「保存する」をクリックします。
|
1 2 3 4 5 6 |
<?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）」を自由にカスタマイズして下さい。
style.css以外のファイルを子テーマでカスタマイズする方法
親テーマのフォルダを開き、カスタマイズしたいファイルをダウンロードします。
ファイルのダウンロード
子テーマのフォルダを開き、ダウンロードしたファイルをアップロードします。
ファイルのアップロード
子テーマの編集画面にアップロードしたファイルが追加されます。
子テーマにfooter.phpが追加される
後は自由にカスタマイズして下さい。
但し、「style.css」と「functions.php」以外のファイルは、子テーマにあるファイルが優先して読み込まれます（親テーマのファイルが呼び出されない）。テーマがアップデートされた際に恩恵を受けられなくなる可能性があるので注意して下さい。
最後に
今回紹介した方法以外にも、ローカル環境で「子テーマフォルダ」を作成、その中に「style.css」と「functions.php」を作成、子テーマフォルダをzip形式で圧縮して管理画面からアップロードするといった方法もあります。結果は同じですから、やりやすい方法で子テーマを作成して下さい。
ちなみに、僕はWordPressを使い始めた頃、テーマをアップデートするとファイルが初期化されるなんて知らず、バックアップも取らずアップデートしてしまったことがあります。
当時は子テーマのことすら知りませんでした・・・。
最近のコメント