WordPressはどんどんブロック形式でサイトを運営する方向へ進んでいて、このサイトもブロックテーマへ移行と思いながら時間が過ぎていく．．そんな日々を脱出すべく、重い腰を上げて、このサイトもようやくブロックテーマ運営の仲間入りをしました（笑）。
一応それなりな形になったところで、移行すべきかどうか、移行の流れ、、移行の際のポイントとなった点などを備忘録を兼ねて公開しておきますので、私と同じようにそろそろブロックテーマかな？と感じている方の参考になれば幸いです。
ブロックテーマへの移行の必要性とメリット・デメリット（個人的な意見）
公式内外でもいろいろなブロックテーマが配布＆販売されている中、今回は、WordPress標準の「Twenty Twenty-Three」を使用しました。以下がその理由です。
- ブロックテーマ自体がWordPressコアへの依存が強いので、特に独自テーマを使う必要がない
- 余分な機能は自分で実装するので必要ない
- テーマ独自のパターンなどを使うつもりがない（将来的に別テーマへ移行したときが面倒）
- 個人開発のテーマのように突然の更新停止・配布停止となってしまうことが少ない
ブロックテーマのメリット
サイトの表示速度がクラシックテーマよりも速い？
これはアクセス解析と体感を基としたものなので、実際にどうかというところは不明ですから、？にしました。
ただ、標準のブロックテーマは、クラシックテーマと違い、いろいろな定義をしていく部分が少なく、WordPressのコアプログラム（主にGutenbergからWordPressへ転用している部分）に依存している部分がほとんどなので、WordPress自体のパフォーマンスに応じて高速化されるのが特徴です。そして、WordPressの動作パフォーマンスに関しては、コアプログラムの開発チームが日夜努力してくださっていますから、処理の多いクラシックテーマと比べたら、ページ構築プロセス的にも速くなるのではないかと思います。
また、そもそもブロックエディター自体が、特別なプログラムを書くことなく各種の画面サイズやデバイスに合わせた形でスタイルを整えてくれる（いわゆるレスポンシブ）ので、自身でごちゃごちゃ調整するよりも、Google PageSpeed Insightsなどの特にモバイルでのスコアは、何も気にすることなく結構高スコアが出るのが特徴です。
自分の思った通りのレイアウトや、コンテンツの挿入をしたテンプレートができる
これは、ブロックエディターで投稿を作成されている方なら実感しているところでしょう。いろいろなレイアウトの指定や色の変更、余白の調整などが、標準のブロックだけでも結構思う通りになるんです。
これがそのまま「サイトエディター」というテーマのテンプレート編集で行えるので、サイドバーを作ったり、定型コンテンツを入れたり．．なんてことも、実際の画面を見ながら、投稿コンテンツを作るようにいつでも変更できます。
また、サイトエディターにはグローバルスタイルという、サイト全体の骨格となるデザイン設定ができるようになっているので、サイト内の統一性も図りやすいのが特徴です。サイトの全体で統一した見た目を変えたい時は、グローバルスタイルの編集をすれば一発で変えられるのも楽しいです。
さらに、WordPress6.3では、このサイトエディターの機能が大幅に向上して、投稿タイプや、個別のコンテンツごとに別のテンプレートを設定するなどといったことがより簡単にできるようになりました。
原則床壁天井が決まっているクラシックテーマと比べて何でも自由にできるというのが最大のメリットでしょう。
従来通り子テーマも使用できる
クラシックテーマと同様に、子テーマを作成、有効化して使用することもでき、独自のカスタマイズコードやスタイルコードを適用させることもできます。
ただ個人的にはしばらく別のサイトでブロックテーマを使ってきた結論として、子テーマは使わず、プラグインで機能実装することをおすすめします。
他サイトへの流用が簡単にできる
ブロックテーマには、設定をそのまま移行できるように「エクスポート」機能があります。これを使うと、他のサイトへ簡単にテーマを流用できます（懸念事項についてはデメリット参照）。
ブロックエディターとの親和性が高い
これは言うまでもありませんが、ブロックテーマは、WordPress本体のブロックエディターに構成要素を大きく依存していますので、ブロックテーマ＋ブロックエディターで何かを操作する場合、非常に親和性が高いです。
クラシックテーマの場合に起こりがちだった、パソコン表示ではうまくいくがモバイル表示では表示が崩れるといったことが少なく、対処もそれほど必要ないので、ほぼ何も気にせずサイトの運営ができます。
ブロックテーマのデメリット
テンプレートのレイアウトやスタイルは自由にはなるものの．．．
ブロック配置すれば自由にレイアウトやデザインができるテンプレートですが、ブロックエディターや、ページのHTML構造にある程度慣れていないと最初から自身で構築するのは難しいです。
とはいえ、特にWordPress標準の「Twenty Twenty-Two」や「Twenty Twenty-Three」では、標準のテンプレートが個人的にちょっと．．という感じなので、テンプレートの編集は必須でしょう。
その点、基本レイアウトやスタイルが決まっているクラシックテーマでは気にすることなくスタートできますから、とにかくコンテンツを増やす（書く）ことを目指しているなら、クラシックテーマの方が便利なのかも知れません。
ウィジェットという概念がない
ブロックテーマには、クラシックテーマにあった「ウィジェット」という機能がありません。また、管理画面上のメニューにも項目がありません。
これはすべてテンプレートをブロックで構成する、または、本文内で必要となる部分には関数やショートコード、独自のブロック、同期パターンを使って挿入する仕組みになっているからです。
従って、ウィジェットとして何かのコンテンツを埋め込むことが前提となっているプラグインは、ブロックテーマでは使用できません。
これはどうしようもないことなので、切り替え前にそのプラグインのコンテンツがショートコードで出力できるようになっていないか、独自のブロックで挿入できるようになっていないかを確認して、対応不可であれば別のプラグインを使用するほかありません。
テーマのエクスポート機能を使うと．．．
メリットで書いたテーマのエクスポート機能、一見便利なのですが、デメリットはエクスポートしたテーマは基本別のテーマとなることです。テーマ標準で備わっているテンプレートをそのまま編集した場合には、そのテンプレートが標準となるので、テンプレートの「デフォルトに戻す」で戻るのはそこまでという形になります。
ただこれは、WordPress6.3で簡単にできるようになったテンプレート追加機能を使って、標準はそのままにしておけば特に問題はないでしょう。
自身今後運営していくサイトはすべてブロックテーマでと考えているので、メリット多め、デメリットは補完するという内容になっていて、偏った内容になったかも知れません（笑）。
ただ間違いなく言えるのは、有料にせよ無料にせよ、どんな優秀で高機能なテーマでも、いつかは終わりが来てテーマ変更を余儀なくされる場面が出てくるかもしれないということで、これはテーマに限らずプラグインでも言えることです。
そんな時が来ても慌てないよう、できるだけ独自機能のないテーマを使い、自身で実装できる機能は自作プラグイン内で構築するというのが、長くWordPressでサイトを運営していく上では必要だと思います。
よく、プラグインに脆弱性が発見されたり、WordPress本体バージョンや環境によって動作に不都合が起きたりすると文句を言う人がいますが、特に無料のものは、本体含めどれもボランティアで提供いただけているものなので、まったくもってお門違いだと思います。それなら最初からすべて自分で作っては？というのが私の考えです（余談でした．．．）。
クラシックテーマからブロックテーマへの移行の流れ
さて、ここから先は、本サイトを、これまで運営に使用していた独自テーマ【HABONE】からWordPress標準ブロックテーマの【Twenty Twenty-Three】へ移行したということを前提に話を進めていきますので、他テーマの場合は適宜読み変えてください。
クラシックテーマ時代は子テーマを使用していましたが、経験則として、ブロックテーマでは子テーマを使用するよりも、プラグインからカスタマイズ部分はアプローチしたほうがいいと考え、子テーマは使用していません。
それを踏まえ、大まかには以下のようにして移行しました。
- カスタマイズコードを稼働させるプラグインの導入
- クラシックの子テーマからプラグインへのコード移行と確認
- クラシックテーマのオプション機能をプラグインへ移行
- テストサイトを使ってブロックテーマの大まかなレイアウトを作成
- テストサイト＋自作プラグインを使って「theme.json」の編集
- クラシックテーマからブロックテーマへ切り替え
- テンプレート類の変更
- カスタマイズコードの稼働を確認
- 不要なスタイルの削除と調整
当たり前ですが、WordPressのテーマは、有効化しないとテンプレートの編集などができないし、今回移行したTwenty Twenty-Threeの投稿や固定ページテンプレートはあまりにもちょっとアレなので、移行後の編集は必須でしょう。
つまり1～5の段階で、ある程度（というかほぼ100%）テンプレート編集以外の部分は問題なく稼働している状態でないと、デザインがアレな期間がどんどん長くなります。まあ、それほど気にしない方は同時進行でもいいですが、できればなるべく早くいい感じに仕上げたいところですね。
ではどんなことを具体的に行ったのかを順に挙げていきます。
1.2 カスタマイズコードを稼働させるプラグインの導入とコード移行
子テーマと同じことができるプラグインをということで、以下を使用しました。
100%自前でということなら、以下を参考に自分専用のプラグインを作るのもいいと思います。
注意点として、functions.phpなどへ追加するプログラムに関して、テーマでしか使えないフックや関数はプラグイン用のものに変更して移行することと、そのテーマ独自のフックや関数に関しては、ブロックテーマ移行時にエラーとなってストップしてしまうので、汎用に使える形にする必要があります。
スタイルについては、そのまま移行すれば、旧テーマでの稼働自体には問題ないと思いますが、移行後にチェックは必要でしょう。
3.クラシックテーマのオプション機能をプラグインへ移行
旧テーマの【HABONE】には、私自身がサイト運営時に必要であろうと思うたくさんの機能をテーマ側で設定できるようにしていたので、将来的にブロックテーマ＋プラグインという形にできるよう、以下のプラグインを作っていました。
テーマカスタマイザーとプラグインの設定画面を比較しながら、テーマ側の機能停止→プラグイン側の機能有効化をしていき、サイトの稼働に問題がないように注意しながら移行しました。
サードパーティ（公式で配布されていない）テーマでは、【HABONE】と同様に、本来プラグインが行うべき機能をテーマ内に封入しているものが多いので、移行前にその機能を自作プラグインなどへ移設するか、代替となるプラグインを導入して、テーマの機能に頼らない状態にしておく必要があります。
最終段階で、前述したようなテーマ独自の関数やフックなどを使用したコードがないかを確認しましょう。もしもそれらが含まれている場合には、テーマ切り替え直後にサイトがストップしますのでご注意を
4.テストサイトを使ってブロックテーマの大まかなレイアウトを作成
これは別にテストできるようなサイトや、現状アクセスがほとんどないようなWordPressサイトを別に持っている場合にはという注釈付きになりますが、サイトエディターでの編集にいくら慣れていたとしても、結構戸惑うものです。
できれば次項の「theme.json」の編集と併せて、ある程度作っておいたものをザクっとコピーするという形にしておいた方が無難でしょう。
私の場合はそのようにしたものの、やはり後からいろいろと編集が必要でした。ただそれでも基本レイアウトはきちんとできていたので、全体の見た目はスムーズに切り替えができました。
5.テストサイト＋自作プラグインを使って「theme.json」の編集
これは考え方ですが、以下のような場合には特に行う必要はないでしょう。
- 設定を行うのはこのサイトだけで後々他のサイトへの転用はせず、都度スタイルの設定をすればいいという方
- 必要であればテーマのエクスポート機能を使って流用しようと考えている方
ブロックテーマには標準で追加されている「theme.json」というファイルは、大まかに以下のようなことをしています。
- ブロックエディター上の基本となるコントロールの指定
- スタイルを定義するための変数の設定
- 全体やブロックに対する基本スタイルの設定
- テンプレートやテンプレートパーツの定義
管理画面から「外観」→「サイトエディター」で行うグローバルスタイルやその他のスタイルの指定や、ブロックエディターでいろいろなスタイルの調整やテンプレートの選択をする部分はすべてこの「theme.json」が基礎となっていて、「サイトエディター」のグローバルスタイルで行ったものが最終的に上書きされてスタイルが決定される仕組みになっています。
つまり、この「theme.json」をしっかりさせることで、サイトエディターでグローバルスタイルを変更することなく、また、style.cssなどに余分なコードを書くことなく、サイトが運営できるようになるというのが、ブロックテーマ最大のウリとなっています。
ただ、困ったことに、「theme.json」はWordPressでは、テーマまたは子テーマにファイルが存在する場合にのみ適用されるようになっていて、親テーマに編集を加えても、テーマ更新によって無に帰してしまうという不都合があります。先ほど書いたように、子テーマを使わない前提なので、このためだけに子テーマを使うのであれば、本末転倒です。
そこで以下のプラグインを使って、「theme.json」をプラグインから上書きするという方法を取りました。
Twenty Twenty-Three用のものを使えば、現在テーマの「theme.json」上にあるデータはすべて上書きでき、追加したものも適用されるので、これをしっかりさせておけば、テーマをエクスポートすることなく他のサイトへも流用できて便利です。
ちなみに今後、色の移行問題が発生しないように、移行後は独自のカラーパレットを使うようにしておくと、将来的にも困ることが少ないと思います。
6.7.8.テーマ変更と変更後の処理いろいろ
旧テーマ上で、旧テーマ独自の機能をプラグインへ移行しても、機能や動作に問題がなく、テストサイトでテンプレート（仮）の作成や、「theme.json」の編集ができたら、いよいよテーマの切り替えです。
切り替えて特にエラーやサイトのストップがなければ、テストサイトのテンプレートをコピーしてサイトエディター上で貼り付け、各所調整したり、そのサイト独自の色など調整していけば完成です。
移行のポイントいろいろ
最後に、私が今回クラシックテーマからブロックテーマへ移行した際に、戸惑ったこと、ちょっと困ったこと、それらを解決した方法などを紹介しておきます。
旧テーマのうちにやっておいた方がいいことは【テーマ切り替え前】、新テーマへ切り替えた後に行った方がいいことは【テーマ切り替え後】として紹介していますので、移行前に一読しておくといいかも知れません。
【テーマ切り替え前】旧テーマで使用していた色や装飾スタイルの移行
ブロックエディター上で選択できるようになっているカラーパレットの色や装飾機能に割り当てられた色、独自の装飾機能のデザインなど、今まで使用していたテーマ独自の色は、テーマを変更すると訪ね当たる色がなくなるため、色が割り当てられなくなり、通常は黒などになってしまいますし、デザイン部分は消失してしまいます。
これを避けるために、旧テーマで稼働しているうちに、色やスタイルを継承させておく必要があります。
通常のクラシックテーマでは、テーマのstyle.cssにすべて書かれていると思いますので、以下のような手順で該当部分を探して、細かいスタイルの調整は必要となるものの、自作プラグインのスタイルシートへコピーしておくと、テーマを変更しても影響を少なくすることができます。
カラーパレットと独自装飾で方法が異なるので、以下を参考に移植しておくといいでしょう。
カラーパレットの場合
親テーマ内に「theme.json」というファイルがない場合には、以下の記述の前後に独自のカラーパレットに関する情報が記載されていることが多いので、「String Locator」プラグインなどを一時的に使って該当部分を探します。
add_theme_support( 'editor-color-palette',．．．親テーマが「theme.json」を持つ場合には、それを開いて、以下のような部分を探します。
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
．．．ブロックテーマでは、「theme.json」を使ってカラーパレットの指定をしているので、後者の場合は、該当部分を移行後のテーマの「theme.json」へ追加すれば、パレット上の色は継承されます。また、前者の場合は「theme.json」用のコードに書き換えた上で追加すればいいでしょう。
ただ、これだとテーマ移行後のカラーパレットには「新テーマのカラー」「旧テーマのカラー」「WordPress標準のカラー」が追加され、すごく色がたくさんになってしまって使いにくくなりますし、今後テーマ変更のたびにどんどん色が増えていくことになりますから、以下を参考に、カラーパレットには出さずに表示だけを継承するようにすると、ブロックエディター上で変更するまでは、見た目だけその色が継承されるようになるのでおすすめです。
上記リンク先ページは「TT3」のこととして書いていますが、他の色でもやることは同じです。
テーマ独自装飾のスタイルの場合
- テーマ独自の装飾機能を1つ追加する
- 1や2の三点リーダーをクリックして、「HTMLとして編集」を選択する
- 書かれている「class=”〇〇”」をコピーして、メモ帳などに貼り付けておく
- 管理画面から「外観」→「テーマファイルエディター」を開き、親テーマを選択して、スタイルに関するファイルを開く（通常はstyle.cssに書かれていると思いますが、テーマによってはスタイルごとにスタイルシートを別ファイルにしている場合があります）
- コードのどこかでクリックし、「F5」を押した後、表示される窓に「class=”〇〇”」の〇〇の部分、または、〇〇のうち、半角スペースで区切られている文字列をコピーして貼り付け、「Enter」を押す
- 訪ね当たった前後にある似たような形態のスタイルコードを自作テーマのスタイルシートへコピーする
【テーマ切り替え前】ウィジェット内のコードのコピー
ブロックテーマには、クラシックテーマの時にあった「ウィジェット」という概念がありません。すべて空のキャンバスの上にサイドバーを配置したり、テンプレートパーツを配置したりして完結させる仕組みになっています。
従って、管理画面の外観メニューにも「ウィジェット」という項目はありません。移行後旧テーマのウィジェットに貼っていたコードなどを呼び出すためには、一旦旧テーマへ戻すことが必要となりますので、切り替え前にメモ帳などへコードのコピーを取るようにしましょう。
【テーマ切り替え後】見出しタグなどの変換
今までのクラシックテーマでは、フロントエンドとエディタースタイルを使って半ば無理やり見出しタグにデザインを付加していたので特にブロックスタイルを使っていませんでした。
それが元で、移行したらスタイルが当たらない、フロントとバックに見出しタグそのものへスタイルを適用させるとサイトエディターや編集画面内の見出しタグにもスタイルが当たってしまうという現象が発生。
ここで使ったのが、おなじみの「Search Regex」というプラグイン。
すべての投稿タイプに対して「<h2>」などの見出しタグを検出して、「<class=”wp-block-heading is-style-head-custom”>」（is-style-head-customというクラスは「Hima Art Utility」プラグインのカスタム見出しスタイル使用時の追加クラス）へ一括変換。
ただ、ブロックエディターでは、一旦何かの追加CSSを付加した上で、デフォルトスタイルに戻すと、例えばH2タグなら「<class=”wp-block-heading is-style-default“>」という余分なクラスが付く場合もあるし、キーワードに「wp-block-heading”」を入れて初めて訪ね当たるものもあるので、これも検索して変換することを今後忘れないようにした方がよさそう。
また、「Search Regex」では、再利用ブロック（現パターン）内に対して機能してくれないので、これは個別で変更する必要がありました。まあ、全コンテンツを手作業で変更することを考えれば、ちょろいもんですね。
1点、このサイトならでは？かも知れませんが、現在の最新版「Search Regex」では、1回の置き換えですべてが書き換わるのではなく、何度か繰り返すことで全部の置き換えができたので、一度検索と置き換えをしたら、再度検索してみて、件数がなくなるのを確認することをおすすめします（そうすることで手作業で後から修正する手間が省けます）。
ショートコードの変換・カスタムフィールドの変換
【HABONE】テーマで使用できるショートコードを【Hima Art Utility】でも基本使えるようにしていたものの、いくつかのショートコードの文字列を変更する必要があったので、これも「Search Regex」で対処。
また、カスタムフィールドのキーもいくつか変更したので、「Simple Post Meta Manager」を使って変換しました。
以上、ざっと紹介してきましたが、特にブロックテーマだからということはなく、クラシックテーマ同士での移行でも似たような作業が必ず発生します。
ブロックテーマはレイアウトやスタイルの自由さがクラシックテーマとの最大の違いなので、柔軟なサイトデザインを、コードをなるべく書かずに実現したいという方は、ブロックテーマを使ってみては？
