WordPressが今後推していくのがブロックエディターのようにテンプレートが操作できるブロックテーマ。既に2021年末にリリースされたバージョンから、「Twenty Twenty-Two」というブロック形式のテーマがデフォルトとして採用され、現在は「Twenty Twenty-Three」、そして現在の情報として、バージョン6.4では「Twenty Twenty-Four」というテーマがデフォルトになると案内されています。
そもそもクラシックテーマとブロックテーマの違いは何？を、今の日常に置き換えれば、前者は賃貸仲介サービスで探したアパートやマンションに入居して、ある部分を自身の都合のいいように変えて住むタイプの住宅、後者は土地と建物のサイズだけが決まっていて、あとの部分は専門家と相談しながら設計していくというタイプの住宅という感じでしょう（かえって分かりにくい？）。
今後建物で言う「床」「壁」「天井」がある程度決まっているクラシックテーマがなくなるということはないとは思いますが、自分の思うようにできるブロックテーマの方が、個人的には自由度が広がって独自の表現がしやすいと思います。
そこで、私が管理するサイトで、今まで自作のクラシックテーマで運用していたサイトを、ブロックテーマである「Twenty Twenty Three」へ移行した手順をメモとして公開しておきますので、私と同様にそろそろブロックテーマ？という方は参考にしていただければ幸いです。
将来性を考えてブロックテーマへ移行する
クラシック・ブロックに関わらず、サイトを動作させたままでテーマ移行を経験したことのある方なら、恐らく以下のような手順で移行を行うでしょう。
- 移行するテーマの子テーマを入手して有効化
- 移行前のテーマに施していたカスタマイズ部分や設定部分を移植
- 過去のコンテンツで変更が必要な部分の修正
ただ、プラグインとして導入する機能を封入しないことを推奨している公式に準じたテーマを除き、いわゆるプロ版が設定されていたり、公式外で配布・販売されているテーマの多くは、テーマカスタマイザーなどで独自の機能が設定できるようになっていたりして、結構移行が大変だったりします。
そこで、せっかく自由度の高いブロックテーマへ移行するのですから、将来テーマ変更をしなければならなくなった時でもできるだけ作業を減らせるよう、以下のような考え方で進めました。
子テーマを使わない
WordPressで独自カスタマイズと言えば親テーマにプログラムを上書きできる子テーマを使用することが多いでしょう。
そうしておくことで、親テーマが更新されてもカスタマイズした内容が消失しないというメリットがあります。
ただ、それは親テーマが〇〇であるという前提になるので、親テーマが△△に変われば、子テーマも△△用のものを作成して移行しなければなりません。
そこで今回は子テーマを使う代わりに、カスタマイズプログラムを適用できるプラグインを作り、テーマに左右されずに機能するようにしました。
移行前のテーマ独自の関数を使ったプログラムがある場合は、テーマ移行時に注意が必要であるものの、少なくとも移行時に前後の子テーマへプログラムをコピーしていく手間は省けるようになります。
このプラグインは本サイトで配布しており、上記のリンクから詳細をご覧いただけますので、よかったら見てみてください。
機能の追加や設定はテーマではなくプラグインから行う
今まで使用していた自作のクラシックテーマでは、テーマカスタマイザーに項目を追加して、いろいろな機能の有効化／無効化や調整ができるようにしていました。
クラシックテーマでは有効だったこの機能は、残念ながらブロックテーマにはありません（厳密には復活させることも可能ではあります）。
しかしこれも、そのサイトで、そのテーマでというのが前提になってしまうので、テーマを変更したら設定もやり直しになってしまいます。
そこで、私が必要として追加している機能を以下のプラグインに集約しました。
これで、子テーマ同様、テーマに関わらず機能が有効になるので、以降時の手間を減らすことができます。
できるだけサイトエディターのグローバルスタイル設定を使わない
最後に、ブロックテーマには、サイトエディターという、サイトの外観を決める設定プログラムがあります。
その中に、「グローバルスタイル」と呼ばれる、サイトの骨格となるスタイル情報を、ボタン切り替えなどで簡単に設定できる機能があります。
すごく便利ではあるものの、この設定はそのサイトが紐づくデータベース内に保存されるため、他のサイトへ流用する際には再設定するか、別のテーマとしてエクスポート＆インポートを行う必要があります。
そこで、この「グローバルスタイル」のほとんどが、テーマファイルの中にある「theme.json」というファイルに記述されているものを任意に変更するという仕組みであることを利用しようとしました。
が、これを編集するには、親テーマの「theme.json」を編集するか、子テーマを有効化してコピーした「theme.json」を編集する必要があり、このためだけに子テーマを使うのか．．という問題に直面しました。
そこで作ったのが、以下のプラグイン。
テーマによって「theme.json」の内容が異なるので、現状は「Twenty Twenty-Two」用と「Twenty Twenty-Three」用として配布していますが、それぞれのテーマの「theme.json」の中身すべてをPHP化して編集できるようにしているので、jsonファイルの書式に慣れていない方でも比較的編集しやすいのではないかと思います。
今回は自身で作成した機能満載のクラシックテーマからの移行なので大変ですが、今後例えば「Twenty Twenty-Four」へ移行する際には、原則それ用の「theme.json」編集プラグインの作成と編集、今回の移行で作成したテンプレート類をブロックごとコピーするだけで移行が完了するようになり、常に最新のテーマを使えるようになる！と目論んで、作業を進めます。
具体的な移行手順
今回移行したのはこちらのサイトです。現在、テンプレート類の編集まで至っていないので、「Twenty Twenty-Three」の親テーマレイアウトそのままですが、機能やカスタマイズコード、「theme.json」の編集については前述したプラグインを使用して進めています。
１．旧テーマのバックアップ
まずは旧テーマのバックアップ。
２．「HA Alt Childtheme」の有効化とコードの移行
旧テーマの「functions.php」や「style.css」の内容、別建てで入れていたJSファイルなどを移行。
この段階では要不要ではなく、今までのテーマに追加していたコード類をそのまま移行（カットして保存後プラグイン側でペースト）して、テーマ内のカスタムコードや追加したファイルなどをすべてなくすという作業をしました。
この時の注意点としては、テーマでしか使えないフックがWordPressにはいくつか存在することと、ファイルの参照先がテーマファイル内でなくなるので確認しつつ進めました。
また、旧テーマのカスタマイザー内で設定していたサードパーティサービス（広告やアクセス解析など）のID類など、後々「Hima Art Utility」で再設定する必要のある情報をメモ帳などにコピーしました。
この段階では旧テーマを有効化した状態で今まで通りに動かなければどこかに問題があるということになるので、各所を確認しました。
３．新テーマへ切り替え
テーマの中で動いていたスタイルやコード、テーマカスタマイザーで設定していたもので、後々必要となるものを退避させることができたので、テーマを「Twenty Twenty-Three」へ変更。
フロントエンドのデザインはテーマデフォルトなので大幅に変わってしまうし、テーマカスタマイザーで行っていた機能は即座に停止してしまいますが、旧テーマへコードとして追加した機能は特に問題なく動いていることを確認しました。
４．「Hima Art Utility」のインストールと設定
前述したように、旧テーマに備わっていた機能をプラグイン化＋機能追加したのが「Hima Art Utility」なので、インストールしてすべての項目を設定していきました。
旧テーマと機能が被る部分が多いので、テーマ切り替え後に行うことで、重複トラブルは避けられました。逆だったら問題が発生していたかも知れません。
この段階でデザインを除くほとんどの機能が回復したので、あとはゆっくり進められます。
５．「HA Theme Json Changer」のインストールと設定
「Twenty Twenty-Three」の「theme.json」をプラグインから変更するため、「HA Theme Json Changer」をインストールして、必要箇所（特に文字の大きさとフォントの種類の部分）を編集。
予定通り、サイトエディターのグローバルスタイルは一切触らずに、ある程度の調整ができ、レイアウトや細かい部分はデフォルトのままであるものの、文字の大きさなどは見やすい形になりました。
６．不要なコードの削除や修正
旧テーマから移行したスタイルコードやカスタムコードのうち、必要のないものの削除、必要部分の修正を再度行い、あとはテンプレートの編集や追加をしていくだけの状態になりました。
まあ、テーマ変更と自身で作成したプラグインへの移行と設定なのでここまでの段階で約1時間程度、思っていたほど苦労はありませんでした。
７．テンプレートの構築
あとはトップページや個別ページのテンプレート編集のみというところまで来ました。
ただ、今までのサイドバーありのスタイルよりも、TT3デフォルトの方が見やすいかも．．という感じもしてきましたので、どうするのかをよく考えてから設定していく予定です。
後述
私はブロックエディターが登場した頃、確かにブロックを挿入して編集というのは便利だけど、フロントエンドとバックエンドで結局スタイルが合わないから、プレビュー確認する以外に確実な方法はないんだし．．制作再度から言えば、何より両方のスタイルを合わせるのが面倒で、しばらくクラシックエディターを使い続けていて、やっとブロックエディターに慣れた頃に登場したブロックテーマだったので、なんとなく敬遠していました。
そして、WordPressのことを書いているサイトはいっぱいあるんだから、どうせなら、ブロックテーマを使って作ってみようと始めたのがこのサイトで、当時デフォルトだった「Twenty Twenty-Two」を使い始めたきっかけでした。
当初はやはりアレルギー？みたいなものがあり、結局クラシックテーマの方が扱いやすいのでは？となりかけたものの、テーマで行っている機能をプラグイン側から実現できないかと作り始めたオリジナルプラグイン「Hima Art Utility」を作り進めつつ、このサイトを充実させていくうちに、ブロックテーマの扱い方を覚えていき、かつプラグインでできることも増え、いよいよ最終目標だった、旧自作テーマのサイトをブロックテーマへ変更していくというところに辿りつきました。
その段階になって追加したのが「子テーマはいらないのでは？」という発想から作成した「HA Alt Childtheme」と、「サイトエディターのグローバルスタイルではなく、theme.jsonでコントロールし、しかも子テーマではなくプラグインから編集できたら、別サイトへの流用が楽ではないか？」という発想から「HA Theme Json Editor」で、現在の私の中ではこの3つの独自プラグインを使うことで解決できそうというところに至りました。
冒頭でも紹介した通り、WordPress標準のブロックテーマとしては「Twenty Twenty-Two」「Twenty Twenty-Three」と、6.4でデフォルトとなる「Twenty Twenty-Four」の3つとなり、公式上でもたくさんのブロックテーマがリリースされています。
ただ、ブロックテーマはブロックテーマとして半ば完成されていて、違いがあるのは以下の3点位です。
- テーマのテンプレート類
- テーマのスタイルや独自の色設定（theme.jsonによる）
- そのテーマで最適化されたパターン
いやいやいろんな設定ができる／できないなどあるし．．と言われそうですが、それらのほとんどはtheme.jsonからWordPress本体で有効／無効にできるものなどをコントロールしているものが多く、逆にそれ以外からアプローチされているものは結局テーマ移行時にまた大作業となってしまうので、本当にその機能が別で実装できない場合を除けば、デフォルトテーマで十分というのが現在の私の結論です。
これは、TT2にTT3のtheme.jsonを試しに使ってみる（またはその逆）をしてみると、theme.jsonがいかにいろいろな部分の制御をしているのかを理解できるでしょう
ブロックテーマはクラシックテーマのようにすべてのスタイルを一から書いているのではなく、あくまでもブロックの制御をしているだけなのですから。
本ページで紹介した方法では、このサイトで配布しているものを利用していますが、公式上にも似たような機能のものは多数リリースされていますから、ブロックテーマでサイトを作るなら、
- 子テーマは使わない
- 必要な機能はプラグインで追加
- テーマ独自（そのテーマでしか有効にならない）の機能があるブロックテーマを選ばない
というのを基準にすれば、後々そのブロックテーマが使えなくなっても切り替えに苦労することは少ないのかも知れません。
コメントを残す