ブロックを使っていろいろなカスタマイズができることが最大のメリットであるTwenty Twenty-Twoテーマでも、やはりカスタムコードなどを使って機能を追加したり、スタイルコードを書いて見た目を調整することも多いはず..。

そこで本ページでは、Twenty Twenty-Two(TT2)テーマ用の子テーマを配布しています。

スタイルシートとfunctions.phpを持つ最低限の子テーマとは違い、様々なカスタマイズができる準備を整えた子テーマですので、よかったらお使いください。

TT2子テーマの機能概要

機能概要
グローバル設定theme.json親テーマのtheme.jsonを上書きします
管理画面のデザインadmin-style.css管理画面側に独自のデザインを追加できます
エディタのデザインeditor-style.css編集画面側に独自デザインを追加できます
追加JSchild-script.jsJavaScript、jQueryなどを追加できます
ヘッダーコード追加insert-header.phpヘッダーへアクセス解析用スクリプトなどを出力できます
フッターコード追加insert-footer.phpフッターへアクセス解析用スクリプトなどを出力できます
テンプレートショートコードparts.phpテンプレートをショートコード化して、テーマテンプレート内などへ出力できます(全3か所分)

今まで親テーマでカスタマイズしていた方へ

TT2テーマを親テーマから子テーマへ切り替えた際に一番困るのが、編集したテンプレートの移行です。

以下の手順で作業をすることで、親テーマに施したテンプレート編集部分をそのまま子テーマへ移行できます。

一部画像等は移行できないことがあります。そうした部分は個別に対応をお願いします

1.親テーマをエクスポートする

「外観」→「エディター」を開き、画面右上の三点リーダー(縦に点が3つあるボタン)をクリックすると、下図のように「エクスポート」というリンクが出てきますので、クリックしてパソコン上へ親テーマのバックアップを取ります。

Twenty Twenty-Twoの子テーマダウンロードページ|Twenty Twenty-Two (TT2)のカスタマイズ情報

2.子テーマの入手とインストール

子テーマをダウンロードして、サイトへアップロードインストールしてください

この時点ではまだ有効化しないでください

3.テンプレートファイルを子テーマ内へ転送する

1でダウンロードした親テーマの圧縮ファイルを解凍します。

ファイルの中に「parts」と「templates」の2つのフォルダがあるので、FTPクライアントツールなどを使って、サイトの子テーマフォルダの中へアップロードしてください。

4.子テーマの有効化

サイトの管理画面から、子テーマを有効にします。

この時点でサイトを開くと、親テーマに施したテンプレート及びテンプレートパーツが適用され、以前と同じように表示されるはずです。

テンプレートの編集も通常通り行えます。

私の環境では上記手順で移行できることを確認しておりますが、ひょっとすると何か不都合や不具合が発生するかも知れません

PHP8.1環境にすると、投稿や固定ページ編集画面でエラーが表示されるときは

本ページで配布している子テーマのバージョン1.4以前を有効化した状態で、PHPのバージョンを8.1にし、投稿や固定ページ編集画面を開くと、以下のようなメッセージがずらっと表示される不具合があります。

Return type of Requests_Cookie_Jar::offsetExists...
Return type of Requests_Utility_CaseInsensitiveDictionary:...

これは、子テーマ内のeditor-style.cssの読み込み方法に不具合があるのが原因でした。

2022年12月10日以降に配布しているバージョン1.4.1では、この問題は解消していますが、それ以外のバージョンの子テーマをお使いの方は、コードの編集をお願いします。

バージョン1.4.1以前の子テーマを1.4.1に更新してしまうと、行ったカスタマイズ内容がクリアされてしまいますのでご注意ください

入れ替えるコードの内容

以下の手順でコードの入れ替えをお願いします。

1.「ツール」→「テーマファイルエディター」を開く

2.右のファイル・フォルダ一覧から「include-child」→「functions.php」を開く

3.48行目付近にある以下の【変更前のコード】の内容を【変更後のコード】に書き換えて保存します。

【変更前のコード】

/***** ブロックエディタ用にスタイルを追加 *****/
function tt2_editor_style_init(){
	// ブロックエディタ用スタイル機能をテーマに追加
	add_theme_support( 'editor-styles' );
	// ブロックエディタ用CSSの読み込み
	add_editor_style(trailingslashit( get_stylesheet_directory_uri() ) .'editor-style.css');

}
add_action( 'after_setup_theme', 'tt2_editor_style_init');

【変更後のコード】

/***** ブロックエディタ用にスタイルを追加 *****/
function tt2_editor_style_init(){
//スタイルシートの登録
wp_register_style( 'custom-editor-style', get_stylesheet_directory_uri() .'/editor-style.css', array(), filemtime(get_stylesheet_directory() .'/editor-style.css'), 'all' );

//スタイルシートの読み込み
wp_enqueue_style('custom-editor-style', '', array(), null, false);
}
add_action( 'enqueue_block_assets', 'tt2_editor_style_init');

「JSON ファイルのデコード中にエラーが発生しました」とエラーが出た時は

2022年12月9日以前にダウンロードできるようにしていたバージョン1.3では、「JSON ファイルのデコード中にエラーが発生しました..」というPHPエラーが、環境によって吐き出されることがあります。

これはエラーではなく、子テーマのtheme.jsonファイルに何も指定されていないというもので、親テーマのtheme.jsonの内容をコピーすれば解消されます。

現在本ページでダウンロードできるバージョン1.4では問題解消しておりますが、既に1.3以前のバージョンをお使いの方は、子テーマへ行ったカスタマイズ内容がクリアされてしまいますので、バージョン1.4への更新は行わず、上記theme,jsonのコピーにて対応ください。

2022年12月9日以降ダウンロードできるようにしたバージョン1.4ではあらかじめ親テーマのtheme.jsonのコピーを入れていますのでエラーは発生しません