ワードプレス　テーマTwenty Twenty-Oneの子テーマの作り方

2022年4月13日

ワードプレスの公式デフォルトテーマTwenty Twenty-Oneの子テーマの作り方を紹介します。

非ブロックテーマとしてはおそらく最後の公式デフォルトテーマなので、私も中味をきちんと勉強しておこうと思い子テーマを作成しました。

子テーマの作成手順概要

子テーマの作成手順概要は以下の通りです。

1. 子テーマ用フォルダを作成
2. 子テーマ用フォルダ内にstyle.cssを作成してコードを記述
3. 子テーマ用フォルダ内にfunctions.phpを作成してコードを記述
4. 子テーマ用フォルダをサーバー内ワードプレスのwp-content>themesにアップロードする

本記事では②と③の部分について詳しく紹介します。手順①④を含めた子テーマの作成方法全体については次の記事を参照ください。

Twenty Twenty-Oneの子テーマ用コード

子テーマ用フォルダ（例えばtt1-child）を作成して、その中にstyle.cssとfunctions.phpを作成します。各ファイル内に記述するコードは以下の通りです。

style.css

/*
 Theme Name:   Twenty Twenty-one Child
 Description:  Twenty Twenty-oneの子テーマです
 Template:     twentytwentyone
 Version:      1.0.0
*/

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'twenty-twenty-one-style' ), 
        wp_get_theme()->get('Version') 
    );
}

以上のファイルの入った子テーマ用フォルダtt1-childをサーバーにアップロードすればOKです。アップロード先はワードプレスをインストールしたディレクトリ内のwp-content>themesです。

アップロード後、ダッシュボードからテーマtt1-childを有効化すれば使えるようになります。

コードの解説

style.css

style.cssの冒頭に上記の記述をすることで、ワードプレスが子テーマだと認識してくれるようになります。Theme Name とTemplateの記述は必須です。

Templateの記述は親テーマのフォルダ名twentytwentyoneをそのまま使う必要があります。テーマ名のTwenty Twenty-Oneなどと記述すると動かないので注意してください。

functions.php

親テーマのスタイル読み込みとの関係

Twenty Twenty-Oneの場合は、親テーマでstyle.cssを読み込むときに get_template_directory_uri( ) を使っているので、子テーマ側で親テーマのstyle.cssの読み込み記述は必要ありません。

ただし親テーマのstyle.cssの後に子テーマstyle.cssを読み込む必要があるので、そのハンドルネームを調べて依存性に記述する必要があります（ wp_enqueue_style の第３引数 array('twenty-twenty-one-style) の部分）。

ハンドルネームは親テーマのfunctions.phpでstyle.cssを読み込んでいる部分を調べればわかります。親テーマfunctions.php内でstyle.cssやwp_enqueue_styleで検索するとよいでしょう。

Twenty Twenty-Oneの場合は次の部分です。ハンドルネームのほか、style.cssを読み込むときにget_template_directory_uri( )を使っていることもわかります。

function twenty_twenty_one_scripts() {
	// Note, the is_IE global variable is defined by WordPress and is used
	// to detect if the current browser is internet explorer.
	global $is_IE, $wp_scripts;
	if ( $is_IE ) {
		// If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
		wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
	} else {
		// If not IE, use the standard stylesheet.
		wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
	}
//このあといくつかの関数記述が続く
}

この中で、style.cssを読み込んでいるwp_enqueue_style( )関数の第１引数がハンドルネームです。

wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );

すなわちハンドルネームは twenty-twenty-one-style なので、子テーマfunctions.phpに記述したwp_enqueue_styleの第３引数 array('twenty-twenty-one-style) で使っているわけです。

バージョン情報でなく更新日をクエリーとしたい場合

wp_enqueue_styleの第４引数wp_get_theme()->get( 'Version’ )では、子テーマstyle.cssに記述したVersionを取得して、更新されているかどうかを確認しています。ブラウザがキャッシュをクリアして再読み込みするかどうか判断するためです。

バージョン情報をいちいち書き換えるのが面倒だという人は、style.cssの更新日をクエリーとして使うとよいでしょう。その場合はfunctions.phpの記述を次のようにします。

functions.php

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
	$time_stamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'twenty-twenty-one-style' ), 
        $time_stamp
    );
}

style.cssの更新情報を格納した$time_stamp変数をwp_enqueue_styleの第４引数としています。

まとめ

TwentyTwenty-Oneはget_template_directory_uri( )でスタイルを読み込んでいるテーマなので、旧コーデックスで紹介している子テーマの作成方法ではうまく機能しません。

現在のコーデックスは次の通りです。

get_template_directory_uri( )でスタイルを読み込んでいる他のテーマの場合でも、今回紹介した方法で子テーマを作成することができます。子テーマ作成時の参考にしていただくと幸いです。