WordPressの子テーマとは?子テーマの作り方(初心者向け)

最終更新日:

WordPressでは既存のテーマをカスタマイズする際、子テーマを作成することが推奨されています。子テーマとは何か、どうやって子テーマを作ればいいのか初心者の方でも分かりやすいように作り方を解説しています。

子テーマとは?

子テーマとは、親テーマの機能とスタイルを継承したテーマです。既存のテーマを編集する場合、子テーマを作ることが推奨されています。

なぜ子テーマを作成するのか?

テーマを直接変更してしまうと、テーマが更新された際に編集した内容が失われてしまいます。

編集したテーマを更新しないという手段もありますが、セキュリティ面でおすすめしません。

子テーマに編集したい内容を記述することで親テーマを更新しても編集内容は失われることはありません。

親テーマと子テーマの違い

親テーマとは、カスタマイズしたい元になるテーマです。公式ディレクトリからインストールした無料テーマや購入した有料テーマのことです。

テーマについては次の記事で詳しくご紹介していますのでご参照ください。

親テーマがあってはじめて子テーマを作成できます。名前の通り親子関係を持っています。

子テーマは親テーマの機能とスタイルをそのまま継ぎ、編集したいところだけを自由にカスタマイズすることができます。

親テーマの機能がバージョンアップしたら子テーマでもその機能が使用できます。

子テーマの作り方

子テーマの作り方をステップごとに説明しています。

フォルダを作る

まずFTPソフトなどを使って、サーバー内の「~/wp-content/themes」ディレクトリ配下に「親テーマ名-child」というフォルダを作成します。

例えば、Twenty Twentyの子テーマを作る場合は、「twentytwenty-child」というフォルダ名になります。

子テーマのフォルダ

子テーマのフォルダ名には空白を含めてはいけません。エラーが発生してしまいます。

ファイルを用意する

以下の2つのファイルを用意し、必要なコードを記述して子テーマのフォルダ内に格納します。

style.css

style.cssには最低限以下を記述します。

/*
 Theme Name: 子テーマの名前
 Template: 親テーマのフォルダ名
*/

Templateには親テーマのフォルダ名を記載します。Twenty Twentyの場合、「twentytwenty」になります。

コメントの後に編集したいスタイルを追加します。

functions.php

functions.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' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
?>

親テーマと子テーマのstyle.cssの場所を指定しています。以上で子テーマを有効化する準備ができました。

子テーマを有効化する

WordPressの管理画面にログインします。ログインの仕方については次の記事をご参考ください。

テーマ

作成した子テーマの有効化ボタンを押します。

テーマの有効化

子テーマが有効化されました。

有効化の完了

子テーマを削除する

子テーマを有効化していると管理画面から削除できません。別のテーマを有効化します。

子テーマのテーマの詳細をクリックします。

テーマの詳細

削除をクリックすると子テーマが削除されます。

子テーマが反映されない場合

本記事の「子テーマの作り方」でご紹介したように子テーマのフォルダの中に以下の2つのファイルが必要です。

またテーマは有効化しないと子テーマの内容が反映されません。本記事の「子テーマを有効化する」をご確認ください。

よく見られている記事

  1. WordPress 5.5で何が新しくなったのか?新機能や変更点を紹介
  2. WordPressをローカル環境にインストールする方法
  3. WordPressのサーバー要件とは?各バージョンの推奨環境
  4. WordPress 5.4で何が新しくなったのか?新機能や変更点
  5. WordPressで画像にwidthとheightを追加する方法
  6. WordPressにログインできない?13の解決方法
  7. WordPress 5.4.2の更新内容は?6つのセキュリティ問題の修正
  8. WordPressのおすすめ無料テーマまとめ(用途別)

新しい記事

go to top