Lazy Blocksの使い方｜カスタムブロックの作成・出力・移行方法

WordPressのブロックエディターへオリジナルのカードや注意ボックスを追加したくて、「Lazy Blocksはどう使う？」「フィールドを作った後、HTMLへどう表示する？」と迷っていませんか。

Lazy Blocksは、管理画面でカスタムブロックを作り、テキスト・画像・選択肢・繰り返し項目などのコントロールを追加できるWordPressプラグインです。

作成した入力項目の値は、HTML＋Handlebars、PHP、テーマテンプレートなどで出力できます。

基本手順は、プラグインを有効化する、ブロック名とスラッグを設定する、入力コントロールを追加する、出力コードを書く、投稿画面で入力・表示を確認するという流れです。

2026年7月時点のWordPress.org公式ページでは、Lazy Blocks 4.3.1、WordPress 6.2以上、PHP 8.0以上が要件として案内されています。

簡単な静的カードはHTML＋Handlebars、条件分岐やWordPress関数を使う出力はPHP、Gitで管理したい場合はテーマテンプレートが向きます。

ただし、PHP出力欄へ誤ったコードを書くと、表示エラーやセキュリティ問題につながるため、バックアップと検証環境を用意してください。

この記事では、Lazy Blocksのインストール、ブロック作成、コントロール設定、出力コード、投稿での使い方、エクスポート・トラブル対処まで解説します。

この記事でわかること

Lazy Blocksのインストールと基本設定
テキスト・画像・選択フィールドを使ったブロック作成
Handlebars・PHP・テーマテンプレートによる出力方法
ブロックの移行・更新・表示エラーへの対処

Lazy Blocksとは？

Lazy Blocksは、ブロックエディター向けのカスタムブロックを管理画面から作るためのプラグインです。

公式プラグインページでは、コントロールをドラッグ＆ドロップで追加し、HTMLまたはPHPコードで出力できると説明されています。

カスタムブロックを視覚的に設定できる

通常、独自ブロックの開発にはJavaScriptやblock.jsonなどの知識が必要です。

Lazy Blocksでは、ブロック名・アイコン・カテゴリー・入力項目などを管理画面から設定し、比較的少ないコードで実用的なブロックを作れます。

カスタムフィールドとしても使える

ブロック内の値を投稿メタへ保存し、テーマ側で利用する構成も可能です。

商品情報、施設情報、人物プロフィールなど、入力形式を統一したい投稿タイプへ利用できます。

投稿テンプレートも作成できる

特定の投稿タイプへ、あらかじめ決めたブロックを配置する機能があります。

編集者が毎回同じ構成を一から作る必要を減らせます。

Lazy Blocksが向いているケース

用途	Lazy Blocksが役立つ理由
関連記事カード	画像・見出し・説明・URLを統一入力できる
注意・補足ボックス	色や種類を選択式にできる
店舗・施設情報	住所・料金・営業時間を決まった形式で表示できる
商品スペック	数値・選択・繰り返し項目を整理できる
CTA	見出し・説明・ボタンを編集者が差し替えられる
カスタム投稿	投稿タイプ別に入力項目を限定できる

短いコードで固定レイアウトを作りたい人

デザインは制作者が決め、投稿者には文章・画像だけを入力してほしい場合に向きます。

複数人で記事を作るサイト

入力欄と出力を分けることで、投稿者がHTMLを壊しにくくなります。

完全ノーコードではない

入力コントロールの追加は視覚的に行えますが、独自の見た目を作るにはHTML・CSS、複雑な処理にはPHPの知識が必要です。

現行版の動作要件を確認する

2026年7月時点のWordPress.orgプラグインページには、次の情報が掲載されています。

項目	公式掲載情報
バージョン	4.3.1
WordPress	6.2以上
テスト済み	7.0.2まで
PHP	8.0以上
有効インストール	20,000以上

この情報は更新されるため、導入時はWordPress.orgのプラグインページを確認してください。

PHPバージョンを先に確認する

古いサーバーでPHP 7系を使っている場合、現行Lazy Blocksを有効化できない可能性があります。

PHP更新前には、テーマとほかのプラグインの互換性を検証します。

本番サイトでいきなり試さない

ブロックのPHPコードやCSSは公開画面へ影響します。

ステージング環境またはローカル環境で作成し、バックアップ後に本番へ移行しましょう。

Lazy Blocksをインストールする方法

管理画面からインストールする

WordPress管理画面へログインする
「プラグイン」から「新規プラグインを追加」を開く
検索欄へ「Lazy Blocks」と入力する
Custom Block Builder – Lazy Blocksを確認する
「今すぐインストール」を押す
完了後に「有効化」を押す

公式ドキュメントでも、管理画面からのインストールが推奨方法として案内されています。

ZIPファイルをアップロードする

WordPress.orgから公式ZIPを取得し、「プラグイン」→「新規追加」→「プラグインのアップロード」で導入できます。

非公式サイトから再配布されたZIPを使用しないでください。

有効化後にメニューを確認する

管理画面へLazy Blocksメニューが追加されます。

表示されない場合は、ユーザー権限、管理メニュー制限、プラグインエラーを確認します。

最初のカスタムブロックを作る

ここでは「おすすめ記事カード」を例に、画像・見出し・説明・URL・ボタン文字を入力できるブロックを作ります。

STEP1：新規ブロックを追加する

管理画面の「Lazy Blocks」を開き、「新規追加」または「Add New」を選びます。

現行ドキュメントでは、Basic、Hero、Testimonials、Alertなどのスターターを選べるセットアップウィザードも案内されています。

一から作る場合は基本ブロックを選び、後からコントロールを調整します。

STEP2：ブロック名を設定する

タイトルへ「おすすめ記事カード」など、投稿者が用途を理解できる名前を入力します。

説明欄には「画像・説明・リンクを表示する記事カード」のように書きます。

STEP3：スラッグを設定する

スラッグはブロックの識別子です。

小文字の半角英数字とハイフンを使い、recommend-cardのように設定します。

公開後にスラッグを変更すると、既存投稿のブロックが認識されなくなる可能性があるため、最初に決めてください。

STEP4：アイコン・カテゴリー・キーワードを設定する

ブロック挿入画面で見つけやすいアイコンとカテゴリーを選びます。

キーワードへ「カード」「おすすめ」「リンク」などを設定すると検索しやすくなります。

STEP5：表示する投稿タイプを決める

記事カードを投稿だけで使う場合は投稿タイプを限定します。

何も選ばない場合は、複数の投稿タイプで表示される設定になることがあります。

コントロールを追加する

入力項目	コントロール	スラッグ例
画像	Image	`card_image`
見出し	Text	`card_title`
説明	Textarea	`card_text`
リンク先	URL	`card_url`
ボタン文字	Text	`button_label`
デザイン	SelectまたはRadio	`card_style`

ラベルとスラッグを分ける

ラベルは投稿者に見せる「カードの見出し」などの日本語で構いません。

スラッグは出力コードで参照するため、card_titleのような半角英数字・アンダースコアで統一します。

ContentとInspectorを使い分ける

Content側へ配置したコントロールは、編集画面のブロック内部へ表示されます。

Inspector側は右サイドバーへ表示されるため、色・種類・補助設定など、本文入力より優先度の低い項目に向きます。

デフォルト値を設定する

ボタン文字へ「詳しく見る」などを設定しておくと、投稿者が毎回入力せずに済みます。

デフォルト値が空の項目を出力すると不要な空タグが出る場合があるため、出力側でも条件分岐を行います。

必須項目を増やしすぎない

すべてを必須にすると、短い記事で使いにくくなります。

見出し・URLだけ必須とし、画像や説明を任意にするなど、用途へ合わせます。

HTML＋Handlebarsで出力する方法

静的なカードや注意ボックスなら、HTML＋Handlebarsがわかりやすい方法です。

コントロールの値を{{スラッグ}}で参照し、{{#if}}で入力の有無を判定できます。

<article class="recommend-card recommend-card--{{card_style}}">
  {{#if card_image}}
    <div class="recommend-card__image">
      {{{wp_get_attachment_image card_image "large"}}}
    </div>
  {{/if}}

  <div class="recommend-card__body">
    {{#if card_title}}
      <h3 class="recommend-card__title">{{card_title}}</h3>
    {{/if}}

    {{#if card_text}}
      <p class="recommend-card__text">{{card_text}}</p>
    {{/if}}

    {{#if card_url}}
      <a class="recommend-card__button" href="{{card_url}}">
        {{button_label}}
      </a>
    {{/if}}
  </div>
</article>

二重波括弧と三重波括弧の違い

通常の{{value}}はエスケープされた文字として出力されます。

画像HTMLなど、公式ヘルパーが返す信頼できるHTMLを表示する場合に三重波括弧を使います。

投稿者が自由入力した値を無条件で三重波括弧へ入れると、意図しないHTMLが出るため注意してください。

画像は添付画像ヘルパーを使う

公式ドキュメントには、WordPressのレスポンシブ画像を出力するwp_get_attachment_imageヘルパーが案内されています。

単純なURLだけでなく、srcsetを含むWordPress画像を利用できます。

複雑な処理はPHPへ切り替える

投稿情報の取得、複雑な配列処理、WordPress関数を多く使う場合はPHP出力が向きます。

PHPで出力する方法

出力方法をPHPへ設定すると、ブロック属性を使って動的なHTMLを生成できます。

次は概念を示す例です。

<?php
$title  = isset( $attributes['card_title'] )
    ? $attributes['card_title']
    : '';
$text   = isset( $attributes['card_text'] )
    ? $attributes['card_text']
    : '';
$url    = isset( $attributes['card_url'] )
    ? $attributes['card_url']
    : '';
$button = ! empty( $attributes['button_label'] )
    ? $attributes['button_label']
    : '詳しく見る';
?>

<article class="recommend-card">
  <?php if ( $title ) : ?>
    <h3><?php echo esc_html( $title ); ?></h3>
  <?php endif; ?>

  <?php if ( $text ) : ?>
    <p><?php echo esc_html( $text ); ?></p>
  <?php endif; ?>

  <?php if ( $url ) : ?>
    <a href="<?php echo esc_url( $url ); ?>">
      <?php echo esc_html( $button ); ?>
    </a>
  <?php endif; ?>
</article>

出力時にエスケープする

テキストにはesc_html()、URLにはesc_url()、属性値にはesc_attr()など、出力先に合う関数を使います。

見本記事でも、属性値をPHPで出力する際にエスケープ関数を使う例が掲載されています。

入力値を信用しすぎない

管理画面で入力する値でも、権限設定やインポートデータによって想定外の文字が入る可能性があります。

サニタイズとエスケープを行い、PHPコードを編集できるユーザーを必要最小限にします。

構文エラーへ備える

PHPの括弧・セミコロン・引用符を間違えると、ブロックやページが表示できなくなる場合があります。

バックアップと管理画面外からプラグインを停止できる手段を用意してから変更してください。

テーマテンプレートで出力する方法

テーマ内のファイルへコードを置く

Lazy Blocks公式は、HTML＋Handlebars、PHP、Theme Templateの3つを主な出力方法として案内しています。

テーマテンプレートは、コードをテーマ側のファイルとして管理する方法です。

Gitで管理しやすい

管理画面内のコードだけでは、変更履歴のレビューや複数環境への反映が難しくなります。

テーマファイルへ置けば、Gitで差分・レビュー・ロールバックを行いやすくなります。

親テーマへ直接置かない

配布テーマの更新で消えないよう、子テーマまたは独自テーマを使います。

テーマ変更の影響を受ける

出力テンプレートをテーマ内へ置いた場合、別テーマへ切り替えるとファイルが見つからなくなります。

サイト固有の機能としてテーマへ持たせるか、独自プラグインへ含めるかを設計段階で決めましょう。

CSSでブロックを整える

.recommend-card {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid #ddd;
  border-radius: 0.75rem;
}

.recommend-card__image img {
  display: block;
  width: 100%;
  height: auto;
}

.recommend-card__title {
  margin: 0 0 0.5rem;
}

.recommend-card__button {
  display: inline-block;
  margin-top: 0.75rem;
}

編集画面と公開画面の両方を確認する

公開画面ではテーマCSSの影響、編集画面ではエディター固有CSSの影響を受けます。

どちらか片方だけを確認すると、投稿者が編集しにくいブロックになる場合があります。

クラス名へ固有の接頭辞を付ける

.cardのような一般的な名前はテーマや別プラグインと衝突しやすくなります。

.site-recommend-cardなど、サイト・機能固有の名前を検討してください。

Pro機能との違いを確認する

現行のプラグインページでは、追加コントロール、条件表示、スタイル・スクリプト、パネルなど一部機能がProとして案内されています。

チュートリアルと自分の画面が違う場合は、無料版・Pro版とバージョンを確認しましょう。

投稿画面で作成したブロックを使う

ブロック挿入から検索する

投稿・固定ページの編集画面で「＋」を押し、設定したタイトルやキーワードで検索します。

各コントロールへ入力する

画像、見出し、説明、URL、デザインなどを入力します。

Content配置の項目はブロック内、Inspector配置の項目は右サイドバーに表示されます。

プレビューで確認する

編集画面のプレビューだけでなく、新しいタブで公開プレビューを確認します。

スマートフォン幅、リンク先、画像代替テキスト、長い見出しもテストしてください。

ブロックエラーが出た場合

出力方法やスラッグ変更によって、保存内容と現在の定義が一致しない可能性があります。

「ブロックのリカバリー」を押す前に、投稿のバックアップとコードエディター表示を確認します。

繰り返し項目を作る

Repeaterで複数項目を入力する

料金表、FAQ、特徴一覧など、同じ形式を複数登録するときはRepeaterが便利です。

各行へ見出し・説明・画像などの子コントロールを持たせます。

入力数へ上限を設ける

無制限に追加すると、ページが長くなり、表示処理と編集操作が重くなる場合があります。

用途に応じて最小・最大数を設定します。

空の行を出力しない

HandlebarsまたはPHPで各行の値を確認し、必要な項目がない行を表示しないようにします。

投稿メタとして保存する場合

ブロック本文とメタ保存の違い

通常のブロック属性は投稿本文のブロックデータとして保存されます。

Save in Metaを使うと、指定した値を投稿メタとしてテーマやプラグインから取得できます。

検索・一覧表示へ使う設計

価格、地域、評価などを一覧ページで検索・絞り込みたい場合、構造化した投稿メタが役立ちます。

ただし、単に表示するだけの文章をすべてメタへ分割すると管理が複雑になります。

メタキーの重複を避ける

ほかのテーマ・プラグインと衝突しないよう、my_site_priceのような接頭辞を付けます。

ブロックをエクスポート・インポートする

JSONエクスポート

公式ドキュメントは、サイト間の移動、共有、バックアップにはJSONエクスポートを案内しています。

個別ブロックと一括エクスポートの両方に対応します。

PHPエクスポート

テーマ・プラグインへ含める、Gitで管理する場合はPHPエクスポートが向きます。

公式ドキュメントでは、PHPでエクスポートしたブロックを動かす場合もLazy Blocksプラグインが必要と説明されています。

インポート前に同じスラッグを確認する

移行先に同名・同スラッグのブロックがあると、上書きや重複へ注意が必要です。

本番へ入れる前に検証サイトで確認します。

コードだけでなくCSS・画像も移す

テーマテンプレートや外部CSS、固定画像へ依存している場合、JSONだけを移しても同じ表示になりません。

依存ファイルと利用プラグインを一覧にします。

アップデート時の注意点

4系ではPHP 8.0以上が必要

古い環境から更新する場合は、先にサーバーのPHPとWordPress要件を確認してください。

変更履歴を読む

4.3.0ではWordPress 7.0対応や権限チェック強化、4.3.1ではブロック取得処理のキャッシュ改善などが公式変更履歴へ掲載されています。

テーマテンプレートの変数名変更など、開発者向けの破壊的変更が含まれる版もあります。

ステージングで既存ブロックを確認する

新規ブロックだけでなく、過去記事にある全種類のブロック、投稿編集画面、公開画面を確認します。

よくあるトラブルと対処法

症状	主な原因	確認すること
ブロックが挿入画面に出ない	下書き・スラッグ未設定・投稿タイプ制限	公開状態とCondition
入力値が表示されない	スラッグの入力ミス	コントロール名と出力コード
画像が出ない	出力形式が想定と違う	ImageのOutput Format
PHPエラーになる	構文エラー・存在しないキー	ログ・isset・バックアップ
編集画面だけ崩れる	エディターCSS不足	公開用と編集用スタイル
更新後に表示が変わる	仕様変更・キャッシュ	変更履歴・全キャッシュ削除
別サイトで同じ表示にならない	テーマ・CSS・依存プラグイン不足	移行対象ファイル一覧

安全に使うためのポイント

PHPコードを編集できる権限を限定する

Lazy Blocksの出力コードはサイトへ直接影響します。

管理者権限を必要最小限にし、共有アカウントを使わないでください。

入力と出力をエスケープする

URL、属性、HTML、テキストで必要な処理は異なります。

PHP出力ではWordPressのエスケープ関数を使います。

バックアップと復旧手段を用意する

管理画面へ入れなくなった場合に、ホスティング管理画面やSFTPからプラグインを停止できるようにします。

不要なブロックを削除する前に検索する

過去記事で使用中のブロックを削除すると、「このサイトでサポートされていないブロック」と表示される場合があります。

使用記事を調べ、代替ブロックへ変換してから削除してください。

Lazy Blocksとほかの方法の違い

方法	向く用途	特徴
Lazy Blocks	独自ブロック・構造化入力	管理画面＋HTML/PHPで作成
ブロックパターン	既存ブロックの組み合わせ	独自入力項目は作らない
同期パターン	複数箇所で同じ内容を共有	一括変更に向く
ショートコード	短い動的出力	編集画面で完成形が見えにくい場合がある
独自ブロック開発	高度なUI・製品開発	JavaScript開発の自由度が高い
カスタムフィールド	投稿単位の構造化データ	テーマで出力を設計する