子テーマがないWordPressテーマに子テーマを適用する方法

※当サイトにはプロモーションが含まれています。

クライアント

インストールしたワードプレステーマに子テーマがないから作ってくれ！

にゃテック

おけまるだにゃ

SWELLやTHE THORなど、多くのワードプレステーマには、「親テーマ」とは別に「子テーマ」と呼ばれるものが用意されています。

ただし、子テーマは必ずしも必要なものではないため、テーマによっては最初から用意されていない場合もあります。

そこで今回は、子テーマが用意されていないワードプレステーマに、子テーマを適用した手順を備忘録としてまとめておきます。

この記事の目次

子テーマを導入することのメリットとデメリット
- 子テーマを導入する“メリット”
- 子テーマを導入する“デメリット”
子テーマの導入方法

子テーマを導入することのメリットとデメリット

「子テーマ」は必ずしも必要なわけではなく、導入しないほうが適しているケースもあるので、子テーマを導入することの主なメリットとデメリットをまとめました。

子テーマを導入する“メリット”

子テーマを導入する最大のメリットは、親テーマをアップデートしてもカスタマイズ内容が失われないことです。

ワードプレスのテーマは、機能追加やセキュリティ対策のために定期的に更新されますが、親テーマのファイルを直接編集していると、アップデート時に変更が上書きされてしまいます。

そのため、子テーマを使うことで、親テーマを保ったままCSSやfunctions.phpの変更を安全に管理でき、デザインや機能を安心して追加できます。

子テーマを導入する“デメリット”

親テーマに大きな仕様変更が加えられた場合、子テーマで上書きしたテンプレートが対応していないと、デザインの崩れや動作不具合が発生するおそれがあります。

また、カスタマイズ箇所が増えるほど管理が複雑になり、どの部分を修正したのか把握しづらくなる点にも注意が必要です。

にゃテック

このサイトは「賢威」を使用していますが、カスタマイズを重ねすぎたため、新テーマ「SYN」への移行は諦めています。

子テーマの導入方法

子テーマの導入方法についてです。

今回は、TCDの無料で使用できるWordPressテーマ「GLUE」を使って、手順を説明します。

①子テーマ用フォルダを作成

WinSCPやFileZillaなどのFTPソフトを使い、次の場所に新しいフォルダを作成します。

/wp-content/themes/

フォルダ名は、何でも大丈夫ですが、通常は「テーマ名-child」と記載します。

今回は親テーマが「glue_free002」という名称なので、子テーマは「glue_free002-child」という名称にしました。

WinSCP｜子テーマ用フォルダを作成

WinSCPのダウンロード方法・使い方について

②style.cssを作成

子テーマ用のstyle.cssを作成します。

親テーマのCSSと正しく紐付けるために、以下のように記述しました。

@charset "UTF-8";
/*
Theme Name: GLUE Child
Template: glue_free002
Description: GLUE の子テーマ
Author: TCD
Version: 1.0
*/

Theme Nameは、WordPress管理画面で表示される名前なので、任意の名称で問題ありません。

Templateには、親テーマのフォルダ名を正確に記入する必要があります。

③functions.phpを作成

子テーマ用のfunctions.phpを作成します。

なお、自分の力では上手くいかなかったこともあり、functions.phpの内容はTCDの公式サイトの内容を参考にしました。

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

なお、TCDの公式サイトには以下の様に記述があります。

4行目のwp_enqueue_style：親テーマの「style.css」を読み込みます。
5行目のwp_enqueue_style：子テーマの「style.css」を読み込みます。
ここでは、4行目のstyle.cssの後に子テーマが読み込むよう設定するのがポイントです。こうすることで、親テーマのスタイルの後から、追加した子テーマのスタイルを読み込みます。

引用元: WordPressの子テーマを作る理由と子テーマを自作する方法

にゃテック

自作したコードでは、この親テーマのスタイルの後から、追加した子テーマを読み込ませることができませんでした。