記事の詳細

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

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

こちらは必須ではないのですが、親テーマのスタイルシートも使用したいので、下記コードを入力してファイルを作成します。

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

ファイルを設置作ってみよう

親テーマで使用しているファイルを修正したい時は、コピーしてきたものを修正します。
今回は、single.phpをコピー、コメントを表示させている下記のコードを削除して、子テーマに設置してみました。


if ( comments_open() || get_comments_number() ) {
    comments_template();
}

child_themes4

child_themes5
アップすると、コメントエリアが消えました。

子テーマにファイルがある場合は、子テーマのファイルを優先されるので、ファイルを削除するだけで初期状態に戻ります。

function.phpに追加してみよう

ファビコン(ブラウザのタブなどに表示されるアイコン)を表示させるコードが無いので、それを追加してみます。
favicon.icoは別途アップロードしてください。


// 挿入するカスタム関数
function favicon_link() {
    echo '' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

child_themes6
このようにアイコンを変更できるので、ファイルのアップだけではうまくいかなかったり、アップ場所に制限がある場合に活用できます。

子テーマのfunction.phpですが、親のfunction.phpを上書きするのではなく、追加して読み込まれる仕様となっているので、ご注意ください。
(実際には、親の前に読み込まれるようです)
そのため、親テーマに同じ名前の関数があると、エラーになってしまうのでご注意。

気を付けた方が良いことも

これでテンプレートのアップデートにおびえずにすみます。

親テーマのコードを元にして、子テーマで流用している場合は、
アップデートでそのコードが更新されていたら、子テーマの処理が問題になる可能性があるので、更新の適用を検討したほうが良いです。

使用しているテーマによっては、エラーになってしまったり、動作しない場合もあります。

こういったことにお困りの方など、お気軽にご相談ください。

ホームページ制作・改善・販促のお問い合わせは、浜松市中区のGeoDesignへ

お問い合わせはこちら

お問合せフォーム

GeoDesignのできること

GeoDesignサービス

ウェブマーケティング成功事例

 
お名前(姓)
e-mail(必須)

マーケティングのヒントや、ウェブサイトを運営するために必要な情報を不定期でお届けしています。
あなたのウェブサイトを一歩進めるためにご活用ください。

株式会社GeoDesign(ジオデザイン)エントランス

〒430-0929
静岡県浜松市中区中央2ー4ー22
サザンビル(駐車場あり)

サービス対象地域

東京都23区
名古屋市,豊橋市
静岡県西部
浜松市中区,浜松市南区,浜松市東区,浜松市西区,浜松市北区,浜松市浜北区,浜松市天竜区,磐田市,袋井市,掛川市,菊川市,島田市,藤枝市,湖西市
ホームページ制作に関するお問い合わせ

ホームページの活用、集客に関するお問合せ

お問合せ Geoレターを受け取る Twitter Facebook