Lazy Blocksが便利！ WordPressのカスタムブロックを管理しやすく作る方法

導入

WordPressでカスタムブロックを作ろうとすると、block.json を書いて、JavaScriptのビルド環境を用意して、ちょっとしたUIでも意外と準備が増えがちです。もちろんそのやり方が必要な場面もありますが、「更新しやすい独自ブロックを、もう少し楽に作りたい」という案件はかなり多いはずです。

そんなときに触ってみたくなるのが、WordPressプラグインのLazy Blocksです。管理画面からブロックを組み立てられて、出力はHTMLやPHPで書けるので、テーマ開発に近い感覚でGutenberg用のブロックを作れます。

2026年3月31日時点で、WordPress.org の配布ページでは Lazy Blocks は 20,000+ の有効インストールがあり、バージョンは 4.2.1、要件は WordPress 6.2+ / PHP 8.0+ です。今回は、Lazy Blocksがどんなプラグインなのか、どういう案件でハマりやすいのか、そして実務で使いやすい書き方までまとめます。

機能やライブラリの概要

Lazy Blocksは、WordPressのブロックエディター向けに独自ブロックを作るためのプラグインです。大きな特徴は、ブロックの設定や入力項目をGUIで組み立てつつ、最終的な出力をHTMLやPHPで柔軟に書けることです。

公式ドキュメントを見ると、主な特徴は次のように整理できます。

  • ビジュアルなブロックビルダーでカスタムブロックを作れる
  • Text、Image、Rich Text、Repeater など多くのコントロールを使える
  • 出力方法として HTML + Handlebars、PHP、Theme Template を選べる
  • コントロールの値をカスタムフィールドとして保存できる
  • Export / Import でブロック定義を持ち運べる

このプラグインがうれしいのは、「ブロック登録の土台」と「入力UIづくり」をかなり省力化できるところです。
とくに、次のような案件では相性がいいです。

  • 固定レイアウトのCTAやお知らせブロックを量産したい
  • 管理画面で触る人に、必要な入力項目だけ渡したい
  • テーマ側でPHPテンプレートとして管理したい
  • ACFほど大きな仕組みを入れずに、Gutenbergの独自ブロックを増やしたい

まずは基本の使い方

最初は、シンプルなCTAブロックを作るイメージで見てみます。
たとえば「見出し」「説明文」「ボタン文言」「リンク先URL」を入力できるブロックを用意すると、ランディングページや記事下CTAでかなり使い回しやすくなります。

Lazy Blocks側では、まずこんなコントロールを作る想定です。

  • title : Text
  • text : Textarea
  • button_text : Text
  • button_url : URL
  • open_new_tab : Toggle

出力方法を PHP にした場合、ブロックの表示コードは次のように書けます。

<?php
$title = $attributes['title'] ?? '';
$text = $attributes['text'] ?? '';
$button_text = $attributes['button_text'] ?? '';
$button_url = $attributes['button_url'] ?? '';
$open_new_tab = ! empty($attributes['open_new_tab']);
?>

<section class="c-cta-box">
  <?php if ($title) : ?>
    <h2 class="c-cta-box__title"><?php echo esc_html($title); ?></h2>
  <?php endif; ?>

  <?php if ($text) : ?>
    <p class="c-cta-box__text"><?php echo nl2br(esc_html($text)); ?></p>
  <?php endif; ?>

  <?php if ($button_text && $button_url) : ?>
    <p class="c-cta-box__action">
      <a
        class="c-cta-box__button"
        href="<?php echo esc_url($button_url); ?>"
        <?php if ($open_new_tab) : ?>
          target="_blank" rel="noopener noreferrer"
        <?php endif; ?>
      >
        <?php echo esc_html($button_text); ?>
      </a>
    </p>
  <?php endif; ?>
</section>
PHP

このコードでやっていることはかなりシンプルです。
Lazy Blocksで作った各コントロールの値を $attributes から取り出して、通常のPHPテンプレートのようにHTMLへ流し込んでいます。

ここがLazy Blocksの分かりやすいところで、ブロックの「入力UI」は管理画面で作りつつ、出力そのものは普段のWordPressテーマ開発に近い感覚で書けます。Reactベースの独自ブロック開発に比べると、かなり入りやすいはずです。

実務で便利な使いどころ

Lazy Blocksは、派手なインタラクティブブロックを作るというより、運用しやすい編集部品を作る場面で力を発揮します。

たとえば、こんな用途はかなり相性がいいです。

  • CTAブロック
  • スタッフ紹介ブロック
  • FAQブロック
  • お知らせカード
  • 比較表や料金表の一部
  • 投稿ごとに必要な補助入力欄

とくに便利なのが、「編集者が触る項目を絞れる」ことです。
通常のブロックエディターで自由に組ませると、見た目が崩れたり、入力ルールが守られなかったりすることがあります。Lazy Blocksなら、必要な入力欄だけを用意して、出力側のHTML構造は固定できます。

また、公式ドキュメントではコントロールを Inspector と Content の2か所に配置できますが、基本的には Inspector に寄せるのがおすすめです。WordPressコアブロックも同じ考え方なので、編集体験が自然にまとまりやすくなります。

応用コード

実務では、ブロックを管理画面だけで完結させるより、テーマ側のファイルで管理したくなることがよくあります。
そんなときに使いやすいのが Theme Template 出力です。

公式ドキュメントでは、テーマ側に次のような構成でブロックテンプレートを置けます。

/wp-content/themes/your-theme/
└─ blocks/
   └─ lazyblock-faq-list/
      └─ block.php
Markdown

たとえば、FAQブロックを作るなら、コントロールはこんな構成が考えやすいです。

  • heading : Text
  • items : Repeater
    • question : Text
    • answer : Rich Text もしくは Textarea

block.php は次のように書けます。

<?php
$heading = $attributes['heading'] ?? '';
$items = $attributes['items'] ?? [];
?>

<section class="c-faq">
  <?php if ($heading) : ?>
    <h2 class="c-faq__title"><?php echo esc_html($heading); ?></h2>
  <?php endif; ?>

  <?php if ($items && is_array($items)) : ?>
    <dl class="c-faq__list">
      <?php foreach ($items as $item) : ?>
        <?php
        $question = $item['question'] ?? '';
        $answer = $item['answer'] ?? '';
        ?>

        <?php if ($question || $answer) : ?>
          <div class="c-faq__item">
            <?php if ($question) : ?>
              <dt class="c-faq__question"><?php echo esc_html($question); ?></dt>
            <?php endif; ?>

            <?php if ($answer) : ?>
              <dd class="c-faq__answer">
                <?php echo wp_kses_post(wpautop($answer)); ?>
              </dd>
            <?php endif; ?>
          </div>
        <?php endif; ?>
      <?php endforeach; ?>
    </dl>
  <?php endif; ?>
</section>
PHP

この形にしておくと、編集者は管理画面でFAQを追加していくだけで済みます。一方で、フロント側のHTML構造やクラス設計はテーマ側でしっかり管理できます。

ここがかなり実務向きで、ブロック定義はLazy Blocksに任せつつ、テンプレートはGit管理に乗せられます。
チーム開発でもレビューしやすいですし、テーマの設計ルールに合わせやすいのも大きなメリットです。

注意点

  • JavaScript中心の高度なブロックには向き不向きがある
    独自の編集UIや複雑なインタラクションが必要なブロックでは、通常のGutenbergブロック開発のほうが向いていることがあります。Lazy Blocksは、入力項目が明確なブロックほど使いやすいです。
  • コントロール名には予約語がある
    公式ドキュメントでは className や anchor など、使わないほうがよい予約済みの名前があります。最初にルールを決めておくと後から困りにくくなります。
  • テンプレート機能の古い情報は混ざりやすい
    Lazy Blocksの「Templates」機能は、公式ドキュメントでは v4.0.0 以降 deprecated とされています。昔の記事を参照すると混同しやすいので、今はWordPress側のテンプレートエディターやFSEの流れも合わせて確認したいところです。
  • 2026年3月31日時点の要件は確認しておきたい
    WordPress.org の配布ページでは、Lazy Blocks は WordPress 6.2+、PHP 8.0+ が要件です。保守中の既存案件に入れるなら、まずPHPバージョンを見ておくのが安全です。

まとめ

Lazy Blocksは、「Gutenberg向けの独自ブロックを作りたいけれど、毎回フルスクラッチのブロック開発までは持ち込みたくない」という場面でかなり扱いやすいプラグインです。

管理画面で入力項目を組み立てつつ、出力はPHPやテンプレートでしっかりコントロールできるので、WordPressテーマ制作の延長線上で使いやすいのが魅力です。
とくに、CTA、FAQ、スタッフ紹介、料金表の一部のような「形が決まっていて、運用者には必要な項目だけ触ってほしい」ブロックでは、かなり気持ちよくハマります。

最初に試すなら、まずは1つのCTAブロックやFAQブロックから入るのがおすすめです。そこからRepeaterやTheme Templateまで広げていくと、Lazy Blocksの良さが見えやすいと思います。

今回の実務ポイント

  • 独自ブロックを軽めに増やしたい案件でLazy Blocksはかなり使いやすい
  • PHP や Theme Template 出力を使うと、テーマ開発の延長で管理しやすい
  • 編集者に触らせる項目を絞りたいときに特に効果が出やすい
  • 複雑なJS中心ブロックより、CTAやFAQのような定型ブロック向き
  • 古いTemplate機能の記事もあるので、現行ドキュメント基準で見るのが安心

参考リンク

read next