【WordPress】カスタムブロックに動的データを表示する方法（Block API活用）

【WordPress】カスタムブロックに動的データを表示する方法（Block API活用） WordPress
2025.06.10

WordPressのブロックエディタ（Gutenberg）では、静的なコンテンツだけでなく、PHPで処理した動的なデータをブロック内に表示することも可能です。この記事では、Block APIのrender_callbackを活用して、投稿情報やカスタムフィールド、外部APIから取得したデータをブロックに埋め込む方法を解説します。

スポンサーリンク

サーバーサイドレンダリングとは

通常のGutenbergブロックはJavaScriptでレンダリングされる「静的ブロック」ですが、サーバーサイドレンダリングを活用すると、PHPで処理した内容をそのままブロックとして出力できます。これにより、最新の投稿情報やカスタムフィールドの値など、リアルタイムに変化する情報も扱えます。

ブロックの登録処理（PHP側）

以下のように、register_block_type()関数を使ってPHP側でブロックを登録し、render_callbackを指定します。

functions.php：ブロックの登録と動的レンダリング
// functions.php またはプラグインファイル内
function register_dynamic_block() {
  register_block_type( __DIR__ . '/my-block', array(
    'render_callback' => 'render_dynamic_block',
  ));
}
add_action( 'init', 'register_dynamic_block' );

function render_dynamic_block( $attributes, $content ) {
  $latest_post = get_posts( array(
    'numberposts' => 1,
    'post_type'   => 'post'
  ) );

  if ( empty( $latest_post ) ) return '<p>投稿が見つかりませんでした。</p>';

  $post = $latest_post[0];
  $title = esc_html( $post->post_title );
  $link = esc_url( get_permalink( $post->ID ) );

  return "<div class='latest-post'><a href='{$link}'>最新記事: {$title}</a></div>";
}

URLを出力する箇所では、取得元がWordPress内部の関数であってもesc_url()でエスケープしておくのが安全です。

ブロックのメタ情報とJSファイル

my-block/block.jsonには以下のように記述します。editorScriptは必要に応じてエディターUIを設定しますが、出力はPHPで行われます。

my-block/block.json
{
  "apiVersion": 3,
  "name": "mytheme/dynamic-latest-post",
  "title": "最新記事（動的）",
  "category": "widgets",
  "icon": "megaphone",
  "description": "最新の投稿タイトルを動的に表示します。",
  "editorScript": "file:./index.js",
  "supports": {
    "html": false
  }
}

JavaScript側の最小コード

index.jsでは、特別なUIを設けない場合、registerBlockType()で空のedit関数とsave: nullを定義します。

my-block/index.js
import { registerBlockType } from '@wordpress/blocks';

registerBlockType('mytheme/dynamic-latest-post', {
  edit: () => {
    return '最新記事を表示（フロントで確認）';
  },
  save: () => null, // サーバー側で出力するためJSでは保存しない
});

出力結果の例

ブロックを設置したページをフロントエンドで表示すると、以下のように動的な内容が出力されます。

出力されるHTML
<div class="latest-post">
  <a href="https://example.com/post-slug">最新記事: サンプル記事タイトル</a>
</div>

よくある質問（FAQ）

QDynamic BlockでPHPからデータを取得して表示するには？
Aregister_block_type()のrender_callback引数にPHPコールバック関数を指定します。この関数内でWP_Queryやget_posts()でデータを取得してHTMLを返します。save関数はnullを返します。
QBlock APIでブロックの属性を定義・保存する方法は？
Ablock.jsonのattributes項目に型と初期値を定義します。エディター側はuseBlockProps()とattributes/setAttributesを使い、保存はpostメタまたはブロック属性として保存されます。
QDynamic BlockのデータをTransients APIでキャッシュするには？
Arender_callback内でget_transient()を確認し、なければデータ取得とset_transient()でキャッシュします。記事更新時はdelete_transient()でキャッシュを削除するsave_postフックも追加します。

まとめ

Block APIのrender_callbackを活用すれば、最新記事・カスタムフィールド・ログイン情報などをリアルタイムで反映できる強力なカスタムブロックが実装可能です。情報の自動更新や複雑なロジックを必要とするブロック設計において、PHPとJSをうまく組み合わせて動的出力を行うのがベストプラクティスです。