「コードを全部書けるようにならないといけないの？」と思った方、安心してください。
ブロックマークアップはエディターからそのままコピーできます。
大事なのは書き方の暗記ではなく、「こういう仕組みで動いている」という理解です。
ブロックテーマはどんな仕組み？
まず大前提として。ブロックテーマが「クラシックテーマと何が違うのか」を押さえておきましょう。ここさえわかれば、あとの話がぐっとスムーズになります。
PHPテンプレートで動く
header.php・single.php など、PHPファイルがテンプレートの本体。コードの知識が必要で、自作のハードルが高かった。
HTMLファイルで動く
テンプレートが .html ファイルになった。書き方さえ覚えれば、PHPなしで自作できる。
ブロックテーマのテンプレートに書くのは「PHPコード」ではなく「ブロックマークアップ」です。このマークアップの正体が、<!-- wp:paragraph --> のようなHTMLコメントです。
自作ブロックテーマは、思っているよりずっとハードルが低いです。
ブロックマークアップとは
ブロックマークアップは「どのブロックをここに置く」という指示書です。WordPressがこれを読んで、実際のHTMLを生成します。
見た目はこんな感じです。
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">ここに本文</p>
<!-- /wp:paragraph --><!-- wp:〇〇 -->
ブロックの始まりを宣言します。ここから「ブロックですよ」という合図です。
wp:paragraph
「wp:」のあとに名前を書きます。段落ならparagraph、画像ならimageとなります。
{"align":"center"}
JSON形式で「中央揃え」などの細かい設定を書き込みます。（省略もOK）
<!-- /wp:〇〇 -->
スラッシュ「/」を入れて、ブロックの終わりを宣言します。
<!-- -->（HTMLコメント）の中に書かれているので、ブラウザには表示されません。WordPressだけが読んで処理します。
ブロックマークアップの構造は「ブロックエディタで使っているブロックと1対1で対応」しています。
エディタで、
「段落ブロック」を置いたら wp:paragraph
「見出しブロック」を置いたら wp:heading になります。
基本のルール
ルールはシンプルです。「自己閉鎖型」と「囲み型」の2種類と、「属性の書き方」があります。
自己閉鎖型（中身がないブロック）
コンテンツを自分で持たず、WordPress側がデータを取得して表示するブロック。
タグの最後に / がつきます。
サイトのタイトル
<!-- wp:site-title /-->
投稿のタイトル
<!-- wp:post-title /-->
投稿日
<!-- wp:post-date /-->
投稿本文
<!-- wp:post-content /-->
アイキャッチ画像
<!-- wp:post-featured-image /-->囲み型（中身があるブロック）
開始タグと終了タグで中身を囲む形です。
終了タグにはスラッシュ /wp:○○ が入ります。
<!-- wp:paragraph -->
<p>ここに本文テキスト</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading">見出し</h2>
<!-- /wp:heading -->
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:paragraph -->
<p>グループ内の段落</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->開始タグと終了タグは必ず同じファイル内にペアで書きます。また、囲み型の中にさらにブロックを入れてネストすることもできます（グループブロックが典型例）。
属性（オプション設定）の書き方
ブロックにオプションを設定したいときは、ブロック名のあとに JSON 形式で書きます。
属性の内容は HTMLタグ側にも反映させる必要があります。
// 属性なし（シンプル）
<!-- wp:paragraph -->
<p>テキスト</p>
<!-- /wp:paragraph -->
// 属性あり（中央寄せ）
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">テキスト</p>
<!-- /wp:paragraph -->
// 属性あり（カラーパレットから色を指定）
<!-- wp:paragraph {"textColor":"vivid-red"} -->
<p class="has-vivid-red-color has-text-color">
テキスト
</p>
<!-- /wp:paragraph -->
// インラインカスタムカラー（カラーピッカーで任意の色を選んだ場合）
<!-- wp:paragraph {"style":{"color":{"text":"#ff7e7e"}}} -->
<p class="has-text-color" style="color:#ff7e7e">テキスト</p>
<!-- /wp:paragraph -->カラーパレットで定義済みの色を使うときは、HTMLタグ側にhas-{slug}-color のクラスが付きます。
カラーピッカーで任意の色を指定したときは、コメント内の属性に "style":{"color":{"text":"#ff0000"}} と記録され、HTMLタグ側にも style="color:#ff0000" が自動で付きます。
どちらも、エディタが自動生成します。
テンプレートパーツの読み込み
ヘッダーやフッターなど、別ファイルに分けたパーツを呼び出すときは wp:template-part を使います。
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->コードを「書かない」裏ワザ
実は、ブロックマークアップは「手書きしなくていい」んです。エディタで視覚的に組んでから、コードをコピーするだけ。これを知っておくと、自作テーマ制作がぐっとラクになります。
コードをコピーする方法
投稿または固定ページの編集画面を開く
テスト用のダミーページでOKです。実際に公開する必要はありません。
ブロックエディタで使いたいブロックを配置する
グループ・カラム・段落など、自由に組み立てます。色などの設定もそのままコードに反映されます。
コードを取得するには2つの方法
★ 自作テーマに組み込むなら「方法B」が確実です！
コードエディターに切り替え
右上「⋮」メニューから。全体の構造を一気に確認したい時に使います。
メニューの「コピー」を選択
ツールバーの「⋮」から「コピー」を選択。必要なコードだけを綺麗に抽出できます。
必要な部分をテンプレートファイルに貼り付ける
これだけで、手書きゼロのブロックテーマパーツが完成します！
パターンのコードを自作テーマに流用するときの注意点
同期パターン
この数字は、そのサイトのデータベースに保存された「同期パターン（旧：再利用ブロック）」のIDです。 これをそのまま別のサイトやテーマファイルに貼っても、相手側にそのIDのデータが存在しないため、何も表示されません。
✅ refを回避して中身をコピーする方法
コピーしたい「同期パターン」をエディター上で選択する
ツールバーの「⋮」→「解除」をクリックして、通常のブロックに展開する
展開されたブロックをコピーする。これでrefのない生のコードが手に入ります！
非同期パターン
自作テーマへ流用する時の「コードお掃除」
非同期パターンからコードをコピーして自作テーマのファイル（.html）に貼る時は、以下の「余分なゴミ」を削除しておきましょう。
例：
<-- wp:group {"metadata":{"categories":[],"patternName":"","name":""}} -->
正体：管理画面用のラベル情報（カテゴリーや名前）。
対策：この記述は削除してOKです。残しておくとエラーの原因になります。
目指すのは <!-- wp:group --> のような
「純粋なブロック情報」だけの状態です！
まとめ
- ブロックテーマのテンプレートは.htmlファイルで動く。PHPは不要。
- 「自己閉鎖型」と「囲み型」がある。
- 属性はブロック名のあとに JSON 形式で書く。HTMLタグ側にも反映させる。
- ブロックマークアップは手書きしなくていい。エディタで組んでコピーすればOK。
- パターンを流用するときは、同期は解除して、「余分なゴミ」を削除する。