配布されているWordPressテーマのカスタマイズは自由ですが、配布されているWordPressテーマをカスタマイズするときは「子テーマ」を作りましょう。
なぜ子テーマを作るのか？
WordPressテーマは作者によるアップデートが行われますが、子テーマを作成せずにカスタマイズしていると、アップデート時に作者による新しいデータが上書きされ、せっかくカスタマイズしたデータが消えてしまいます。カスタマイズしたデータを出来る限り保存するために、WordPressテーマ（親テーマ）とは別に「子テーマ」を作成します。
子テーマ作成方法
最新の子テーマ作成方法をご紹介します。
１．子テーマ用ディレクトリを作成
親テーマと同じ階層（つまりwp-content/theme下）に、子テーマ用のディレクトリ（フォルダ）を作成し、任意のディレクトリ名（フォルダ名）を付けます。
themes
|-親テーマ
|-子テーマ
ディレクトリ名は任意ですが、WordPress Codexによると、
「子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます(ただし必須ではありません。特に一般に公開する予定のテーマを作成する場合はこの限りではありません)」
とありますので、特別な理由がなければ「●●●-child」と付けるのがよいでしょう。
２．作成した子テーマ用ディレクトリの中に、style.cssとfunctions.phpを新規追加します。
子テーマを作るのにfunctions.phpは必須ではありませんが、親テーマのスタイルシートを読み込むためにfunctions.phpを使いますので作っておきましょう。
３．新規作成したstyle.cssを開き、冒頭に下記スタイルシートヘッダを追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* 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 */ |
style.cssの冒頭に記述する上記スタイルシートヘッダはCodexに記載されている見本そのままですので、適宜ご自分用に修正します。
Template:には引き継ぐ親テーマの「ディレクトリ名」を正確に入力します。ここが間違っていると親テーマを正しく認識できませんので注意が必要です。
４．functions.phpに親テーマを引き継ぐためのコードを記述
|
1 2 3 4 5 |
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } |
以前は子テーマのスタイルシートに@importで親テーマのスタイルシートをインポートしていましたが、今は theme_enqueue_styles を使うことが推奨されています。
以上で子テーマの作成は終わりです。次に、子テーマの使い方をみていきましょう。
子テーマの使い方
子テーマを有効化する
管理メニュー＞外観＞テーマを見ると、子テーマが追加されているはずですので、子テーマを有効化します。これを忘れているといくら子テーマをカスタマイズしても何も反映されませんのでご注意を。
テーマ用の画像は、子テーマディレクトリ直下に「screenshot.png」という画像を置くと表示されます。サイズは880px × 660pxです。
テンプレートファイルやスタイルシートは上書きされる
親テーマをカスタマイズしていくときは、子テーマのスタイルシートに変更点を加えていきます。また、変更したいテンプレートファイルを子テーマディレクトリに追加してカスタマイズします。親テーマにはない新しいテンプレートファイルを追加しても大丈夫です。
子テーマにあるテンプレートファイルやスタイルシートは親テーマの後に読み込まれます。つまり、子テーマで追記した内容は親テーマにすべて上書きされていきます。親テーマにはないテンプレートファイルはそのまま読み込まれます。
functions.phpは子テーマのものが先に読み込まれる
functions.phpは例外で、子テーマのものが先に読み込まれ、上書きという概念はありません。親テーマのfunctions.phpに機能を追加していくイメージです。
親テーマに書かれていない関数を追加したい場合は、子テーマのfuncitons.phpに追記していきます。また、親テーマに既に記述されている内容を違う内容にしたい場合は、条件式を使い、親テーマの関数と子テーマの関数を置換するということを覚えておきましょう。functions.phpには開始タグ <?php を忘れずに。
WordPress Codexにも詳細な記載がありますので参考にしましょう。
追加したいJavaScriptも子テーマのfunctions.phpで読み込みます。
参考書籍
おすすめらしいですな、この教本。
プロフェッショナルに捧ぐ的な？
36歳のときにそれまで勤めていた金融業界を卒業、地に足の着いた生活がしたいと東京・渋谷から房総へ移住。Webデザイナー養成校に通い、40歳のときにWebデザイナーとして独立。地方在住・40歳・コネなしからスタートして、現在は仲間と会社を作るまでに成長。今の興味は資産形成とブロックチェーン。ビットコインのマイニングもやってます。
