ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

親テーマのスタイル読み込み方法は次の2通りあります。

  • スタイルの読み込みで、get_template_directory_uri( )を使う場合
  • スタイルの読み込みで、get_stylesheet_uri( )またはget_stylesheet_directory_uri( )を使う場合

子テーマの作成方法はこの2つの場合で若干異なります。

TwentyTwenty-Oneはget_template_directory_uri( )でスタイルを読み込んでいるテーマです。同じ方法で読み込んでいるテーマの子テーマを作成する場合は、本記事が参考になると思います。

子テーマの作成手順概要

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

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

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

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

子テーマ用フォルダ(例えばtt1-child)を作成して、その中にstyle.cssfunctions.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 の第3引数 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( )関数の第1引数がハンドルネームです。

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の第3引数 array('twenty-twenty-one-style) で使っているわけです。

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

wp_enqueue_styleの第4引数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の第4引数としています。

まとめ

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

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

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる