WordPressでテーマをカスタマイズするときは、子テーマを使おう
子テーマとは？なぜ使うの？
子テーマとは、いつも使用しているテーマの機能を受け継ぎつつ、新しい機能を定義したり、処理を上書きできるWordPressのテーマ機能です。
何故、わざわざもう1つテーマを用意するかといいますと、いつも使っているテーマをカスタマイズしている場合、テーマのアップデートによって上書きされ消えてしまうことがあります。
そのため、直接カスタマイズするのではなく、別のファイルを編集することで、アップデートとカスタマイズを行う際の悩みごとを減らすことができます。
親にしかデータが無い場合は親を、子にデータがある場合は子を使うことになるので、変更したいものだけ書くと良いです。
子テーマの作り方
テーマディレクトリの作成
子テーマは「wp-content/themes」の下に作成したいので、FTPでアップロードしてください。
今回は、「twentysixteen」の子テーマを作るので、「twentysixteen-child」というディレクトリを作りました。
子テーマディレクトリの最後に「-child」を付けることが推奨されていますし、分かりやすいのでこのように名付けましょう。
このとき名前にスペースが含まれると、エラーが発生するのでご注意ください。
このディレクトリに「style.css」と「function.php」を作成します。
style.cssの作成
このテーマは子テーマだよ、という宣言をするための設定を入力します。
最低限下記の「Theme Name」「Template」の宣言があれば動作しますが、もっと細かく書く場合は、親テーマからコピーして編集する方が簡単です。
/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/
function.phpの作成
こちらは必須ではないのですが、親テーマのスタイルシートも使用したいので、下記コードを入力してファイルを作成します。
ちなみに、このファイルは親のfunction.phpに追加して読み込まれる仕様となっています。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
これで子テーマの用意ができました。
子テーマを使ってみよう
子テーマの有効化
[ 外観 ] -> [ テーマ ] から「Twenty Sixteen Child」を有効化しましょう。
カーソルを上に載せるとボタンが表示されます。
有効化すると、子テーマを使った表示に変更されます。
style.cssにスタイルを追加してみよう
このままだと特に何も変更していないので、見た目上は変化がありませんので、
子テーマが適用されたことを目で見たいので、h1タグが赤色になるスタイルを追加してみました。
[ 外観 ] -> [ テーマの編集 ] から編集することができます。
/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/
h1{
color: red;
}
投稿詳細ページのタイトルが赤くなりました！
このようにスタイルを追加、更新するだけで適用され、親テーマのアップデートでcssが更新されても消されてしまうことはありません。
これでテンプレートのアップデートにおびえずに、カスタマイズができますね。