Twenty Twenty-Twoの子テーマダウンロードページ

Twenty Twenty-Two Theme Customize | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

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

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

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

最新バージョンは2.1です

累計ダウンロード数:164回

子テーマを使用する前に

従来のテーマ(クラシックテーマ)とは違い、ブロックテーマは、独自の関数などをほとんど持っておらず、ほとんどをWordPressのコア機能に依存しています。

テーマ更新によって大掛かりな変更が行われることはほとんどありませんから、子テーマを使って何かを上書きするよりも、フォーク(派生化)して使用することを個人的にはおすすめしています。

ブロックテーマのフォーク方法については以下でできる限り詳しく紹介していますので、子テーマを使用する前にぜひ一読ください。

QA Analytics QA Analytics

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の子テーマダウンロードページ|Personal WP Customization Notes (PWCN)

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のコピーを入れていますのでエラーは発生しません

補足 子テーマを使わない手段もあります

WordPressでテーマカスタマイズと言えば、子テーマの使用が頭に浮かぶ方も多いと思いますが、TT2のようなブロックテーマでは、テンプレートの編集がサイトエディターで行えるため、旧来のクラシックテーマのように、子テーマの大きな機能の1つである親テーマのテンプレートをコピーしての編集を行う必要はほとんどありません。

従って、独自のスタイルやプログラム(機能)を追加したいという目的であれば、プラグインでそれらを追加したほうが、他のテーマへ移行した際にも追加したものが継承されるため、管理しやすくなると考えられます。

本ページではTwenty Twenty-Twoの子テーマを配布していますが、子テーマの代わりに以下のプラグインの使用を検討してみてはいかがでしょうか?