WordPressでテーマをカスタマイズするときは、子テーマを使おう

child_themes0

子テーマとは?なぜ使うの?

子テーマとは、いつも使用しているテーマの機能を受け継ぎつつ、新しい機能を定義したり、処理を上書きできる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' );

}

これで子テーマの用意ができました。

子テーマを使ってみよう

子テーマの有効化

child_themes1
[ 外観 ] -> [ テーマ ] から「Twenty Sixteen Child」を有効化しましょう。
カーソルを上に載せるとボタンが表示されます。

有効化すると、子テーマを使った表示に変更されます。

style.cssにスタイルを追加してみよう

このままだと特に何も変更していないので、見た目上は変化がありませんので、
子テーマが適用されたことを目で見たいので、h1タグが赤色になるスタイルを追加してみました。
[ 外観 ] -> [ テーマの編集 ] から編集することができます。

/*
Theme Name: Twenty Sixteen Child
Template:     twentysixteen
*/
h1{
 color: red;
}

child_themes3
投稿詳細ページのタイトルが赤くなりました!
このようにスタイルを追加、更新するだけで適用され、親テーマのアップデートでcssが更新されても消されてしまうことはありません。

これでテンプレートのアップデートにおびえずに、カスタマイズができますね。

child_themes0

ABOUTこの記事をかいた人

GeoDesign

ホームページは、情報収集が得意なメディアです。 集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。
  • 成果の見えるホームページを運用したい。
  • デジタルマーケッターになれる広報担当者を育成したい。
  • 自社メディアでブランド力の強化と、顧客創造を図りたい。
こんな欲求をかかえるあなた。
  • どうしたらウェブサイトから成果が上がるのかわからない
  • 簡単に運用できるシステム、時間ロス・コストロスを減らしたい
こんな悩みをかかえるあなた。 私達にその欲求や悩みを改善するお手伝いを任せてみませんか?