WordPressノート クラシックテーマにおけるtheme.jsonの影響と対策 2023

はじめに

現在、WordPress の開発はブロックテーマが中心となっています。Web 制作の現場ではまだまだ従来のクラシックテーマが中心ですが、WordPress の新しい機能を使おうとすると、theme.json が必要なケースが増えてきました。

しかし、クラシックテーマに theme.json を追加すると、レイアウトが崩れることも少なくありません。theme.json の有無や設定に応じて WordPress の動作モードが切り替わり、適用される CSS や、DOM の構造が変わるためです。

この影響を把握することは、今後のクラシックテーマ制作ではとても重要です。 theme.json を追加してハイブリッド化するときはもちろん、新規作成時に機能を選択する上でも必要になります。コンテンツの表示にも影響しますので、将来、theme.json を持ったテーマに移行する際に生じる影響を把握しておくことにも つながります。

そのため、本書ではクラシックテーマをベースに「theme.json（とその設定）の有無に応じて、何が起こり、その対策はどうすればよいのか」を、実例と合わせてしっかりとまとめています。 知らずにハマると対応が大変ですが、個別の影響はシンプルです。知ってさえいれば怖いものではありません。theme.json への足がかりとして活用していただければと思います。

本書について

本書では、クラシックテーマの theme.json の有無や設定に応じて起きる影響と、その対策をまとめています。

影響

特定の条件（theme.json がある、theme.json で ○○ を設定したなど）に応じて「何が起きるか」を影響としてまとめています。

対策

影響ごとに「どうやって崩れたレイアウトを修正するか」「どうやって theme.json がなかったときの表示に近づけるか」という観点で、対策する方法をまとめています。 対策には theme.json またはエディターの UI を使用します。どちらを使っても対応できない場合はテーマの CSS を使用します。

影響が起きる条件

影響が起きる条件（トリガーとなるもの）は次のような形で示しています。

条件ごとに theme.json は以下のような設定にしています。

theme.jsonがある場合

theme.json は空のもの（最低限必要な設定だけを記述したもの）を使っています。

theme.jsonで横幅を指定した場合

theme.json は contentSize と wideSize で横幅を指定したものを使っています。

theme.jsonで間隔を有効化した場合

theme.json は blockGap で間隔を有効化したものを使っています。

theme.jsonで左右の余白を指定した場合

theme.json は padding で左右の余白を指定したものを使っています。

theme.jsonで左右の余白を全幅対応にした場合

theme.json は全幅対応にする機能 useRootPaddingAwareAlignments を有効化したものを使っています。

確認に使用するテーマ

theme.json の有無や設定の影響で、実際にどのような表示やコードになるのかは、以下のテーマを使って確認します。特に記載がない場合、確認用のテーマを使用します。 確認用のコンテンツとセットでダウンロードデータに収録していますので、必要に応じて利用してください。

確認用のテーマ

「確認用のテーマ」は、Automattic 社が制作したクラシックテーマベースの定番のスターターテーマ「_s（underscores）」から CSS を除去したものです。テーマ側でスタイリングをしていない、素の状態で theme.json の影響を確認できるクラシックテーマとして使用します。

デフォルトテーマ

「デフォルトテーマ」は、テーマ側でスタイリングしているクラシックテーマとして影響の確認に使用します。ブロックエディター（Gutenberg）の登場後にリリースされた、クラシックテーマベースの Twenty Nineteen から Twenty Twenty-One を使用します。

もくじ（影響一覧）