Open9

クラシックテーマをハイブリッドテーマ(ブロックテーマ寄り)に切り替えていくメモ

ちあきちあき

クラシックテーマで作ったテーマをハイブリッドテーマに置き換えていきます。
保守範囲内での作業なので、かなり鈍足に毎月のんびりやっていきます。

ちあきちあき

経緯。

もともとは4年前に作ったサイト。
当時はもちろんブロックテーマなんて概念もなく、パターンとかもなかったので、ごりごりカスタムブロック作ってた。

ただの段落+見出しセットだけ〜とか、今だとパターンで十分事足りるものが多いので、今後も見据えてパターンに変えられるものは変えていこうと、(´ °ム° `)さんに「これ置き換えれるものは置き換えていい?」って聞いてOKが出たので、できる範囲で切り替えることに。

ちあきちあき

切り替えれるならブロックテーマに切り替えたいところではあるものの、ヘッダー・フッターとかは結構作り込みしてて保守範囲内では無理かなと判断。

この辺はそういう機会があればやるということで、メインの作業としてはいらないtheme.jsonの作成とかカスタムブロックをパターンに変えるとか、APIで代用できるものを変えるとか。カスタムフィールドをちょこちょこつかっているのでね。

ちあきちあき

ハイブリッドテーマ、エディターの項目がないから管理画面でtheme.jsonつくれない………

ちあきちあき

こういうときこそStudioの出番!!!!!Studioの環境下で適当に空テーマをつくって、theme.jsonだけつくる。

ちあきちあき

というわけでStudioの環境でCreate Block Themeから空テーマを作成

ちあきちあき

もともとのテーマで設定してたCSS変数のうち、カラーとかコンテンツ幅とかフォントとか、theme.jsonに移植できそうなものを移植していく。この時点で元のCSSは消さない。そのまま。
むしろtheme.jsonで指定した値は今の時点でCSS側に移植しない。(ゆっくり部分的にやっていくから)

ちあきちあき

こういう英語と日本語がセットになったタイトルのカスタムブロックを作ってたけど、これはグループの中に見出し+テキストのパターンで置き換えられそう

<div class="wp-block-example-block-decoration-title-title">
    <div class="wp-block-example-block-decoration-title-title__sub">Title</div>
    <h2 class="wp-block-example-block-decoration-title-title__main">タイトル</h2>
</div>