WordPressの子テーマを作る方法

WordPressでサイトを運営している方は子テーマを作成する事をおすすめします。

既存テーマ（親テーマ）を直接カスタマイズしていると、バージョンアップをした時に内容が上書きされてしまいます。

上書きされると、 今までのカスタマイズ が全て消えてしまいます！

そんな事にならない為に、ぜひ子テーマを作成してください。

では、子テーマの作成方法です。

１：子テーマの作成

親テーマのフォルダを同階層にそのままコピーしてフォルダ名を変更します。
フォルダ名は「親テーマ名-child」など、分かりやすい名前にしておいた方がいいです。

「 twentytwenty 」を使っている場合は「 twentytwenty-child」です。

２：style.cssの作成

次に作成した子テーマフォルダー内にstyle.cssを作成して下記コードを記述します。
スペルミスなどがあると認識してくれないので、コピー＆ペーストしてから編集しましょう。

/*
Theme Name:   twentytwenty child
Theme URI:    https://example.com/twentytwenty-child/
Description: 「twentytwenty」の子テーマです。
Template:     twentytwenty
Author:       name
Author URI:   https://example.com/
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         ブログ, 1列, カスタム背景, カスタムカラー, カスタムロゴ, custom-menu, エディタースタイル, アイキャッチ画像, フッターウィジェット, 全幅テンプレート, rtl-language-support, 固定投稿, テーマオプション, threaded-comments, translation-ready, block-styles, wide-blocks, アクセシビリティ対応
Text Domain:  twentytwenty-child
*/

各項目を簡単に説明しておきます。

• Theme Name：　子テーマの名前
• Theme URI：　子テーマのURL
• Description：　子テーマの役割や説明
• Template：　親テーマのフォルダ名
• Author：　テーマの作成者名
• Author URI：　テーマ作成者のURL
• Version：　テーマのバージョン
• License：　ライセンス
• License URI：　ライセンスのURL
• Tags：　テーマの特徴を表すタグ

Theme Name と Template は必須なので、必ず記述してください。

３：functions.phpの作成

子テーマフォルダー内にfunctions.phpを作成して下記コードを記述します。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  // 親テーマのstyle.css読込み
  wp_enqueue_style( 'parent-style', get_parent_theme_file_uri('/style.css'));
  // 子テーマのstyle.css読込み
  wp_enqueue_style( 'child-style', get_theme_file_uri('/style.css'),array('parent-style'));
);
}
?>

5行目：parent-styleというハンドル名を指定
7行目：array()で指定した ハンドル名の後に読み込み

とすることで、親テーマのスタイルに上書きが可能になります。

４．screenshot.png の作成

子テーマのフォルダー内に screenshot.png を作成します。

画像サイズは推奨されている 880×660 で作成して、ファイル名は screenshot.png と付けてください。

テーマ選択画面のサムネイル画像なので、無くても大丈夫ですが無いと下のように寂しい感じなので、作成します。

５．管理画面でテーマ変更

最後に管理画面から、外観 ＞ テーマ と進み、表示された子テーマを有効化すれば設定完了です！

お疲れさまでした！