Lazy Blocksを覚えるには、文字入力1つのブロックを作り、保存して公開表示するところから始めると仕組みを追いやすくなります。入力欄を作る工程と、その値をHTMLやPHPで出力する工程が分かれているためです。本記事では基本設定からRepeater、条件分岐、エラー対処へ順に進み、実機で確認した画面とコードを使って説明します。
1. インストールと初回ブロック作成
インストール
最初の練習では、ブロック名・文字入力・出力コードだけを使います。複数の機能を一度に設定すると、保存できない原因と表示されない原因を分けにくくなります。以降の操作は検証用ページで試し、使うバージョンの公式ドキュメントとも照合してください。
確認したら、WordPress管理画面の「プラグイン」→「新規追加」で「Lazy Blocks」を検索し、インストール・有効化します。有効化すると、左メニューに「Lazy Blocks」という項目が追加されます。
入力項目は「タイトル」「説明」のように、編集者が実際に変更する値から決めます。最初からすべてのコントロールを追加せず、保存した値がどの名前で出力コードに渡るかを確認してください。後半で扱う条件分岐やPostsなどは、利用環境にその機能がある場合の設定例です。
初めてのブロックを作る
初めてのブロックを作る
-
STEP 01「Lazy Blocks」→「Add New」をクリック
-
STEP 02テンプレート選択
-
STEP 03ブロックのタイトルを入力（例：お知らせボックス）
-
STEP 04追加オプションを設定する
-
STEP 05Slugを確認・編集（半角英数字。PHP側で呼び出す際のキーになります）
-
STEP 06「Controls」タブでフィールドを追加ここで入力フィールド条件などの設定を行います。
この時点で保存すれば、投稿画面の「＋」ブロック追加メニューに、作成したブロックが表示されるようになります。
2. コントロールの種類一覧
Lazy Blocksには複数のコントロール（入力フィールドの種類）が用意されています。主なものは以下の通りです。
2-1. 無料版で使える21種類
コントロール数だけでACFなどと優劣は決められません。Lazy Blocksでは記事中のブロックを作るために必要な入力形式、カスタムフィールド製品ではデータの保存・参照や検索まで含めて比べます。無料版にない機能が、自分の構成に必要かを確かめてください。
| コントロール | 設定の仕方 | 設定するとどうなるか | こんなことができる |
|---|---|---|---|
| Text | Label/Nameを決めるだけ。placeholderと文字数上限(characters_limit)も設定可 | 投稿画面に一行の入力欄が1つ表示される | 見出しコピー・肩書き・短いラベル文言の差し込み |
| Textarea | Textと同じ設定項目で、複数行に対応 | 複数行入力できるテキストエリアが表示される | 商品説明文・自己紹介文などの長文差し込み |
| Number | min/max/stepで入力範囲を指定 | 数値専用の入力欄（スピナー付き）が表示される | 価格・点数・在庫数など数値データの入力 |
| Range | min/max/stepでスライダーの可動域を指定 | つまみをドラッグして数値を選ぶスライダーが表示される | 満足度・達成率のような直感的な数値入力 |
| URL | 特別な属性は無し（Pro環境では投稿ピッカーが自動追加） | URL専用の入力欄が表示される | 外部リンク・CTAボタンのリンク先指定 |
| placeholderと文字数上限を設定 | メールアドレス形式の入力欄が表示される | 問い合わせ先・担当者メールの表示 | |
| Password | placeholderと文字数上限を設定 | 入力内容が伏字になるマスク入力欄が表示される | 会員限定コンテンツの合言葉表示など |
| Image | insert_from_url・preview_sizeを指定 | メディアライブラリの選択ボタンが表示され、選ぶとプレビューが出る | アイキャッチ的な画像・アイコン・ロゴの差し込み |
| Gallery | preview_sizeを指定 | 複数画像をまとめて選べるギャラリーピッカーが表示される | 実績写真・商品写真を並べるカルーセル表示 |
| File | allowed_mime_typesで許可拡張子を制限 | 画像に限らないファイルのアップロード欄が表示される | PDF資料・ダウンロード素材の添付 |
| Rich Text | 特別な属性は無し | 太字・リンクなどが使えるミニWYSIWYG欄が表示される | 装飾込みの説明文・注釈文の入力 |
| Classic Editor | 特別な属性は無し | 従来型のクラシックエディタ（TinyMCE）欄が表示される | 旧エディタで書いていた文章の移植 |
| Code Editor | 特別な属性は無し（Pro版はlanguage指定が追加されるだけ） | シンタックスハイライト付きのコード入力欄が表示される | サンプルコードや埋め込みタグをそのまま安全に表示 |
| Inner Blocks | Controlsタブでは追加せず、出力コードに<InnerBlocks />と記述 | 投稿画面にGutenbergの「＋」ブロック追加エリアがそのまま現れる | 定型レイアウトの中に自由に段落・画像を差し込ませたい場合（6章） |
| Checkbox | multipleとchoicesの有無で単体/複数を切替 | 単体ならON/OFF、複数ならチェックボックス群が表示される | 「セール中」フラグ、複数タグの一括選択 |
| Toggle | alongside_textでラベル位置を調整 | スイッチ型のON/OFF欄が表示される | 「新着バッジを表示する」のような機能ON/OFF切替 |
| Radio | choicesで選択肢を配列で用意 | 丸ボタンから1つだけ選ぶUIが表示される | 「S/M/L」のような排他的な選択 |
| Select | choices・multiple・output_formatを指定 | ドロップダウンで1つ（multiple指定で複数）選ぶUIが表示される | カテゴリー分類・色バリエーションの選択 |
| Color | alpha・paletteで独自カラーパレットを用意 | カラーピッカーが表示され、選べる色をブランドカラーだけに絞ることも可能 | ボタン色やアクセントカラーをブランドに統一 |
| Date / Time | date_time_pickerで日付のみ/日時/時刻のみを選択 | カレンダーUIのピッカーが表示される | イベント開催日・キャンペーン期限の表示 |
| Repeater | 子コントロールをchild_ofで紐付け、rows_min/rows_maxで行数を制御 | 「＋」ボタンで行を増減できる繰り返し入力欄が表示される | FAQ・料金表・ステップ解説など件数が可変のコンテンツ（3章で詳解） |
2-2. Pro限定の9種類
ここから先はPro版でのみ追加される9種類です。単に入力欄の種類が増えるだけでなく、サイトの中にすでにある投稿・タクソノミー・ユーザーと直接つながるタイプが揃っているのが特徴です。
| コントロール | 設定の仕方 | 設定するとどうなるか | こんなことができる |
|---|---|---|---|
| Posts | posts_post_type・posts_taxonomy・posts_output_formatで対象を絞る | サイト内の投稿を検索して選べるピッカーが表示される | 「関連記事」「おすすめ記事」カードの自動連携（8章） |
| Taxonomy | taxonomy・taxonomy_appearance・taxonomy_output_formatを指定 | カテゴリー/タグを選ぶセレクトまたはラジオが表示される | 記事のジャンルバッジ、カテゴリー別の色分け表示 |
| Users | users_role・users_output_formatで対象ユーザーを絞る | サイトのユーザー一覧から選ぶピッカーが表示される | 執筆者紹介ブロック、監修者クレジット表示 |
| Units | unitsで許可する単位をカンマ区切りで指定 | 数値欄と単位ドロップダウンが一体化した入力欄が表示される | 余白（20px/2rem）やサイズ（80%）など単位ごと管理したい設定値 |
| Link | link_suggestions・show_target_field等でどの項目を見せるか選ぶ | URL・別タブ指定・nofollow・CSSクラスまで1つにまとまった入力欄が表示される | アフィリエイトリンクへのnofollow付与や新規タブ指定をノーコードで統一 |
| Token Field | choices・allow_customでタグの自由入力可否を決める | タグをポンポン追加していく入力欄が表示される | 対応デバイス一覧・関連キーワードのような可変個の短いラベル入力 |
| Message | message_textに説明文を書くだけ | 編集画面にだけ表示される注意書きが差し込まれる（データは保存されない） | 「ここには半角英数字で入力してください」のような入力ガイド表示 |
| Panel | icon・initial_openで開閉初期状態を指定 | 複数のコントロールをまとめた折りたたみパネルが表示される | 「基本設定」「デザイン設定」のように項目をグループ化して整理 |
| Divider | 属性なし、置くだけ | 編集画面に区切り線が1本入る | 設定項目が多いブロックで見た目のグループ分けを補助 |
CheckboxはmultipleをONにすると値がPHP配列になります。単体トグルのつもりでecho $attributes['xxx']と書くと配列を出力しようとしてエラーになるので注意してください。
Imageは設定次第で「URL文字列」と「{url, id, ...}のオブジェクト」のどちらにもなります。esc_url()にオブジェクトをそのまま渡すミスが起きやすいポイントです。
Link（Pro）は{url, title, opensInNewTab, nofollow, cssClasses}という5つのキーを持つ連想配列です。単純な文字列だと思って書き始めると詰まります。
本記事のRepeater例は無料版の機能で構成しています。ACFなどの投稿メタとして扱う繰り返しフィールドとは、保存先や取り出し方が異なります。同じ「繰り返し」という名前だけで置き換えず、ブロックとして本文へ配置する用途かどうかを確認してください。
3. Repeater Controlの使い方
基本設定
Repeaterでは、先に「1行に必要な子コントロール」を定義し、記事の編集画面で行を追加します。出力時に繰り返すのは入力された行の数です。子コントロールが3個なら3回出力される、という意味ではありません。
注意点：ネストされたリピーターは非対応
リピーターの中にさらにリピーターを入れる「入れ子構造」は公式に非対応とされています。
複数の独立したリピーターに分割する設計を検討してください。
4. 出力方法の使い分け（PHP／Handlebars／テーマテンプレート）
Lazy Blocksでは、ブロックの出力方法を3種類から選べます。
| 方法 | 向いているケース |
|---|---|
| PHP | 条件分岐やエスケープ処理など、柔軟な制御が必要な場合。本サイトのサンプルコードもこの形式 |
| HTML + Handlebars | シンプルな出力で、テンプレートエンジン的な書き方をしたい場合 |
| テーマテンプレートファイルを指定 | 既存のテーマ内のPHPファイルとしてブロックコードを管理したい場合。バージョン管理（Git）と相性が良い |
PHPの出力では構文エラーと値の型に注意します。同じページに複数置く可能性があるブロック内で名前付き関数を毎回定義すると、再定義のエラーにつながります。共通処理の置き場と出力処理を分け、必要なエスケープを行ってください。
5. ラッパーdiv制御の最新方法
Lazy Blocksは初期状態で、出力したブロックを自動的に<div>で囲みます。このラッパーdivを削除・制御したい場合の方法が、2025年にアップデートされました。
- 古い方法（非推奨）
-
PHP
add_filter('lzb/block_render/allow_wrapper', '__return_false');
このフィルターは2025年6月リリースのv4.0.0で一度削除されました。
既存ブロックが壊れるのを防ぐためv4.0.1で復活していますが、現在は非推奨扱いで、管理画面に移行を促す通知が表示されます。
ネット上の解説記事の多くは、いまだにこの方法を「正解」として紹介していますが、情報が古いので注意してください。
- 現在の推奨方法
-
ブロックコード側で
useBlockProps()相当の仕組みを使い、自分でラッパー要素を制御する方式に移行することが推奨されています。新規にブロックを作る場合は、この最新の方式に沿って設計することをおすすめします。
6. InnerBlocksの正しい使い方
子ブロックを内包できる「InnerBlocks」機能には、2つの実装方法があります。
- 旧方式：Inner Blocksコントロール（非推奨）
-
以前はControlsタブから「Inner Blocks」という項目を追加するだけで使えましたが、2023年6月リリースのv3.4.0で非推奨になり、将来のアップデートで削除される予定です。新規に作るブロックでは使わないでください。
- 現行の推奨方式：
<InnerBlocks />コンポーネント -
Controlsタブでは追加しません。代わりに、ブロックの出力コード（PHP／HTML+Handlebars／テーマテンプレート）内に直接
<InnerBlocks />というタグを書き込みます。PHP<div class="custom-layout"> <h3>Content Section</h3> <InnerBlocks allowedBlocks="[ 'core/paragraph', 'core/image' ]" /> </div>allowedBlocks：中に配置できるブロックの種類を制限template：あらかじめ決まった構成をテンプレートとして用意1つのブロックにつき
<InnerBlocks />は1つだけ使用可能
【移行手順】
①ブロックの出力コード（フロントエンド・エディタ両方）に<InnerBlocks />を追加
②Controlsタブから旧「Inner Blocks」コントロールを削除、の2ステップです。
ラッパーdivの制御：InnerBlocksエリアにも自動でラッパーdivが付きます。消したい場合は次のフィルターを使います（第5章で紹介したブロック全体用のallow_wrapperフィルターとは別物です）。PHPadd_filter( 'lazyblock/あなたのブロックslug/allow_inner_blocks_wrapper', '__return_false' );
PHP／テーマテンプレートで<InnerBlocks />を使う場合、ブロック設定の「Code output in editor」を「Display always」にしないと、エディタ上で子ブロックを追加する操作欄が表示されません。ここでつまずく例が公式サポートフォーラムでも複数見られます。
7. エクスポート・インポート
作成したブロックは、Lazy Blocksの管理画面から個別に、あるいはまとめてJSON/PHP形式でエクスポートできます。
- JSON形式：他のサイトへ同じブロックを移植したいときに便利。管理画面からインポート可能
- PHP形式：テーマやプラグインのコードとして直接組み込みたいときに使用
案件ごとに同じようなブロック（お知らせボックス、スタッフ紹介など）を使い回すことが多い制作者にとって、このエクスポート機能は特に有用です。
自分専用の「ブロック部品ライブラリ」を育てていくような使い方ができます。
8. Pro版でできること
無料版だけでも実務レベルのブロックは十分作れます。ただ、いくつか実際に使ってみると「これは地味に効く」と感じるPro限定機能があるので、具体的な場面とあわせて紹介します。
Controls Conditions：選択内容に合わせて入力欄を見せ分ける
条件分岐は、選択した内容に応じて入力欄を見せ分けるために使います。たとえば「セールあり」を選んだときだけ割引価格を表示すると、担当者が入力する欄を絞れます。公開側で値をどう出すかの条件とは分けて設計しましょう。
結果、使わない設定項目まで常にズラッと並ぶ、少し不親切な編集画面になりがちです。
Controls Conditionsを使うと、必要なときだけ必要な項目が現れる、まるで市販のプラグインのような編集画面が作れます。自分だけが使うならまだしも、クライアントやチームメンバーに編集を任せる場面では、この差はかなり大きいです。
ここは検索してもピンポイントの手順を書いた日本語記事がほとんど見当たらなかった部分なので、実際の設定手順・選べる演算子・つまずきやすいポイントまで一段深く掘り下げておきます。
設定手順（3ステップ）
例として、「セール中」というトグルをONにしたときだけ「割引率」の数値欄を表示する、というよくあるケースで説明します。
- 先に条件の判定に使うコントロール（今回は「セール中」というToggle）と、条件で出し分けたいコントロール（「割引率」というNumber）の両方を、普通にControlsタブへ追加しておきます。
- 出し分けたい側（「割引率」）の設定パネルを開き、「Conditional Logic」という項目を探します。ここで「Add condition」をクリックすると条件行が1つ追加されます。
- 条件行で「参照するコントロール（セール中）」「演算子（Is equal to）」「値（true、またはチェック済みの状態）」を選んで保存すれば完了です。以後、編集画面では「セール中」がONのときだけ「割引率」欄が表示されるようになります。
選べる演算子（実機で確認済み）
条件分岐は、先に「どの入力を、どの値のときに表示したいか」を書き出してから設定します。たとえば表示形式が画像なら画像欄を表示し、テキストなら説明欄を表示する構成です。参照先の種類によって演算子の選択肢が変わるため、下表で値の型と対応を確認してください。画面上で隠れた欄が公開表示でも消えるかは、出力コード側でも別に確かめます。
| UI表示名 | 意味 | 使える場面 |
|---|---|---|
| Is equal to | 等しい | すべてのコントロールで使用可 |
| Is not equal to | 等しくない | すべてのコントロールで使用可 |
| Contains | 部分一致 | すべてのコントロールで使用可 |
| Has any value | 何か入力・選択されている | checkbox / toggle / message / inner_blocks以外 |
| Has no value | 空である | checkbox / toggle / message / inner_blocks以外 |
| Is greater than / Is less than | 数値・件数の大小比較 | 参照先がnumber / range / gallery / posts / taxonomy / users / repeaterの場合のみ出現 |
| Has style / Has no style | ブロックスタイルの適用有無 | 参照先に「Block Styles」を指定した場合のみ出現 |
また、参照先はControlsタブで追加した項目だけでなく、コアの「Class Name（CSSクラス名）」や「Block Styles（ブロックスタイル）」を指定することもできます。select・radio・checkbox・toggleのように選択肢（choices）を持つコントロールを参照する場合、値欄は自由入力ではなく「選択肢のvalueから選ぶドロップダウン」に自動的に切り替わります。
複数条件の組み合わせ方（AND / OR）
条件は「グループ」という単位でまとめられます。同じグループ内に追加した条件同士はAND（すべて満たす）、グループを分けて追加した条件同士はOR（どちらか満たす）という扱いになります。「A地方 かつ 会員ランクがゴールド」を条件にしたいのか、「A地方 または B地方」のように選択肢を広げたいのかで、同じグループに条件を足すか、新しいグループを足すかを使い分けてください。
【上級者向け】JSONで見るとこういう構造になっている
ブロックをJSONエクスポートすると、条件は「表示/非表示を制御される側のコントロール自身」にconditional_logicというキーで保存されているのが分かります。他サイトへの移植やバックアップの際、JSONを直接いじりたい人向けに構造を載せておきます。
"conditional_logic": [
[
{ "control": "toggle_sale", "operator": "==", "value": "true" }
]
]外側の配列がグループ（グループ同士はOR）、内側の配列が1グループ内の条件（条件同士はAND）です。controlには参照先コントロールのname属性の値（ラベルではない）、valueには参照先の選択肢のvalue（ラベルではない）を指定します。
参照先として選択肢を持つコントロール（select等）を指定すると、その参照先コントロール自身にも同じ条件が複製されて保存されてしまうことがあります。結果として参照先コントロールが自分自身を参照する形になり、初期値のままでは編集画面から消えたまま戻らなくなる、という分かりにくい状態に陥ることがあります。設定後は、参照先にしたコントロールの設定パネルも開いて、意図しないConditional Logicが追加されていないか一度確認しておくと安全です。
覚えておきたい2つの注意点
- Conditionsは編集画面の表示/非表示だけを制御するものです。フロント（実際に公開されるページ）の出力には一切影響しません。条件を満たさなかった項目の値も、そのままデータとしては保存されています。表示・非表示をフロント側でも制御したい場合は、PHP出力コード側で
if文として別途書く必要があります。 - ブロック設定サイドバーには、これとは別に「ブロック全体をどの投稿タイプで使えるようにするか」を決める「Condition」という機能があります。名前が紛らわしいですが、コントロール単位のConditional Logicとは完全に別物なので混同しないようにしてください。
Posts / Taxonomy / Users Control：サイトの中身と直接つながる
無料版のフィールドは基本的に「その場でテキストや画像を入力する」ものですが、Pro版ではサイト内にすでにある投稿・カテゴリ・ユーザーを選んでフィールドに入れられます。
Postsコントロールは関連する投稿を選ぶ場面で便利です。ただし、ACFやSCFの既存データが自動で移る機能ではありません。旧フィールドの保存形式、選択値の型、テンプレートの参照方法を確認してから置き換えます。
PHP出力コードを書く際は、実際に保存される値の形を知っておくとエラーで悩む時間が減ります。
| コントロール | 初期設定での値の形 | 注意点 |
|---|---|---|
| Taxonomy | 文字列（term slugそのもの。例："wordpress-blog"） | multipleがfalseなら配列にもオブジェクトにもならない、素の文字列 |
| Users | 文字列としてのユーザーID（例："1"） | 数値ではなく文字列である点に注意。get_userdata()に渡す前に意識しておくと安全 |
| Posts | 出力形式の設定によって変化 | Post ID形式・Post Object形式などを選べるため、選んだ形式に合わせてPHP側の受け取り方を変える |
Styles & Scripts：ブロックごとにCSS/JSを持ち歩ける
ブロックのビルダー画面内で、そのブロック専用のCSS・JSを直接書いて管理できる機能です。通常、ブロックの見た目を整えるにはテーマのfunctions.phpやスタイルシートに別途コードを追記する必要がありますが、この機能を使うとブロック自体が「見た目込みで完結したパーツ」になります。
スタイルを含めて書き出したブロックも、別サイトではテーマのCSSや画面幅の影響を受けます。受け渡し前に、長い文章、画像なし、スマホ幅の3条件を確認し、追加のフォントや外部ファイルが必要なら一緒に案内してください。
YuuCSSの出力方法は、ブロックの使い方とページ全体で判断します。インライン化には別のCSSファイルを取得しない面がある一方、同じ内容の重複やキャッシュの扱いも変わります。速度が必ず改善するとはせず、実ページで確認しましょう。
この機能は、ブロックを配る側だけでなく受け取る側にも効いてきます。
Styles & Scripts欄を使うJSONと、HTMLへスタイルを埋め込む形式では要件が異なります。配布ページが指定する形式を確認し、Styles & Scriptsの公式仕様と照合してください。読み込んだ後は装飾と操作を公開ページでも確かめます。
配布されたJSONを使う場合は、各配布ページの要件と公式ドキュメントを照合します。指定されたCSS・JavaScript欄が利用環境にない場合は、読み込みだけで同じ表示になるとは限りません。
Panels & Dividers：編集画面をグループ分けして整理できる
入力項目が10個、20個と増えてくると、編集画面は縦に長くなり見づらくなります。Panels & Dividersを使うと、「基本設定」「デザイン設定」「上級者向け設定」のように項目をグループ化し、パネルごとに折りたたんで表示できます。
編集欄をパネルにまとめると、入力担当者が作業のまとまりを把握しやすくなります。必須欄を開いた状態にする、補助設定を後ろへ置くなど、実際の入力順に並べて確認してください。問い合わせ件数が減るかは運用後に確かめる項目です。
SEO Enhancements：独自ブロックの文章を解析へ反映する
SEOプラグインとの連携は、独自ブロックの文章を解析へ渡すための補助です。解析結果へ本文が反映されるかを確認できますが、スコアや検索順位の向上を保証する機能ではありません。
ここで扱った機能は、入力欄の見せ分け、既存投稿の選択、スタイル管理など、異なる作業を補助します。実装要件を一つずつ確認し、使わない入力や設定は増やさずに構成してください。
表示コードを配布・再利用する場合は、対象のバージョン、必要なコントロール、CSSやJavaScriptの配置方法も記録します。受け取った環境で入力・保存・公開表示を確認できることが、再利用の前提です。
条件分岐や投稿選択を使う場合は、現在の導入環境に対応する機能があるかを公式ドキュメントで確認します。本記事の機能説明は実装上の違いを示すもので、導入やアップグレードを前提にするものではありません。
AIに出力コードの下案を作らせる場合も、実装者が内容を確認します。空の入力、予想外の文字、画像が未設定の場合を試し、出力する値を適切にエスケープしてください。作成時間や費用削減は構成次第なので、一度の生成で完成する前提にしないことが大切です。
9. よくあるエラーと対処法
実際にLazy Blocksでどこまでのデザインが作れるかは、Arkhe Blocksの無料版が使えなくなった人へ｜安全な代替手段で紹介している自作ブロックの実例も参考になります。
実装例を無料テンプレートで確かめる
サンプルを検証用ページへ取り込み、入力から公開表示まで試せます。必要なブロックを選び、自分のテーマと画面幅で確認してください。
- 実装済みの入力項目を確認
- 長文・空欄・画像なしも試す
- 実ページへ適用する前に表示を確認
テンプレートごとの必要条件を確認してください。
まとめ
最初の目標は、入力した文字が保存後と公開ページの両方で同じように表示されることです。次に空欄・長文・複数配置を試し、同じ形を繰り返す必要が出てからRepeaterへ進みましょう。うまくいかないときは、入力名・値の型・出力コード・公開表示の順に戻ると、調べる箇所を絞れます。必要な項目の章だけ参照しながら、小さな構成で確認を積み重ねてください。
