WordPressのページで、ボタンを押すと数字が変わったり、メニューが開いたりするのを見たことはありませんか。こうした動きを、自作のブロックに加えるための仕組みが「Interactivity API」です。
名前は難しそうですが、まずは「クリックなどの操作に合わせて、ページの表示を変える仕組み」と考えると分かりやすくなります。管理画面の設定だけで使う機能ではなく、HTML・PHP・JavaScriptを使って開発します。
本記事では、押すと「0」と「1」が切り替わる小さなボタンを例に、仕組みとコードの役割を紹介します。投票数を保存する本格的ないいね機能ではなく、動きの基本を学ぶためのサンプルです。
Interactivity APIでできること
Interactivity APIは、公開ページのブロックにクリックや入力に反応する動きを加える、WordPress公式の開発用の仕組みです。WordPress 6.5で本体に加わりました。
たとえば、ボタンで内容を表示・非表示にする、数値を変える、複数のブロックで同じデータを共有する、といった実装に使えます。WordPress本体の検索・ナビゲーションなどのブロックでも利用されています。
従来のJavaScriptでもこうした動きは作れます。Interactivity APIを使う利点は、状態の変化と表示の更新を、WordPress共通の書き方で結び付けられることです。採用するだけで、すべてのサイトが高速化したり検索順位が上がったりするわけではありません。
今回作るのは、保存しない「いいね」ボタン
公開側でボタンを押すと数字が0から1へ変わり、色が変化します。もう一度押すと0へ戻ります。元の記事で検証サイトに配置したときの画面が、次の画像です。
この例のデータは、ページを開いている間だけ保持します。再読み込みすると0に戻り、ほかの訪問者とも共有されません。実際の投票数を集計する機能とは別物です。
以下では公開側の最小サンプルに、編集画面からブロックを追加するための登録コードを加えた構成を紹介します。編集画面は案内文を表示し、クリックの動作は公開側のプレビューで確認する設計です。
動きを作る3つの役割
「表示するHTML」「データ」「クリック時の処理」を分けると、コードを読みやすくなります。
| 役割 | 今回の例 |
|---|---|
| HTMLの属性（ディレクティブ） | どのボタンで処理するか、数字や色をどのデータに合わせるかを指定 |
| コンテキスト | そのブロックのcount（数）とliked（押した状態）を保持 |
| ストアのアクション | クリック時にコンテキストの値を変える処理 |
「ディレクティブ」はHTMLに書く指示です。属性名は「data-wp-」で始まります。「ストア」は処理や共有データ等をまとめる場所で、この例ではボタンを押したときの処理を定義します。
| 属性 | 役割 |
|---|---|
data-wp-interactive |
使用するストアの名前空間を指定 |
data-wp-context |
その要素と子要素で使うデータを設定 |
data-wp-on--click |
クリック時の処理を指定 |
data-wp-text |
データに合わせてテキストを更新 |
data-wp-class--is-liked |
条件に応じてis-likedクラスを付け外し |
data-wp-bind--aria-pressed |
押した状態をaria-pressed属性へ反映 |
--は半角ハイフン2つです。長いダッシュに置き換えず、コードの表記どおりに記述します。
最初のHTMLはPHPで生成し、操作後の表示はJavaScriptが更新します。サーバー側で対応するディレクティブを処理できる点も特徴ですが、速度やSEOの効果は実装やページ全体の構成によります。
学習用ブロックのファイルを用意する
WordPress 6.5以上の検証サイトを使います。既存サイトへの導入前に、ローカル環境などでファイルとデータベースを復元できる状態を用意してください。
Localでの環境の作り方は、次の記事で紹介しています。
Localで新しいWordPressサイトを1つ作るのに、入力するのはサイト名とユーザー名、パスワードの3つだけです。あとは「Continue」を3回押し、「Add Site」を押せば、自分のパソコンの中でWordPressが動き始めます。 サーバーやドメインの契約はいりません。テーマやプラグイン...
「tcd-learning-like-button」というフォルダに、次の8ファイルを入れます。コードをコピーするときは、PHPファイルの先頭に余分な文字を入れず、拡張子も確認してください。
tcd-learning-like-button/
├── tcd-learning-like-button.php
├── block.json
├── render.php
├── view.js
├── view.asset.php
├── editor.js
├── editor.asset.php
└── style.css1. プラグイン本体とブロックの設定
tcd-learning-like-button.phpは、フォルダ内の設定ファイルからブロックを登録します。
<?php
/**
* Plugin Name: TCD Learning Like Button
* Description: Interactivity API のサンプル。押すとカウントが増減する「いいね」ボタンのブロックです。
* Version: 1.0.0
* Requires at least: 6.5
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
add_action( 'init', 'tcd_learning_like_button_register_block' );
function tcd_learning_like_button_register_block() {
register_block_type( __DIR__ );
}block.jsonでは、ブロック名、公開側の出力、編集用JavaScript、公開側のJavaScriptモジュール、CSSを指定します。
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "tcd-learning/like-button",
"title": "いいねボタン",
"category": "widgets",
"supports": {
"interactivity": true,
"html": false
},
"render": "file:./render.php",
"viewScriptModule": "file:./view.js",
"style": "file:./style.css",
"editorScript": "file:./editor.js"
}
editorScriptは編集画面向け、viewScriptModuleは公開側向けです。編集画面と公開ページで、同じJavaScriptを動かす構成ではありません。
2. 公開側のHTMLと初期データ
render.phpで、ブロックごとにcountを0、likedをfalseとして始めます。
<?php
$context = array(
'count' => 0,
'liked' => false,
);
?>
<div
<?php echo get_block_wrapper_attributes(); ?>
data-wp-interactive="tcdLearningLikeButton"
<?php echo wp_interactivity_data_wp_context( $context ); ?>
>
<button
type="button"
class="like-button"
data-wp-on--click="actions.toggle"
data-wp-class--is-liked="context.liked"
data-wp-bind--aria-pressed="context.liked"
>
いいね <span data-wp-text="context.count"></span>
</button>
</div>ボタンを押すとactions.toggleが呼ばれます。数字はcontext.count、色と押下状態はcontext.likedに対応しています。コンテキストをブロックごとに分けることで、複数置いた場合もそれぞれの状態を扱う構成です。
3. クリック時の処理と依存モジュール
view.jsは、公開側のボタンを押したときの処理です。
import { store, getContext } from '@wordpress/interactivity';
store( 'tcdLearningLikeButton', {
actions: {
toggle() {
const context = getContext();
context.liked = ! context.liked;
context.count += context.liked ? 1 : -1;
},
},
} );getContext()で対象のデータを取得し、likedを反転してcountを増減します。データを変えると、HTML側のディレクティブに対応した表示が更新されます。
view.asset.phpでは、利用するモジュールを指定します。
<?php
return array(
'dependencies' => array( '@wordpress/interactivity' ),
'version' => '1.0.0',
);4. 編集画面から追加するための登録
editor.jsは、ブロックエディターに「いいねボタン（学習用）」を登録します。今回は編集画面で動くボタンを再現せず、案内文を表示します。
(function (blocks, element, blockEditor) {
blocks.registerBlockType('tcd-learning/like-button', {
apiVersion: 3,
title: 'いいねボタン（学習用）',
category: 'widgets',
supports: { html: false, interactivity: true },
edit: function () {
return element.createElement(
'div',
blockEditor.useBlockProps(),
'いいねボタン：動作はプレビューで確認します。'
);
},
save: function () { return null; }
});
})(window.wp.blocks, window.wp.element, window.wp.blockEditor);
editor.asset.phpでは、この編集用コードが利用するWordPressのスクリプトを指定します。
<?php
return array(
'dependencies' => array( 'wp-blocks', 'wp-element', 'wp-block-editor' ),
'version' => '1.0.0',
);
PHPとJavaScriptのブロック名は、どちらもtcd-learning/like-buttonに揃えます。ストアの名前空間tcdLearningLikeButtonも、render.phpとview.jsで一致させます。
5. ボタンの見た目を整える
style.cssは、通常時と押した後の色を指定します。
.wp-block-tcd-learning-like-button .like-button {
padding: 10px 24px;
border: 2px solid #e2264d;
border-radius: 999px;
background: #fff;
color: #e2264d;
font-size: 16px;
cursor: pointer;
}
.wp-block-tcd-learning-like-button .like-button.is-liked {
background: #e2264d;
color: #fff;
}プラグインを有効化し、プレビューで確認する
フォルダをzip形式に圧縮し、検証サイトの「プラグインを追加」→「プラグインのアップロード」からインストールして有効化します。
ブロックエディターで投稿を開き、追加ボタンから「いいねボタン（学習用）」を検索して配置します。編集画面には案内文が表示される設計です。保存して公開側のプレビューを開き、動作を確認してください。クラシックエディター向けの追加ボタンではありません。
確認する項目は次のとおりです。
- 最初は「いいね 0」で表示されるか
- 1回押すと1になり、色とaria-pressedの値が変わるか
- もう1回押すと0へ戻るか
- 再読み込みすると0へ戻るか
- 2つ置いた場合、片方の操作がもう片方に影響しないか
- キーボードでも操作でき、フォーカスの位置が分かるか
既存の公開側サンプルでは、0と1の切り替え、色の変化、初期HTMLへの数値出力を確認しました。今回追加した編集用登録コードを含む8ファイル構成は、検証サイトへのアップロードが完了していないため、実機確認は未完了です。
継続して開発するなら公式のひな形を使う
ファイルが増える開発では、WordPress公式のcreate-blockでひな形を作る方法があります。Interactivity API用テンプレートを指定すると、編集用コードやビルド環境を含む構成から始められます。
npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template続いて、生成されたフォルダへ移動し、開発用のビルドを起動します。
cd my-first-interactive-block
npm start最新のcreate-blockが要求するNode.jsのバージョンも、公式ページで確認してください。2026年10月25日確認時点では22.13.0以上と案内されています。生成されるファイルや必要条件は、ツールの更新により変わります。
create-blockはパソコン上でプラグインを生成するツールで、WordPress内の作業を行うWP-CLIとは別です。LocalのSite shellでできる操作については、次の記事で解説しています。
WordPressでプラグインを入れたり、テスト用の記事を増やしたりするとき、管理画面で同じ操作を何度も繰り返すことはありませんか。 そんな作業を、短い命令文でまとめて進められるのが「WP-CLI」です。「コマンド」と聞くと難しく感じるかもしれませんが、Localで作ったテストサイトがあれば、...
実用的ないいね機能にするには、保存処理が必要
今回のボタンは、ブラウザ内の表示を変える学習用です。訪問者の投票を集計したい場合は、サーバーへの保存、対象記事の識別、重複投票の扱い、入力の検証などを別途設計します。
Interactivity APIは表示と操作をつなぐ仕組みであり、データベースへの保存や不正操作対策を自動で用意するものではありません。まず小さな表示切り替えを理解し、その後に保存機能を分けて考えると、役割を整理しやすくなります。
まとめ
Interactivity APIでは、HTMLの指示とJavaScriptの処理をつなぎ、データの変化に応じてブロックの表示を更新します。今回の例では、ボタンを押すことでコンテキストの値を変え、数字と色へ反映します。
最初から投票の集計機能まで作ろうとせず、「押すと変わる」「戻せる」「再読み込みすると初期値になる」という小さな動きから確認しましょう。公開側の処理と、ブロックエディターへ追加するための処理を分けて理解することも大切です。
WordPressテーマ集
コメント