WordPressでアコーディオンメニューやライブ検索、絞り込みフィルター、さらにカスタムフィールド（投稿メタデータ）と連動した商品・イベントページを作る際、これまでは「jQueryプラグインの追加」や「独自ショートコード・PHPテンプレートの記述」が一般的でした。しかし近年、WordPressコアに標準搭載された「Interactivity API（インタラクティビティAPI）」と「Block Bindings API（ブロックバインディングAPI）」の進化によって、サイトのフロントエンド設計が大きく変わりつつあります。

この2つの標準APIを活用すると、外部の巨大なJavaScriptフレームワークを読み込むことなく、ページ遷移なしの軽快な画面操作と、ブロックエディタ上での直感的な動的データ連携を同時に実現できます。本記事では、両APIの役割と動作の仕組み、そしてCore Web Vitals（特にINPやLCP）の改善につながる理由を図解とともに整理します。

従来のフロントエンド構築が抱えていた課題と2つのコアAPI

これまでWordPressサイトに動きのあるUI（開閉式FAQ、モーダルウィンドウ、タブ切り替え、非同期ページネーションなど）を実装する場合、テーマや各プラグインが個別にjQueryや独自のJavaScriptライブラリを読み込む構成が多く採用されてきました。また、カスタムフィールドの値を画面に出力する場面では、本文中にショートコードを埋め込むか、専用のカスタムブロックをゼロからReactで開発する必要がありました。

従来の方式では、プラグインが増えるたびにスクリプトの重複読み込みやDOM操作の競合が発生し、ページの応答速度（INP：Interaction to Next Paint）が低下しやすいという課題がありました。さらに、ショートコードはブロックエディタ上で実際のデータや見た目を確認しづらく、運用担当者が誤ってタグを消してしまうリスクも伴います。

こうした課題をWordPress本体の標準機能として解決するために導入されたのが、フロントエンドの動的な振る舞いを統一規格で制御するInteractivity APIと、ブロックの属性に外部データを結びつけるBlock Bindings APIです。

Interactivity APIとは？HTML属性で宣言するリアクティブUI

Interactivity APIは、WordPress 6.5でコアに統合されて以降、継続的に機能拡張が進められているフロントエンド向けの標準フレームワークです。最大の特徴は、複雑なDOM操作コードを記述する代わりに、HTMLタグへ「ディレクティブ（data-wp-* 属性）」を追加する宣言的な記述スタイルを採用している点にあります。

HTMLタグに付与する4つの主要ディレクティブ

Interactivity APIでは、主に以下のHTML属性を組み合わせて画面の動作を定義します。

最小構成のコードイメージ

たとえば、ボタンをクリックするたびに詳細エリアの表示・非表示を切り替えるUIは、PHP（ブロックのレンダーテンプレート）と数行のJavaScriptストア定義だけで簡潔に記述できます。

<!-- ブロック出力側のHTML（render.php） -->
<div
  data-wp-interactive="myTheme/faq"
  data-wp-context='{"isOpen": false}'
>
  <button
    data-wp-on--click="actions.toggle"
    data-wp-bind--aria-expanded="context.isOpen"
  >
    回答を表示する
  </button>

  <div data-wp-bind--hidden="!context.isOpen">
    <p>ここにFAQの回答テキストが表示されます。</p>
  </div>
</div>

// フロントエンド側のJavaScript（view.js）
import { store, getContext } from '@wordpress/interactivity';

store( 'myTheme/faq', {
  actions: {
    toggle() {
      const context = getContext();
      context.isOpen = ! context.isOpen;
    },
  },
} );

このように、「どの要素を書き換えるか」を手続き的に探すのではなく、「状態（context.isOpen）が変われば表示も自動的に切り替わる」という仕組みになっているため、コードの見通しが良く、保守性も高まります。

Block Bindings APIとは？標準ブロックと動的データの直結

もうひとつの柱であるBlock Bindings APIは、WordPressの標準ブロック（段落、見出し、画像、ボタンなど）の属性に対し、カスタムフィールド（投稿メタデータ）や独自データソースの値を直接バインド（紐付け）する仕組みです。

専用カスタムブロック開発やショートコードが不要になる

これまでは「商品の価格」「イベントの開催日」「物件の所在地」「申し込みページのURL」といったカスタムフィールドの値をデザインされたレイアウト内に配置したい場合、ショートコードを使うか、専用ブロックを開発する必要がありました。

Block Bindings APIを使うと、標準の「段落ブロック」のテキスト内容や、「ボタンブロック」のリンク先URL、「画像ブロック」の参照元URLを、指定したカスタムフィールド（core/post-meta）へ直接結びつけることができます。しかも、近年のアップデートによってブロックエディタ上のUIからもバインディング設定や値の直接編集が行えるようになり、テンプレート制作と日々の記事運用の双方で手間が大幅に減っています。

ブロックマークアップでのバインディング記述例

ブロックテンプレートやパターン内で段落ブロックにカスタムフィールド（例：event_date）を紐付ける場合、ブロックコメント内のmetadata属性にbindingsオブジェクトを指定します。

<!-- wp:paragraph {
  "metadata": {
    "bindings": {
      "content": {
        "source": "core/post-meta",
        "args": {
          "key": "event_date"
        }
      }
    }
  }
} -->
<p>開催日程がここに表示されます</p>
<!-- /wp:paragraph -->

これにより、編集者は使い慣れた標準の段落ブロックや見出しブロックの装飾機能（文字サイズ、配色、余白設定など）をそのまま活かしつつ、中身のデータだけを動的に差し替えることができます。

Core Web Vitals（INP・LCP）とSEOに好影響を与える理由

Interactivity APIとBlock Bindings APIの組み合わせは、開発効率だけでなく、Googleが重視するページ体験指標（Core Web Vitals）の改善にも直結します。

• サーバーサイド描画（SSR）による高速な初期表示：Interactivity APIおよびBlock Bindings APIは、まずPHP側で初期状態のHTMLを生成してからブラウザへ返します。クライアント側で白紙から描画する方式と比べてLCP（最大視覚コンテンツの表示時間）が速く、読み込み時の画面のガタつき（CLS）も抑えられます。
• Preact Signalsベースによる高速なクリック応答（INP改善）：Interactivity APIの内部エンジンには軽量なPreactとSignalsの仕組みが採用されており、状態が変化した際にページ全体を再描画せず、該当するDOM属性やテキストだけをピンポイントで更新します。そのためメインスレッドの負荷が小さく、INP（操作に対する次の描画までの時間）を良好に保ちやすくなります。
• Script Modules対応によるスクリプト読み込みの最適化：標準のScript Modules APIと連携し、必要なブロックがページ内に存在するときだけ対応スクリプトを非同期モジュールとして読み込むため、不要なJavaScriptによる通信量の増加を防げます。

まとめ：標準APIを軸にしたシンプルで息の長いサイト設計へ

WordPressの「Interactivity API」と「Block Bindings API」は、これまで外部プラグインや独自スクリプトで個別に補っていた「フロントエンドの動的UI」と「カスタムフィールドのブロック連携」を、コアの標準機能へと統合する重要な基盤です。

テーマのリニューアルや新規ブロックパターンの作成を行う際は、まずこの2つの標準APIで要件を満たせるかを検討することで、プラグイン依存の少ない軽量で管理しやすいWordPressサイトを構築できます。