WordPressへのフルサイト編集（FSE）の導入は、theme.jsonの重要性の高まりを示唆しています。このファイルには、デザインの構築に役立つさまざまなプロパティに加えて、理解しておきたい階層と構造があります。今回取り上げるblocksプロパティは、独自のブロックを作成して柔軟でおしゃれなWordPressテーマを開発したい場合には見逃せません。
この記事ではtheme.jsonのblocksプロパティを詳しく掘り下げ、ブロックの編集、デザイン、スタイリングを通じて、より動的でカスタマイズ性に優れたWordPress体験を実現する方法をご紹介します。
theme.jsonのblocksプロパティを理解する
blocksプロパティの複雑な説明に入る前に、まずはtheme.jsonとWordPressテーマ開発における役割をご紹介します。
theme.jsonファイルとは、テーマ全体のスタイルと設定を定義するための設定ファイルです。タイポグラフィ、色、レイアウトなど、テーマの外観と動作のさまざまな側面を制御する「ハブ」になります。
blocksプロパティを使用することで、サイト全体の外観を微調整するだけでなく、個々のブロックタイプをきめ細かく制御することも可能になります。特定のブロックに対してデフォルトのスタイル、設定、動作を定義し、テーマ全体の一貫性とサイト所有者側の柔軟性を確保することができます。
フルサイト編集におけるblocksプロパティ
フルサイト編集は、より視覚的にサイトを構築するブロックベースのアプローチです。フロントエンドでは、サイト全体のほぼすべてのスタイリングやカスタマイズを行うことができます。
blocksプロパティは、以下のような特徴からtheme.jsonファイルの重要な要素になります。
- ブロックのスタイルと設定を定義するための標準化された方法を提供
- 自動的にまとまりのあるデザインシステムを構築
- カスタムCSSなしでブロックの外観をより細かく制御
- ブロックのパターンやテンプレートの作成を支援
開発者は、blocksプロパティを利用して、フルサイト編集をフル活用したテーマを作成することができます。
blocksプロパティの作成方法（＋構文）
blocksプロパティが提供する標準化は、データの構造と構文の整理に役立ちます。このプロパティは、settingsオブジェクトの中に含めます。
{
"version": 3,
"settings": {
"blocks": {
"core/paragraph": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "13px"
},
{
"name": "Medium",
"slug": "medium",
"size": "20px"
}
]
…上記は、段落ブロックの独自の文字サイズを定義する例です。構成要素は以下のとおり。
settingsオブジェクトの下にblocksプロパティをネスト- ブロック別の名前空間と名前（
core/paragraph） - オブジェクトの中でブロックの設定を指定
タイポグラフィ、色、間隔など、グローバルスタイルのほぼすべての要素を調整可能です。
グローバルブロックの設定
グローバルブロックの設定を定義する方法をご紹介してから、blocksプロパティにこれがどのように影響するかを見ていきましょう。これにより、テーマ全体で一貫したデザインの基盤を確立することができます。
{
"version": 3,
"settings": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "13px"
},
{
"name": "Medium",
"slug": "medium",
"size": "20px"
}
…例として、すべてのブロックで利用可能なグローバルフォントサイズを定義してみます。WordPressサイトエディターで「タイポグラフィ」＞「要素」＞「テキスト」に移動します。
theme.json内で定義した各フォントサイズは、このエリアにあるサイズ設定オプションのいずれかと紐づいています。
もちろん、テーマのカスタマイズ方法は他にも多数ありますが、ここで目指すのは、8割程度の用途をカバーする一般的なデザインの作成です。
blocksプロパティを使用することで、コアブロックのスタイルを上書きして残りの2割を埋めることができます。サイトエディター内の「スタイル」パネルで各ブロックのデザイン設定を編集することも可能です。
これはエンドユーザーにとっては画期的な機能ですが、開発者にとってはあまりメリットがありません。この記事では、あくまでtheme.jsonを使ってblocksプロパティを操作することに焦点を当てます。
個々のブロックタイプのカスタマイズ方法
一貫性を保つためのグローバル設定が重要である一方で、あらゆるカスタマイズを実現するblocksプロパティには大きな可能性があります。きめ細かな制御により、サイトエディターと同じように、特定のブロックの外観や動作をテーマのデザインに合わせて調整することができます。
以下は、テーマの見出しブロックをカスタマイズする例です。
{
"version": 3,
"settings": {
"blocks": {
"core/heading": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "20px"
},
{
"name": "Medium",
"slug": "medium",
"size": "30px"
},
{
"name": "Large",
"slug": "large",
"size": "40px"
}
],
"fontWeight": "bold"
},
"color": {
"palette": [
{
"name": "Heading Primary",
"slug": "heading-primary",
"color": "#333333"
},
{
"name": "Heading Secondary",
"slug": "heading-secondary",
"color": "#666666"
}
]
…各属性が全体の変更をどのように行うかを示しています。詳細は以下のとおりです。
- 見出しに特定のフォントサイズを定義し、サイズラベルに割り当て
- すべての見出しのフォントを太字に
- すべての見出しにはカスタムカラーパレットを設定
これにより、見出しがサイト全体を通じて一貫した見栄えになり、デザインの調整方法がわからないエンドユーザーの体験も向上します。
正しい名前空間とスラッグの組み合わせ
ブロックタイプを呼び出す際には、正しい名前空間とスラッグの組み合わせを使用することが非常に重要です。組み合わせが正しくない場合、ブロックに変更を適用することができません。
各ブロックには名前空間とスラッグがあり、WordPressのコアブロックは通常、coreという名前空間を持ちます。スラッグはブロック名に当たります。
…
"blocks": {
"core/image": {
…ブロックのスラッグは、wp-includes/blocksディレクトリ内にあるblock.jsonファイルで確認できます。このディレクトリにはさまざまなフォルダが格納されており、それぞれにblock.jsonファイルが含まれています。各ファイルの上部付近にブロックの名前空間とスラッグが記載されているはずです。
wp-includesディレクトリには、theme.jsonファイルが格納されています。
theme.jsonにカスタマイズされたブロック設定が含まれる理由
theme.jsonは、WordPress固有の設定ファイルであり、テーマ設定の管理を行うものですが、テーマそのものではありません。新たな機能や設定を追加する際に、古いバージョンのWordPressを使用しているユーザーが問題なく使えるようにする目的があります。
例えば、ボタンブロックはボーダー半径（角の丸み）を設定します。
…
"blocks": {
"core/button": {
"border": {
"radius": true
}
},
…他のブロックにも同じ設定があり、異なるWordPressバージョン間での一貫性を保つことができます。しかし、しばらくしてこれが問題を引き起こすことも。
グローバル設定を定義して、変更が特定のブロックに適用されない場合、後方互換性が原因になっている可能性があります。これらの設定は、もちろんtheme.jsonファイルで上書き可能です。
theme.jsonを使ったカスタムブロック開発
theme.jsonファイルは、既存のブロックをカスタマイズするのに適していますが、カスタムブロック開発にも応用でき、カスタムブロックのデフォルトスタイルや設定を定義することができます。これにより、テーマのデザインとシームレスに統合された体験を提供可能です。
まずは、ブロック自体の構築が必要になります。今回は掘り下げませんが、簡単には以下の手順になります。
- ブロックのひな形作成：ロ ーカル開発環境を構築し、ブロック全体のファイル構造を作成する。
block.jsonファイルの更新：ブロックのIDの変更やサポートの追加（WordPressの特定機能のサポー トを宣言）が必要。整列の処理やアンカー項目、タイポグラフィ設定など。- ブロックのJavaScriptファイルの微調整：
index.jsとedit.jsの両方にコードを追加し、ブロックの動作をWordPressに指示し、サイトエディターに表示させるようにする。
他にもrender.phpを編集したり、 静的レンダリングを実装したりなどの作業が必要になる可能性があります。この時点で他のブロックと同様、theme.jsonに任意の文体変更を適用可能です。以下、block.jsonを詳しく見ていきます。
block.jsonファイル
このファイルは、サーバーサイド（バックエンド）とクライアントサイド（フロントエンド）の両方でブロックを登録するために使用され、WordPressの開発チームが「標準的」としている方法です。このファイルに記述するメタデータを元に、WordPressがブロックの種類とそれをサポートするファイルを把握します。
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "my-plugin/notice",
"title": "Notice",
"category": "text",
"parent": [ "core/group" ],
"icon": "star",
"description": "警告、エラー、または成功の通知を表示...",
"keywords": [ "alert", "message" ],
"version": "1.0.3",
"textdomain": "my-plugin",
"attributes": {
"message": {
"type": "string",
"source": "html",
"selector": ".message"
}
},
…テーマやプラグインのPHPファイルの先頭に置くメタデータに似ています。このファイルはJSONデータのみを使用しますが、PHP、JavaScript、CSSを通してコードを共有可能です。
…
"editorScript": "file:./index.js",
"script": "file:./script.js",
"viewScript": [ "file:./view.js", "example-shared-view-script" ],
"editorStyle": "file:./index.css",
"style": [ "file:./style.css", "example-shared-style" ],
"viewStyle": [ "file:./view.css", "example-view-style" ],
"render": "file:./render.php"
…これについては後ほど、バリエーションのセクションでご説明します。最後に、カスタムブロックをWordPressのデフォルトとして設定します。カスタム投稿タイプを登録してそこにブロックを含めることが一般的な方法ですが、他にもいくつか方法があります。
例えば、既存の投稿タイプを更新してブロックテンプレートを追加することもできます。以下は簡単な例です。
…
function load_post_type_patterns() {
// 投稿タイプ HypnoToad の初期パターンを定義
$post_type_object = get_post_type_object( 'hypnoToad' );
$post_type_object->template = array(
array(
'core/block',
…別の方法として、default_contentフックを呼び出し、マークアップを使ってブロックを定義することも可能です。
function toad_content( $content, $post ) {
if ( $post->post_type === 'hypnoToad' ) {
$content ='
<div class="is-layout-flex wp-container-1 wp-block-columns"><!-- wp:column →
<div class="wp-block-column">
<p></p>
</div>
<div class="is-layout-flow wp-block-column">
<p></p>
</div>
</div>
';
}
return $content;
}
add_filter( 'default_content', 'toad_content', 10, 2 );もちろん、JSONやHTML、PHPだけでなく、デザインやインタラクティビティの強化に他の言語を使用することも。幸いWordPressでは簡単に実現可能です。
ブロックにカスタムCSSプロパティを使用する方法
theme.jsonの既存のプロパティ、属性、オブジェクトを使えば、多くのことを実行できますが、すべての用途をカバーできるわけではありません。このファイルには、関連するCSSプロパティを作成に役立つcustomプロパティがあります。
{
"version": 3,
"settings": {
"custom": {
"toad": "hypno"
}
}
}この例では、キーと値のペアがフロントエンドでCSS変数に変換されます。
body {
--wp--custom--toad: hypno;
}なお、変数はダブルハイフン（–）で要素を区切ります。一般的に、--wp--custom--は常に表示され、最後にキーがタグ付けされます。変数やプロパティをキャメルケース（例：hypnoToad）で定義することもあります。
{
"version": 3,
"settings": {
"custom": {
"hypnoToad": "active"
}
}
}この場合、WordPressはハイフン（-）で単語を区切ります。
body {
--wp--custom--hypno-toad: active;
}このように、customプロパティとblock.jsonを使用すれば、思い通りにブロックを設計、カスタマイズすることができます。
ブロック、スタイル、ブロックスタイルのバリエーションの概要
blocksプロパティを使ったスタイル設定に進む前に、バリエシーションについて触れておきます。デザインには複数のバリエーションタイプがあり、命名規則によって、要件に合わないタイプを使用してしまう可能性があります。各バリエーションの違いは以下のとおりです。
- ブロックバリエーション：ブロックに代替バージョンがある場合（ユーザーが設定したカスタムリンクを多数表示するブロックなど）は、「ブロックのバリエーション」と呼ばれる。SNSブロックなどが代表例。
- スタイルバリエーション：サイト全体で動作する
theme.jsonの別バージョン。大体のブロックテーマは複数のカラーパレットやタイポグラフィ設定のためにこれを提供している。 - ブロックスタイルバリエーション：スタイルバリエーションの中核機能を利用して、ブロックの代替デザインを作成えきるようにしたもの。
ブロックバリエーションとブロックスタイルバリエーションのどちらを使用するかに迷った場合のヒントとして、theme.jsonまたはCSSを使って行える変更には後者を作成してください。それ以外の場合は、前者が必要になります。
ブロックバリエーション
ブロックバリエーションは、JavaScriptを使って登録します。テーマのディレクトリ内にファイルを作成することが推奨されますが、どこにでも配置可能です。JavaScriptファイル内に以下の1行を加えます。
const registerBlockVariation = ( blockName, variation )blockNameについては、blocksプロパティと同じように、名前空間を指定する必要があります。variationオブジェクトの中に、名前、タイトル、説明、バリエーションをデフォルトで有効にするかなどの情報を追加します。サイトエディターでファイルを読み込むには、enqueue_block_editor_assetsフックを呼び出し、その中でスクリプトをエンキューするだけでOKです。
ブロックスタイルバリエーション
ブロックスタイルバリエーションに関しては、以下の2つの方法があります。
- PHPで
register_block_style()を使用する - JavaScriptファイル
block-editor.jsを作成し、ブロックバリエーションと同様にregisterBlockStyle()を使用してスクリプトをエンキューする
ブロックスタイルバリエーションを登録すると、variationsプロパティを用いてブロックをターゲットすることができます。
…
"styles": {
"blocks": {
"core/button": {
"variations": {
"outline": {
"border": {
"color": "var:preset|color|black",
"radius": "0",
"style": "solid",
"width": "3px"
},
…blocksプロパティを通じて、ほぼすべてのブロックデザインの側面を設定できます。
blocksプロパティでデフォルトブロックをカスタマイズする方法
ここからは、例を挙げてblocksプロパティの動作を見ていきます。以下のTwenty Twenty-Fourテーマを使用したサイトでは、デフォルトのスタイルバリエーションを使用しています。
すでにバランスの取れた良いデザインになっていますが、見出しと本文のテキストの色を変えて、差別化したいとします。これは、サイトエディターのスタイルパネルで変更可能です。「ブロック」＞「見出し」と進み、「テキスト」要素をクリックして、色を変更します。
開発者であれば、theme.jsonファイルで実行可能です。他のテーマと同じように子テーマを作成し、加えた変更を保持するのがベストです。theme.jsonファイルは見た目がすっきりしていて、扱いやすいのも利点です。
wp-content/themes/内にディレクトリを作成し、名前をつけて（この例ではtwentytwentyfour-child）、有効なstyle.css ファイルと空のtheme.jsonファイルを追加します。
次にJSONファイルを開いて、作業に取り掛かります。
子テーマ用のtheme.jsonの作成と入力
theme.jsonに関して、親テーマと子テーマを作成する際の主な違いは、ファイルの構造にあります。スキーマを記述する必要はなく、必ずしもすべてをsettingsオブジェクト内に記述する必要もありません。この例では、stylesプロパティを使用します。
{
"version": 3,
"styles": {
"blocks": {}
}
}続いて、見出しブロックの名前空間とスラッグを見つけます。これはWordPress公式のコアブロックガイドで確認でき、各ブロックが対応している属性やプロパティについても解説されています。例えば、colorプロパティに対して、background、gradient、link、textの値を調整できます。
"blocks": {
"core/heading": {
"color": {}
}
}構造が完成したら、テキストのスタイルを調整します。
配色を見つけて変更を加える
Twenty Twenty-Fourのデフォルトバリエーションには優れたカラーパレットがあり、コントラストチェッカーを使いながらインスピレーションを得ることができます。
ブロックの色を選択したら、theme.jsonファイルに追加します。親テーマのTwenty Twenty-FourはカスタムCSSプロパティを使ってパレットスタイルを定義しているため、これを呼び出します。
…
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" },
…パレットカラーの名前は、サイトエディターのカラーピッカーから確認できます。
変更を保存してサイトを更新すると、変更が適用されているはずです。適用されていない場合は、blocksプロパティが正しいオブジェクトの中にネストされているかを確認します。
サイトを確認すると、テキストのコントラストが低くなり、読みやすくなりましたが、段落ブロックと周辺の見出しはもう少し調整したいところ。テーマのデフォルトパレットには、他にも大胆な色がいくつかあります。見出しブロックにアクセントカラーの3番を試してみます。
"blocks": {
"core/heading": {
"color": { "text": "var(--wp--preset--color--accent-3)" }
},
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" }
}
}変更を保存してフロントエンドを更新すると、見出しブロックがより鮮明になりました。
これで編集を終えることもできますが、theme.jsonからサイトエディターのオプションをカスタマイズすることも可能です。
ブロックへの属性オプションの追加
各ブロックのサポートに応じて、サイトエディター内のオプションが決まります。例えば、段落ブロックはデフォルトでドロップキャップ（段落の最初の文字を大きくする）機能が無効になっています。
しかしtheme.jsonファイルとblocksプロパティを使用すれば、有効化することができます。以下のようにtypographyプロパティを使ってドロップキャップを有効にします。
…
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" },
"typography": { "dropCap": true }
…変更を保存してエディターを更新すると、ドロップキャップを切り替える設定が出現します。
theme.jsonファイルは、単にデザインを調整するだけでなく、サイトエディターの機能の拡張や無効化も行うことができます。
WordPressテーマ開発を支援するKinstaのマネージドホスティング
テーマ開発とtheme.jsonの複雑さは、開発プロセス全体にわたって質の高いソリューションに依存します。優れたソリューションを利用することで、パフォーマンス向上の可能性を最大限に活かすことができます。
ローカルの開発環境は非常に重要な役割を果たし、ローカルマシン上でWordPressサイトを作成、管理、および編集することができます。Kinstaでは、誰でも無料で利用できるローカル開発環境ツールのDevKinstaを提供しています。
DevKinstaには以下のような利点があります。
- Dockerコンテナ上で動作するため、マシンの他の部分からインストールを分離可能。これにより、
theme.jsonの設定やカスタムブロックを安全にテストできる。 theme.jsonファイルを素早く修正して、ローカル環境ですぐに結果を確認できる。- 複数のローカルサイトを作成し、WordPressのバージョンや設定を変えてテーマをテストするのも容易。
また、サーバーリソースを消費することなく、満足いくまでテストや開発を行うことができます。次に役立つのがKinstaのステージング環境で、本番サイトを素早く複製し、ローカル環境にプルダウンして作業を続けることも可能です。
ステージング環境をKinstaのアプリケーションパフォーマンス監視（APM）ツールと組み合わせれば、さらにテーマのパフォーマンステストを実施できます。
また、すべての環境にKinstaのGit統合を利用すれば、変更をリポジトリにプッシュまたはプルして効率的にデプロイすることも可能です。
まとめ
theme.jsonのblocksプロパティを理解することは、テーマ開発者が避けて通れないステップです。上手に活用することで、サイト全体のデザインにこだわり、統一感のある質の高いものに仕上げることができます。個々のコアブロックやカスタムブロックの設定を最大限に利用することで、フルサイト編集の恩恵を受けることができ、さらにサイトエディターでも利用できるようにすることで、ユーザーがノーコードで変更を加えることも可能になります。
コメントを残す