WordPressで子テーマを作成する動機と必要性と方法と子テーマを使用してどのようにカスタマイズをしていくか紹介！

はじめに

今回はWordPressで子テーマを作成する動機と必要性と方法について記事を書きます。

WordPressで子テーマを作成する動機

主にTCDテーマを使用しているWordPressのカスタマイズ案件で子テーマを作成することが必要となります。

WordPressで子テーマを作成する必要性

親テーマ（テーマ開発者が提供するテーマ）がアップデートされた場合、親テーマを更新することで新しい機能や修正が適用されます。しかし、直接親テーマをカスタマイズしてしまうと、アップデートの際にカスタマイズ内容が上書きされてしまいます。子テーマを使用すると、親テーマの変更を上書きせず、独自の変更を保持できます。

WordPressで子テーマを作成する方法

今回は例としてTCDテーマの「Vogue」テーマの子テーマを作成します。「Vogue」テーマの子テーマのフォルダ名は「vogue_child」とします。

ワードプレステーマTCD

WordPressテーマ「VOGUE」(tcd051) – ワードプレステーマTCD

フルスクリーンで世界観を表現し期待感を持続させるスプラッシュページを搭載スプラッシュページとは、ページを開く前にブランド…

子テーマを作成するために最低限必要なファイル類

子テーマのファイル「vogue_child」の中に「functions.php」と「style.css」が最低限必要なファイルとなります。

上記のファイル類を用意してサーバーにアップしていくのですが、まず子テーマのファイル類を追加する前のWordPressのファイル類の確認をしましょう。

子テーマ追加前のWordPressのファイル類

関係ないファイルは省略しています。

PR

子テーマに追加する「functions.php」と「style.css」を編集する

functions.phpとstyle.cssは正しく記述しないと子テーマをWordPressが認識してくれません。

特に「style.cssに記述するTemplateの部分」はテーマによって内容が変わるので注意して下さい。

以下でfunctions.phpとstyle.cssの内容を示します。

子テーマのfunctions.phpの内容

<?php
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), NULL );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), NULL );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

functions.phpに関しては上記をコピペで基本的にOKです。上記でできない方は下記のハンドル名を正しく指定する方法も試してみて下さい。

ハンドル名を正しく指定する方法

<?php
function theme_enqueue_styles() {
    wp_enqueue_style( 'vogue-style', get_template_directory_uri() . '/style.css', array(), NULL );
    wp_enqueue_style( 'vogue-style-child', get_stylesheet_directory_uri() . '/style.css', array('vogue-style'), NULL );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

上側のwp_enqueue_styleで親テーマのstyle.cssを読み込んでいます。親テーマの第一引数のハンドル名を正しく指定する必要があります。

下側のwp_enqueue_styleで子テーマのstyle.cssを読み込みます。子テーマのstyle.cssを読み込む際のハンドル名は任意となります。わかりやすいように親テーマのstyle.cssのハンドル名に「-child」をつけたものにしています。

wp_enqueue_styleの第一引数のハンドル名が「vogue-style」となる理由

WordPress側でVogueのテーマが適用されている状態で実際のページを確認し、検証ツールを開いてhtmlのソースコードの部分で「style.css」を検索して、テーマのstyle.cssを探してください。

下記画像はテーマのstyle.cssです。赤丸で囲んだid名の「-css」を抜いた部分がハンドル名になります。なのでハンドル名が「vogue-style」となります。

子テーマのstyle.cssの内容

@charset "UTF-8";
/*
    Theme Name:Vogue child
    Template:vogue_tcd051
*/

Theme Nameに指定するのは任意のものになります。わかりやすいように「Vogue child」としています。

Templateには正しく指定する必要があります。親テーマのフォルダ名を指定します。今回親テーマのフォルダ名は「vogue_tcd051」です。

子テーマ追加後のWordPressのファイル類

追加したファイル類を赤色としています。

子テーマを使用してどのようにカスタマイズしていくか

子テーマを作成しました。しかし子テーマのファイル類はfunctions.phpとstyle.cssのみなので、編集できるファイルはこの2つのファイルしかありません。では他のファイルをカスタマイズしたいときはどのようにすれば良いかを紹介しますが、難しくはありません。

トップページをカスタマイズしたいとき

親テーマのフォルダの中の「front-page.php」をコピーして作成した子テーマに貼り付けます。これでカスタマイズをする準備はOKです。子テーマに貼り付けた、「front-page.php」を編集してカスタマイズをしてください。

まとめ