ブロックを使っていろいろなカスタマイズができることが最大のメリットであるTwenty Twenty-Twoテーマでも、やはりカスタムコードなどを使って機能を追加したり、スタイルコードを書いて見た目を調整することも多いはず．．。
そこで本ページでは、Twenty Twenty-Two(TT2)テーマ用の子テーマを配布しています。
スタイルシートとfunctions.phpを持つ最低限の子テーマとは違い、様々なカスタマイズができる準備を整えた子テーマですので、よかったらお使いください。
最新バージョンは2.1です
TT2子テーマの機能概要
| 機能 | 概要 | |
|---|---|---|
| グローバル設定 | theme.json | 親テーマのtheme.jsonを上書きします |
| 管理画面のデザイン | admin-style.css | 管理画面側に独自のデザインを追加できます |
| エディタのデザイン | editor-style.css | 編集画面側に独自デザインを追加できます |
| 追加JS | child-script.js | JavaScript、jQueryなどを追加できます |
| ヘッダーコード追加 | insert-header.php | ヘッダーへアクセス解析用スクリプトなどを出力できます |
| フッターコード追加 | insert-footer.php | フッターへアクセス解析用スクリプトなどを出力できます |
| テンプレートショートコード | parts.php | テンプレートをショートコード化して、テーマテンプレート内などへ出力できます（全3か所分） |
今まで親テーマでカスタマイズしていた方へ
TT2テーマを親テーマから子テーマへ切り替えた際に一番困るのが、編集したテンプレートの移行です。
以下の手順で作業をすることで、親テーマに施したテンプレート編集部分をそのまま子テーマへ移行できます。
一部画像等は移行できないことがあります。そうした部分は個別に対応をお願いします
１．親テーマをエクスポートする
「外観」→「エディター」を開き、画面右上の三点リーダー（縦に点が3つあるボタン）をクリックすると、下図のように「エクスポート」というリンクが出てきますので、クリックしてパソコン上へ親テーマのバックアップを取ります。
２．子テーマの入手とインストール
子テーマをダウンロードして、サイトへアップロードインストールしてください
この時点ではまだ有効化しないでください
３．テンプレートファイルを子テーマ内へ転送する
１でダウンロードした親テーマの圧縮ファイルを解凍します。
ファイルの中に「parts」と「templates」の2つのフォルダがあるので、FTPクライアントツールなどを使って、サイトの子テーマフォルダの中へアップロードしてください。
４．子テーマの有効化
サイトの管理画面から、子テーマを有効にします。
この時点でサイトを開くと、親テーマに施したテンプレート及びテンプレートパーツが適用され、以前と同じように表示されるはずです。
テンプレートの編集も通常通り行えます。
私の環境では上記手順で移行できることを確認しておりますが、ひょっとすると何か不都合や不具合が発生するかも知れません
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に更新してしまうと、行ったカスタマイズ内容がクリアされてしまいますのでご注意ください
入れ替えるコードの内容
以下の手順でコードの入れ替えをお願いします。
１．「ツール」→「テーマファイルエディター」を開く
２．右のファイル・フォルダ一覧から「include-child」→「functions.php」を開く
３．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の子テーマを配布していますが、子テーマの代わりに以下のプラグインの使用を検討してみてはいかがでしょうか？
