Lazy Blocksのテンプレートとは？作成手順と使い方のコツ

※本記事にはアフィリエイト広告（PR）を含みます。

Lazy Blocksでオリジナルのブロックを作ってみたものの、「入力したフィールドの値がうまく画面に表示されない」「テンプレートという項目があるけれど、どこをどう編集すればよいのか分からない」と感じたことはありませんか。

結論からお伝えすると、Lazy Blocksのテンプレートとは、作成したブロックの入力内容をどのようなHTMLとして出力するかを決める設定のことで、Templateタブから編集できる場合があります。

ただし、出力方法にはHTML・PHP・Theme Templateといった種類があり、選び方によって記述の自由度や管理のしやすさが変わってくるため、事前に違いを確認しておくことが望ましいとされています。

この記事では、Lazy Blocksのテンプレートの基本的な考え方から、編集画面へのたどり着き方、出力方法ごとの使い分け、そして繰り返しフィールドやブログカードなど実践的な使い方のコツまでを順に紹介します。

Lazy Blocksでブロックを作り始めたばかりの方にも、テンプレートの記述でつまずいている方にも、整理された手順として役立つ内容になっています。

テンプレートの仕組みと出力方法の選び方を押さえれば、見た目のブロックを作りやすくなります。

この記事でわかること

• Lazy Blocksのテンプレートが担う役割と編集画面へのアクセス方法
• HTML・PHP・Theme Templateという3つの出力方法の違いと選び方
• $attributesや$blocksなど変数を使った値の取り出し方
• 繰り返しフィールドやブログカードなど実践的なテンプレートの組み方

Lazy Blocksのテンプレートとは？ブロックの見た目を決める出力設定のこと

Lazy Blocksのテンプレートとは、作成したブロックが実際にどう表示されるかを決める出力設定のことです。
管理画面で入力欄やコントロールを組み立てても、それだけでは見た目は決まりません。
入力された値をどのようなHTMLやレイアウトで画面に反映させるか、その仕組みを担っているのがテンプレート部分です。

ブロック編集画面のTemplateタブが実際の表示HTMLを作る場所になる

Lazy Blocksでブロックを作成すると、コントロール設定と並んでTemplateタブという項目が用意されています。
ここが、入力した値を実際の表示に変換する場所です。
コントロールタブで「見出し」や「画像」などの入力項目を作った後、Templateタブでそれらをどんな順番・構造で表示するかを組み立てます。

たとえば見出し用のテキストと本文用のテキストを用意した場合、Templateタブ側で見出しをh3に、本文をp要素に割り当てる、といった記述を行います。
この対応づけがなければ、せっかく入力した値も画面には反映されません。

初めて触れる人にとっては、コントロールを作った時点で表示まで自動的にできあがると思いがちです。
実際にはコントロールは入力の受け皿にすぎず、表示の組み立ては別作業として必要になります。
ここを理解しておくと、後の作業でつまずきにくくなります。

投稿タイプごとに初期配置を決めるBlocks Templatesは別機能として用意されている

Lazy Blocksには、似た名前を持つ別の機能としてBlocks Templatesがあります。
これは、投稿タイプを新規作成した際に、あらかじめ指定したブロックを自動的に配置しておく仕組みです。

名前が近いため混同しやすいのですが、役割はまったく異なります。
今回扱う「テンプレート」はブロック単体の見た目を作る設定であり、Blocks Templatesは投稿編集画面を開いたときの初期状態を整える設定です。

• ブロックのTemplate：入力値を表示HTMLに変換する仕組み
• Blocks Templates：投稿タイプごとの初期配置を決める仕組み

この違いを最初に押さえておくと、設定を探すときに迷いにくくなります。
両者は連携して使う場面もありますが、今回のセクションではブロック単体の見た目を作る仕組みに焦点を当てて解説を進めます。

コードを書かずに作ったブロックでも出力部分だけはHTMLやPHPの記述が必要になる

Lazy Blocksの利点は、入力項目（コントロール）自体は管理画面の操作だけで組み立てられる点です。
テキスト欄や画像選択、繰り返し項目なども、コードを書かずにクリック操作で追加できます。

ただし出力部分については話が別です。
Templateタブでは、Handlebarsというテンプレート構文、またはPHPのコードを使って表示内容を記述する必要があります。
ここだけは、ごく簡単な記述であってもコードの知識が求められる場面です。

コントロール作成だけで満足してテンプレート側を空欄のままにしてしまうと、保存しても画面に表示されない場合があります。
この点でつまずく人は少なくないため、最初の段階で「出力設定は別に必要」と意識しておくことが大切です。

難しい構文をいきなり覚える必要はなく、簡単な変数の呼び出し方から始めれば十分対応できます。
次のセクション以降で、実際の設定手順や具体的な書き方について順を追って見ていきます。

テンプレートの編集は管理画面のLazy Blocks内から数ステップでたどり着く

テンプレートの編集画面には、プラグインを有効化したあと数クリックで到達できる場合があります。
専門的な設定画面を探し回る必要はなく、管理画面の決まった場所を順にたどるだけで作業を始められます。
ここでは実際の手順を、迷いやすいポイントとあわせて確認していきます。

プラグインを有効化するとメニューにLazy Blocksの項目が追加される

Lazy Blocksを有効化すると、WordPressの管理画面左側のメニューに新しい項目が追加されます。
ここが、ブロックの作成や編集をおこなうための入り口です。
まずはこの場所を見つけることから始まります。

メニューをクリックすると、これまでに作成したブロックの一覧が表示される画面に進みます。
初めて使う場合はこの一覧が空の状態になっているため、新規追加のボタンから作業を始める流れです。
一覧画面は、複数のブロックを管理するようになったあとにも頻繁に開く場所なので、位置を覚えておくと後々の作業がスムーズになります。

なお、メニュー項目の名称や配置は、使用しているプラグインのバージョンによって多少異なる場合があります。
表示が見当たらないときは、プラグインが有効化された状態になっているかをまず確認しておくと安心です。

新規ブロック作成後、右側の設定パネルでOutput Methodを選ぶ

新規ブロックの作成画面を開くと、右側に設定パネルが表示されます。
この中にあるOutput Methodという項目が、テンプレートの編集方法を決める重要な設定です。
ここで選んだ内容によって、続く作業の進め方が変わってきます。

Output Methodには複数の選択肢が用意されており、それぞれ表示の仕組みが異なります。
代表的な選択肢を簡単に整理すると、次のような違いがあります。

選択肢	編集する場所	向いている場面
Callback	テーマ側の関数	プログラムでの細かな制御をしたい場合
Template（HTML/PHP）	ブロック編集画面内のTemplateタブ	管理画面だけで完結させたい場合
Theme Template	テーマフォルダ内のファイル	コードをテーマ側で一括管理したい場合

この段階で選択を誤ると、あとから設定を見直す手間が発生します。
特にOutput Methodを選び直すと、それまで書いていたテンプレートの内容が引き継がれない可能性がありますため、作業の初期段階でどの方法を使うか決めておくことが推奨されます。
迷ったときは、まず管理画面内で完結する方法から試してみると扱いやすいです。

コントロールを追加してから保存すると変数名がテンプレートで使えるようになる

ブロックに入力欄を用意する作業は、コントロールの追加という形でおこないます。
テキストや画像、繰り返し項目などいくつかの種類が用意されており、必要な項目を選んで並べていく形式です。

ここで重要なのが、コントロールごとに設定する名前です。
この名前が、テンプレート側で値を呼び出すときの変数名として使われる仕組みになっています。
名前を入力し忘れたり、あとから変更したりすると、テンプレート側の記述と食い違ってしまい、値が表示されなくなる原因になります。

• コントロールを追加したら、名前の欄を必ず確認する
• 一度保存してから、Templateタブで変数名を使う
• 名前を変更した場合は、テンプレート側の記述も忘れずに合わせる

作業の順序としては、コントロールを追加していったん保存し、そのあとにTemplateタブへ移動して変数名を使った記述をおこなう流れが基本です。
保存という一手間を挟むことで、テンプレート側の候補として変数名が反映される傾向がありますため、この順番を意識しておくと迷いにくくなる場合があります。
次の項目からは、それぞれの出力方法の具体的な使い分けについて見ていきます。

出力方法はHTML・PHP・Theme Templateの3種類から用途で選び分ける

Lazy Blocksの出力方法は、作りたいブロックの複雑さに応じて選び方が変わる傾向があります。
シンプルな表示ならHTML、条件やくり返しが絡むならPHP、コードをテーマ管理下に置きたいならTheme Templateという具合に、目的別の使い分けが基本になります。
この3つの違いを理解しておくと、あとから作り直す手間が減ります。

簡単な装飾だけならHandlebars構文が使えるHTMLが最短ルート

見出しやテキスト、画像を並べるだけのシンプルなブロックであれば、HTML出力を選ぶのが取り組みやすい方法です。
Lazy BlocksのHTML出力欄ではHandlebars構文という記法が使えるため、プログラミングの基礎知識があれば変数を差し込む程度の記述は比較的短時間で習得できる場合があります。

たとえば見出しコントロールの値を表示したい場合、二重の波かっこで変数名を囲むだけで値が反映される仕組みになっています。
この手軽さが、HTML出力が最短ルートと言われる理由です。

ただし、Handlebars構文でできることには限りがあります。
複雑な条件分岐や計算をともなう表示には向かない場面もあるため、装飾中心のブロックに絞って使うのが無難です。

初めてLazy Blocksに触れる場合は、まずHTML出力で簡単なブロックを一つ作ってみると、テンプレートの仕組み全体がつかみやすくなります。
慣れてきたらPHPへ移行するという段階的な進め方もおすすめできます。

条件分岐やループを書くならPHPを選ぶと自由度が上がる

値が入力されているときだけ表示を切り替えたい、あるいはくり返しフィールドを一件ずつ処理したいといった場面では、PHP出力を選ぶと表現の幅が広がります。
PHPは本来のプログラミング言語であるため、if文やforeach文といった制御構文をそのまま記述できるのが特徴です。

たとえばボタンのリンク先が未入力のときはボタン自体を非表示にする、といった細かい条件分けもPHPなら実現しやすくなります。
Handlebars構文よりも書ける処理の自由度が高い分、コードの記述量は増える傾向にあります。

一方で、PHPの構文を誤って書いてしまうと、画面全体にエラー表示が出たり、ブロックが正常に描画されなくなったりすることがあります。
括弧の閉じ忘れやセミコロンの抜けは表示崩れの原因になりやすい傾向がありますため、保存前に一度見直す習慣をつけておくことが推奨されます。

すでにPHPの記述に慣れている場合は、最初からPHP出力を選んでおくと、あとから機能を追加するときにもスムーズに対応できます。

コードをテーマ側で管理したいならTheme Templateが保守しやすい

ブロックの出力コードを管理画面の入力欄ではなく、テーマのファイルとして管理したい場合はTheme Templateを選びます。
この方法では、テンプレートの中身がテーマ内のファイルに書き出されるため、コードエディタでの編集やバージョン管理がしやすくなります。

特に複数人でサイトを運用している場合や、コードの変更履歴を残しておきたい場合には、管理画面の入力欄よりもファイル管理のほうが扱いやすいと感じる場面が多いようです。
テーマの更新作業とあわせて見直しやすい点も利点のひとつです。

三つの出力方法の特徴をまとめると、次のように整理できます。

出力方法	向いている用途	記述のしやすさ
HTML	装飾中心のシンプルな表示	Handlebars構文で手軽
PHP	条件分岐やくり返し処理	制御構文が使え自由度が高い
Theme Template	コードのファイル管理・保守	テーマ側での編集がしやすい

どの方法を選ぶかは、ブロックの複雑さと運用体制の両方を見て決めるとよさそうです。
次の項目では、Theme Templateを選んだ場合に置くべきファイルの場所について具体的に見ていきます。

Theme Templateを選んだらテーマ直下のblocks/ブロック名/block.phpに置く

Theme Templateを選んだ場合は、テーマフォルダの中にある「blocks」ディレクトリに、ブロックごとのフォルダとblock.phpというファイルを用意します。
この配置ルールさえ押さえておけば、あとはPHPの記述をテーマ側でまとめて管理できるようになります。
ここでは具体的な置き場所と、つまずきやすいポイントを順番に見ていきます。

ディレクトリ名はブロックのスラッグと完全に一致させる

Theme Templateの仕組みは、ブロックのスラッグ名と同じ名前のフォルダを自動的に探しにいく作りになっています。
たとえば「blog-card」というスラッグでブロックを作った場合、置き場所は「テーマ/blocks/blog-card/block.php」という形になります。

ここで注意したいのが、スラッグとフォルダ名は1文字でもずれると認識されない可能性があるという点です。
大文字・小文字の違いや、ハイフンとアンダースコアの取り違えも同様にうまく読み込まれない原因になります。

• ブロックのスラッグは設定パネルで事前に確認しておく
• フォルダ名はコピー＆ペーストで入力し、手打ちのミスを避ける
• 複数のブロックを扱う場合はフォルダ名の一覧を別途メモしておく

特にチームで複数人が同じテーマを触る環境では、フォルダ名の命名ルールを最初に共有しておくと後々の手直しが少なくて済みます。
地味な作業に見えますが、この一致確認がテンプレート作成全体の土台になる部分です。

子テーマを使う場合は子テーマ側のフォルダが優先して読み込まれる

子テーマを使って運用しているサイトでは、blocksフォルダも子テーマ側に作成したものが優先して読み込まれる仕組みになっている傾向があります。
親テーマ側にも同名のフォルダやファイルがあった場合、基本的には子テーマ側の内容が表示に反映される形です。

この仕組みは、親テーマの更新によって編集内容が上書きされてしまう事態を避けるうえで役立ちます。
テーマ本体をアップデートしても、子テーマ側に置いたblock.phpはそのまま残るため、カスタマイズ内容を保ちやすくなります。

一方で、親テーマと子テーマの両方にblocksフォルダを作ってしまい、どちらを編集しているのか分からなくなるケースも見受けられます。
編集する際は、今使っているテーマが親か子かを最初に確認する習慣をつけておくと、無駄な作業を減らせます。

ファイルが見つからないと何も表示されないのでパスを最初に確認する

Theme Templateを設定したのに編集画面や実際のページで何も表示されない場合、多くはblock.phpの配置場所が想定と異なっている可能性があります。
エラーメッセージが出ないまま空白表示になることもあるため、原因に気づきにくい点に注意が必要です。

確認する順番としては、まずテーマフォルダ直下にblocksフォルダがあるか、その中にスラッグ名と同じフォルダがあるか、そのフォルダの中にblock.phpという名前のファイルがあるか、という3段階でチェックすると原因を絞り込みやすくなります。

確認箇所	チェック内容
フォルダの階層	テーマ直下にblocksフォルダがあるか
フォルダ名	ブロックのスラッグと一致しているか
ファイル名	block.phpという名前になっているか
子テーマの有無	子テーマ側に古いファイルが残っていないか

この4点を上から順に見直すだけで、表示されない原因の大半は解消できる場合が多いです。
ファイル名やパスの確認は地味な作業ですが、最初にここを丁寧に押さえておくことで、後の編集作業がぐっとスムーズになります。

テンプレート内では$attributes・$blocks・$contextの3変数で値を取り出す

Theme Templateの中身を書くとき、覚えておく変数は主に$attributes・$blocks・$contextの3つが挙げられます。
入力フィールドの値、インナーブロックの中身、投稿IDなどの周辺情報が、それぞれこの3変数を通して渡されてきます。
仕組みがシンプルなので、一度型を覚えてしまえば応用が利きやすくなります。

入力したフィールドの値は$attributes[‘コントロール名’]で受け取る

ブロック編集画面でテキストや画像などのコントロールを追加すると、その入力値は$attributes配列の中にコントロール名をキーとして格納される仕組みになっています。
例えばコントロール名を「title」としていた場合、テンプレート側では$attributes[‘title’]と書くことで、その値を呼び出せます。

この対応関係はLazy Blocksの基本になる部分で、以降のセクションで扱う繰り返しフィールドや画像コントロールも、根っこの考え方は同じです。
コントロール名とテンプレート内で使う配列キーが一致していないと値が表示されないため、名前の付け方は最初にルールを決めておくと管理しやすくなります。

• コントロール名は半角英数字とアンダースコアで統一しておく
• 日本語や記号を使うと配列キーとして扱いにくくなる場合がある
• 命名規則を決めておくと後から編集する人にも伝わりやすい

特に複数人でブロックを作る場面では、コントロール名の表記ゆれで値が出力されない場合があるという点に注意が必要です。
titleとTitleのように大文字小文字が違うだけでも別のキーとして扱われるため、作成時と編集時で名前を統一しておくことが欠かせません。

インナーブロックを配置するときは$blocksで子ブロックを描画する

親ブロックの中に別のブロックを差し込みたい場合、その子ブロックの情報は$blocks変数を通して渡されます。
段落ブロックや見出しブロックなどをインナーブロックとして配置しているケースでは、この変数を使って子ブロックの内容を表示位置に反映させる形です。

$attributesが単一の値を扱うのに対し、$blocksは子ブロックの集まりを扱う点が異なります。
ブログカードのようにリンクや画像を組み合わせたパーツを作る際にも、構造の一部としてインナーブロックを使うケースは少なくありません。

ただし、すべてのブロックでインナーブロックの機能を使うわけではなく、シンプルなテキスト出力だけであれば$attributesのみで完結する場合もあります。
$blocksを使うかどうかは、そのブロックの中に別のブロックを入れる設計にするかどうかで判断すると迷いにくくなります。

投稿IDなど周辺情報が必要な場面で$contextを活用する

ブロック自体の入力値だけでなく、そのブロックが置かれている投稿のIDやタイトルなど周辺の情報が必要になる場面もあります。
そうした場合に使うのが$context変数で、投稿に関する情報をテンプレート内から参照できるようにする役割を持っています。

例えば同じ投稿内の別フィールドと連携させたい場合や、投稿IDを使って関連情報を取得したい場合など、$attributesだけでは完結しない処理を組みたいときに$contextの出番となります。
PHPの条件分岐と組み合わせることで、表示内容を投稿ごとに調整するといった使い方もできます。

ここまでの3変数は、それぞれ役割がはっきり分かれているため、迷ったときは「入力値なら$attributes」「子ブロックなら$blocks」「周辺情報なら$context」という形で整理しておくと判断しやすくなります。
この整理を頭に入れておくだけで、テンプレートを書く際の見通しがぐっと立てやすくなります。

繰り返しフィールドは配列としてforeachで回すとカスタムフィールド代わりになる

繰り返し入力が必要な項目は、Repeaterコントロールとforeach文を組み合わせることで、カスタムフィールドのように扱えます。
ブログカードを複数並べたり、ステップ形式の手順を表示したりする場面で特に役立つ書き方です。
ここでは配列の中身の取り出し方と、つまずきやすいポイントを順番に見ていきます。

Repeaterコントロールの値は多次元配列で返ってくる

Lazy Blocksで用意されているRepeaterコントロールは、1つの入力欄ではなく、複数の項目をまとめて登録できる仕組みになっています。
テンプレート側でこの値を受け取ると、単純な文字列ではなく多次元配列として渡ってくる点がポイントです。
つまり、外側の配列が「行」を表し、その中にさらにタイトルや本文といった各フィールドの配列が入れ子になっている状態です。

この構造を扱うには、foreach文で配列を1行ずつ回す書き方が基本になります。
たとえば手順を並べるブロックであれば、以下のようなイメージでコードを組み立てます。

• $attributes[‘steps’]で繰り返しフィールド全体を取得する
• foreach ($attributes[‘steps’] as $step) で1行ずつ変数に入れる
• $step[‘title’]や$step[‘text’]のように行の中の項目を呼び出す

この流れさえ覚えてしまえば、項目数が増えても記述量を大きく増やさずに対応できます。
手作業で似たコードを何行も書き並べるよりも、見通しの良いテンプレートに仕上がりやすいという利点があります。

画像コントロールはURLやIDなどキーを指定して取り出す

Repeaterの中に画像コントロールを組み込んだ場合、値の受け取り方が少し変わってきます。
画像コントロールは1つの値だけでなく、URLやID、代替テキストといった複数の情報をまとめて保持しているため、必要な項目をキーで指定して取り出す形になります。

具体的にどのようなキーが用意されているかは、次のような形で整理しておくと迷いにくくなります。

キー名	取り出せる値
url	画像ファイルのURL
id	メディアライブラリ上の画像ID
alt	代替テキスト

例えば$step[‘image’][‘url’]のように書けば、その行に登録された画像のURLだけを取り出せます。
IDが必要な場面では同じ考え方で[‘id’]に置き換えるだけなので、一度キーの構造を覚えてしまえば応用が利きやすい部分です。

画像に限らず、リンクコントロールなど複数の情報を持つコントロールも同様にキー指定で値を取り出す仕組みになっています。
コントロールの種類ごとにどんなキーがあるかを把握しておくと、テンプレート作成の作業がスムーズに進みます。

値が空のときの表示崩れはissetや空判定で防いでおく

繰り返しフィールドを使ったテンプレートで見落としやすいのが、値が入力されていない行への対応です。
画像を設定していない行や、テキストを空欄のままにしている行があると、そのままforeachで回した際にエラー表示や余白の乱れにつながることがあります。

入力が空の項目をそのまま出力しようとすると、警告が表示されたりレイアウトが崩れたりする可能性があります。
これを防ぐには、issetや空判定を使って値の有無を先に確認しておく方法が有効です。

例えば画像が設定されていない行では、その部分の表示を丸ごとスキップするような条件分岐を入れておくと安心です。
isset($step[‘image’][‘url’]) を条件式に使い、値がある場合だけ画像タグを出力するようにしておけば、入力漏れがあっても表示が崩れにくくなります。

テキスト項目についても同様で、empty関数を使って空欄かどうかを確認してから見出しやリンクを出力すると、余分な枠や空白が残りにくくなります。
特に運用を担当するのが自分以外の人になる場合は、入力漏れが起きる前提でテンプレート側に空判定を仕込んでおくと、後々の手直しを減らせます。

こうした空判定は最初は手間に感じられるかもしれませんが、一度書いてしまえば繰り返しフィールドを使うたびに同じ考え方を流用できます。
表示の安定したブロックを作るうえで、欠かせない工程のひとつといえます。

出力HTMLに余分なdivが付くのはLazy Blocksの仕様なのでCSS側で吸収する

ブロックを保存してプレビューすると、想定していなかったdivタグが増えていて戸惑うことがあります。
これはLazy Blocksの仕様なので、CSS側で吸収するのが現実的な対応です。
テンプレートを書き直して消そうとするより、ラップ要素の存在を前提にスタイルを組み立てたほうが手戻りが少なくなります。

ラップ要素にはブロック名由来のクラスが自動で付与される

Lazy Blocksで作ったブロックは、テンプレートで記述した内容の外側に、ブロック全体を囲むための要素が自動で挿入されます。
この要素には、ブロック名やスラッグをもとにしたクラス名が付くようになっています。
テンプレート内には書いていないのに、ブラウザの検証ツールで確認するとdivが増えているのは、この仕組みによるものです。

クラス名の付け方はブロックごとにある程度規則性があるため、一度どのようなクラスが付くか確認しておくと、後々のスタイル調整がスムーズになります。
このラップ要素の存在を前提に設計することが、余分な手直しを減らす第一歩といえるでしょう。

複数のブロックを組み合わせてページを作る場合、それぞれのラップ要素が重なることで、想定より入れ子構造が深くなる場面もあります。
デザインの崩れに気づいたときは、まずこのラップ要素の階層を疑ってみると原因が見つかりやすいです。

余白や枠線はラップ要素のクラスを起点に指定すると崩れにくい

マージンやパディング、枠線などのスタイルは、テンプレート内の要素に直接指定するより、自動付与されるラップ要素のクラスを起点にして書いたほうが安定します。
ラップ要素とテンプレート内の要素の両方にスタイルを当てると、余白が二重に効いてしまい、表示が間延びして見えることがあるためです。

実際の指定では、次のような考え方で整理すると管理しやすくなります。

• 外側の余白や背景色はラップ要素のクラスに指定する
• 内側の文字サイズや行間はテンプレート内の要素に指定する
• 枠線やボックスの角丸はラップ要素側にまとめて指定する

この役割分担を意識しておくと、あとからデザインを変更したいときにも、どこを触れば良いか迷わずに済みます。
ラップ要素の存在を忘れてテンプレート内だけにスタイルを書き込むと、環境によって余白の出方が変わる可能性があります。

どうしても純粋なHTMLが必要ならPHP出力で構造を最小限にする

デザインの都合上、どうしても余分な要素を挟みたくない場面も出てきます。
そうした場合は、出力方法をPHPに切り替えて、テンプレート内で出力するタグを自分で組み立てる方法があります。
PHPであれば、条件分岐と組み合わせながら、必要な要素だけを狙って書き出すことができます。

ただし、ラップ要素自体を完全になくすことは想定されていない作りになっているため、あくまで内側の構造をできるだけシンプルにする、という考え方になります。
外側の要素は残る前提で、その内側にどこまで最小限のマークアップを書けるかを工夫する形です。

下記のように、出力方法ごとの向き不向きを整理しておくと選択の目安になります。

出力方法	ラップ要素への対応	向いている場面
HTML（Handlebars）	ラップ要素をそのまま受け入れる	装飾中心のシンプルなブロック
PHP	内側の構造を最小限に調整できる	マークアップにこだわりたい場面
Theme Template	PHPと同様に内側を調整できる	複雑な条件分岐やコード管理を重視する場面

用途に応じてCSSで吸収するかPHPで構造を絞るかを選び分けると、見た目の崩れに悩まされにくくなります。

ブログカードやステップ表示はテンプレートのサンプルを写すと最短で作れる

よく使われるブログカードやステップ表示、ボックス装飾は、ゼロから設計しなくても既存の構成をなぞれば形になります。
仕組みが分かれば応用が利く組み合わせばかりなので、まずは代表的な3パターンの考え方を押さえておくと取りかかりやすくなります。

ブログカードはリンク・画像・抜粋の3コントロールで組める

ブログカードは、リンク先URL・画像・テキスト（抜粋）という3つのコントロールを用意するだけで骨組みが完成します。
テンプレート側ではリンクを外枠のaタグに、画像コントロールの値をimgタグのsrcに、テキストコントロールの値を見出しや説明文に差し込む形が基本です。

この組み方の良いところは、入力側が迷わずに済む点です。
編集者は「URLを貼る」「画像を選ぶ」「一言入力する」の3手順だけで済むため、記事内に複数個所差し込む運用でも負担が増えにくくなります。

• リンクコントロール：カード全体または見出し部分のリンク先に使う
• 画像コントロール：サムネイル表示用、URLとIDの両方が取得できる
• テキスト（またはテキストエリア）コントロール：タイトルや抜粋文に使う

画像が未設定のまま公開されるとレイアウトが崩れやすいので、画像コントロールが空のときの代替表示を用意しておくことが推奨されます。
テンプレート内で空判定を入れておけば、画像なしのカードでも見た目が破綻しにくくなります。

フロー（ステップ）は繰り返しフィールドと連番のCSSで再現する

手順を順番に見せるステップ表示は、繰り返しフィールドの中にステップ番号・見出し・説明文を持たせる構成で再現できます。
テンプレート内でforeachを回しながら1件ずつliやdivとして出力し、CSS側でカウンターを使って連番を自動表示させる流れです。

番号をテキストコントロールとして毎回手入力する方法もありますが、並べ替えたときに番号がずれてしまう点は注意が必要です。
CSSのcounter-incrementを使えば、順番を入れ替えても番号が自動でついてくるため、編集時のミスを減らせます。

矢印や区切り線を各ステップの間に入れたい場合は、最後の要素にだけ矢印を付けない工夫も欠かせません。
CSSの:last-childを使って最終ステップの矢印を非表示にすると、見た目の整ったフロー表示になります。

繰り返しフィールドの数が想定より少ないとレイアウトが間延びして見える可能性がありますため、3件・4件など想定件数を決めてからCSSの幅や余白を調整することが推奨されます。

ボックスや吹き出しは1つ作ればコピーして流用できる

注意書きボックスや吹き出しのようなパーツは、1種類作っておけば色違いや形違いのバリエーションをCSSクラスの切り替えだけで増やせます。
テンプレート側にセレクトコントロールで「タイプ」を持たせ、選んだ値に応じてクラス名を変える組み方が扱いやすい方法です。

例えば「注意」「補足」「ポイント」といった種類をセレクトで選べるようにしておけば、同じブロックのまま見た目だけ切り替えられます。
テンプレートを何個も作らずに済むため、1つのブロックを育てていくイメージで使い回すのが効率的です。

吹き出しの場合は、アイコン画像コントロールを追加して発言者ごとに切り替える構成もよく使われます。
左右の向きを変えたいときはセレクトの値をクラス名にそのまま反映させると、CSS側の分岐がシンプルにまとまります。

こうした汎用パーツは一度整えておくと、記事のたびに毎回作り直す手間がなくなります。
次に触れる初期配置の設定と組み合わせると、さらに使い勝手が良くなっていきます。

投稿タイプごとの初期配置を設定すれば毎回ブロックを探す手間がなくなる

投稿タイプごとの初期配置は、Blocks Templatesという機能を使うことで設定できます。
毎回同じブロックをブロック一覧から探して挿入する作業がなくなり、新規投稿を開いた時点で必要なパーツがすでに並んだ状態から書き始められます。
特に決まった構成で記事を作ることが多いサイトでは、この設定だけで作業のリズムが変わってきます。

Blocks Templatesで対象の投稿タイプを指定する

Blocks Templatesは、Lazy Blocksの管理画面の中でテンプレート編集とは別に用意されている項目です。
ここでは投稿タイプを選び、その投稿タイプの新規作成画面を開いたときに、どのブロックをどの順番で配置しておくかをあらかじめ組んでおけます。
通常のブロック配置と同じ感覚でブロックを並べられるため、特別な学習コストはかかりません。

例えば通常の投稿には見出し用ブロックと本文用ブロック、末尾に関連リンク用ブロックを並べておく、といった構成が組めます。
固定ページ用の投稿タイプには別の並びを用意することもでき、投稿タイプごとに最適な初期状態を分けて管理できるのが特徴です。
投稿タイプごとに初期配置を変えられる点は、複数のコンテンツ形式を運用しているサイトほど恩恵を感じやすい部分です。

設定自体はブロックエディタの操作と同じ流れで完了するため、コードの知識がなくても迷わず進められます。
ただし対象の投稿タイプを間違えて選んでしまうと、意図しない画面に初期配置が反映されてしまうことがあるため、保存前に選択欄を見直しておくと安心です。

ロック設定を使えば編集者による削除や並べ替えを防げる

初期配置を組んでも、編集者が誤って削除したり順番を入れ替えたりすると、せっかくの構成が崩れてしまいます。
そこでLazy Blocksでは、配置したブロックに対してロックをかけられます。
ロックの種類には主に次のようなものがあります。

• ブロック自体の削除を禁止するロック
• ブロックの移動や並べ替えを禁止するロック
• 削除と移動の両方を禁止する組み合わせのロック

チームで運用しているサイトでは、担当者によってブロックエディタの操作に慣れている度合いが異なります。
ロックをかけておくことで、構成が意図せず崩れてしまう事態を防ぎやすくなる可能性があります点は、複数人で執筆や更新を行う現場において特に有用と考えられます。

一方で、ロックを厳しくかけすぎると、本来は自由に編集したい箇所まで操作できなくなり、かえって使いにくくなることもあります。
どの範囲をロックするかは、実際の運用フローに合わせて調整していくとよさそうです。

使用頻度の高い定型フォーマットほど初期配置の効果が大きい

初期配置の設定は、どのブロックでも同じように効果が出るわけではありません。
使用頻度が高く、毎回ほぼ同じ形で使う定型的なフォーマットほど、あらかじめ配置しておく恩恵は大きくなります。
逆に使う場面が限られるブロックまで初期配置に含めてしまうと、不要な要素が並ぶ画面になり、かえって編集しづらくなることもあります。

例えば記事の冒頭に置く導入文用のブロックや、末尾の関連コンテンツ案内といった、ほぼ毎回同じ位置に置くパーツは初期配置との相性がよい代表例です。
反対に、内容によって使ったり使わなかったりするブロックは、必要なときに手動で挿入する形のほうが画面がすっきりします。

どのブロックを初期配置に含めるかの検討が、この機能を活かせるかどうかの重要なポイントになります。
実際にサイトで書いている記事をいくつか見返し、共通して使われているパーツを洗い出すところから始めると、初期配置に何を組み込むべきかが見えてきます。

設定後もしばらく運用してみて、使いにくい部分があれば配置内容やロックの範囲を見直していく、という進め方が現実的です。
一度組んだら終わりではなく、記事作成の実態に合わせて少しずつ調整していく姿勢が、長く使えるテンプレート作りにつながります。

Genesis Custom Blocksとの違いはラップdivとアイコンの扱いに表れる

Lazy BlocksとGenesis Custom Blocksを比べると、出力されるHTMLの構造やアイコン選択の自由度に違いが見られます。
どちらもコードを書かずにブロックを作れるプラグインですが、出力の仕組みや管理画面の作りが異なるため、向いている場面も変わってきます。
ここでは両者の違いを具体的に見ていきます。

Genesis Custom Blocksは出力HTMLが素直でマークアップを制御しやすい

Genesis Custom Blocksは、テンプレートファイルに書いた内容がほぼそのまま出力される作りになっています。
Lazy Blocksのように、ラップ要素にブロック名由来のクラスが自動で付くといった仕様がなく、余分なdivが挟まりにくい点が特徴です。

この違いは、既存のCSS設計に合わせて細かくマークアップを整えたい場面で効いてきます。
前のセクションで触れたように、Lazy Blocksでは出力されたHTMLにラップ要素が付くため、CSS側で吸収する工夫が必要になる場面がありますが、Genesis Custom Blocksではその手間が少なくて済みます。

ただし、素直な出力であることは、裏を返せば管理画面側の補助が少ないということでもあります。
テンプレートの書き方や変数の扱いを自分で把握しておく必要があり、コードに慣れていない人にとっては入り口のハードルがやや高く感じられることもあります。

マークアップの精度を優先したいサイトや、既存のデザインシステムに厳密に合わせたいケースでは、Genesis Custom Blocksの出力の素直さが選定理由になりやすいといえます。

「Genesis Custom Blocks」を検索して探す

Lazy Blocksは管理画面の作りやすさとアイコン選択の自由度で優位に立つ

一方でLazy Blocksは、管理画面上でフィールドを組み立てる操作のしやすさに強みがあります。
コントロールの種類が豊富で、テキスト・画像・繰り返しフィールドなどをドラッグ操作に近い感覚で追加でき、初めてブロックを作る人でも迷いにくい作りになっています。

アイコンの扱いも大きな違いのひとつです。
Lazy Blocksでは、ブロック一覧に表示されるアイコンを豊富な選択肢の中から選べるため、ブロックの種類が増えてきたときにも見分けが付きやすくなります。
管理画面の使いやすさを重視するチームにとって、この点は日々の作業効率に直結する部分です。

反対に、アイコンの選択肢が限られていたり、初期設定のままだと、似たようなブロックが並んだときに区別しづらくなることがあります。
ブロック数が増えてから見分けにくさに気づくと、後から整理し直す手間が増える傾向がありますため、作成の早い段階でアイコンを設定しておくことが推奨されます。

管理画面の作りやすさとアイコンの自由度は、日常的にブロックを追加・編集する運用の場面で効いてくる要素です。
ブロックの数が多いサイトほど、この違いが体感しやすくなります。

既存記事の資産やチーム内のスキルに合わせて片方に統一する

両者を比べたうえで大切なのは、どちらか一方を選択して運用することが推奨されます。
プラグインが混在すると、テンプレートの書き方やコントロールの扱いがブロックごとに異なり、後から編集する人が混乱しやすくなります。

選び方の目安としては、以下のような整理ができます。

観点	Genesis Custom Blocks向き	Lazy Blocks向き
出力HTMLの精度	素直な出力を優先したい	多少のラップは許容できる
管理画面の操作性	コード中心の運用に慣れている	画面操作で完結させたい
アイコン管理	こだわりが少ない	ブロック数が多く見分けが必要
チームのスキル	PHPやテーマ開発の経験者が多い	コード未経験者も編集に関わる

すでに一定数の記事やブロックがある場合は、既存の資産をどちらのプラグインで組んでいるかも判断材料になります。
移行のコストを考えると、今使っている仕組みに合わせて統一するほうが無理のない進め方です。

新規に環境を整える場合は、チームの中でコードを書ける人がどれくらいいるかを基準にすると選びやすくなります。
管理画面での操作を中心にしたいならLazy Blocks、マークアップの制御を優先したいならGenesis Custom Blocksという整理が、実務での判断材料になります。

Node.js環境なしでブロックを作りたいならLazy Blocksが現実的な選択肢になる

コードを書ける人がチームにいない、あるいはNode.jsやReactの開発環境を整える時間が取れない場合、Lazy Blocksは管理画面の操作だけでカスタムブロックを作成できる可能性のある選択肢です。
Gutenbergのブロック開発は本来JavaScriptのビルド環境を必要としますが、Lazy Blocksを使うとその手間を大きく省ける点が特徴です。
ここでは無料版の範囲や比較対象となるプラグイン、情報を補うための参照先について整理します。

項目	Lazy Blocks（カスタムブロックビルダー）	Genesis Custom Blocks
開発環境	管理画面のみで完結	管理画面のみで完結
出力HTML	ラップ用のdivが付与される	作成したテンプレート構成のまま出力される
繰り返しフィールド	対応している	（本セクションの提供情報の範囲では記載なし）
投稿テンプレート機能	投稿タイプごとの初期配置に対応	（本セクションの提供情報の範囲では記載なし）
価格・提供形態	無料プラグインとして提供	詳細は公式サイトや販売ページで確認が必要

Lazy Blocks（カスタムブロックビルダー）は無料版だけでも実用範囲が広い

Lazy Blocksは、nKが提供する無料プラグインで、公式サイトのlazyblocks.comから入手できるとされています。
管理画面上でコントロールを追加し、出力方法をHTML・PHP・Theme Templateから選ぶだけでブロックが仕上がる流れは、これまでのセクションで触れてきた通りです。
無料の範囲内でも繰り返しフィールドや投稿タイプごとのテンプレート配置まで扱えるため、個人サイトから小規模なチーム運用まで活用できる可能性の広さが特徴です。

ただし機能が豊富な分、設定項目も多くなりがちです。
どのコントロールがどの出力方法と組み合わさるかを整理しないまま触ると、途中で迷子になりやすい点は注意しておきたいところです。
導入初期は小さなブロックから試して、出力の仕組みに慣れてから複雑な構成に進む進め方が無理がありません。

また無料版で完結できる範囲が広い一方、細かな挙動や仕様は更新によって変わる場合があります。
実際に組み込む前には、公式サイトや配布ページで現在のバージョン情報を確認しておくと安心です。

「Lazy Blocks（カスタムブロックビルダー）」を検索して探す

Genesis Custom Blocksはシンプル志向の人に向いた比較対象になる

Genesis Custom Blocksも同じくコードを書かずに管理画面からブロックを作成できるプラグインで、作成したテンプレートのHTML構成をそのままフロントに出力できる点が特徴です。
前のセクションで触れたように、Lazy Blocksのようなラップ用のdivが付かないため、マークアップをそのまま反映させたい場面ではLazy Blocksを選ぶと修正作業が増える可能性がありますので、この違いについては理解しておくことが重要です。

機能の幅よりも構成のシンプルさを優先したいチームには、Genesis Custom Blocksの作りが合っている場合があります。
反対に、繰り返しフィールドや投稿タイプごとの初期配置など、Lazy Blocksが持つ機能を積極的に使いたい場合は、Lazy Blocks側を選ぶほうが目的に沿った進め方になります。

どちらを選ぶにしても、実際にいくつかブロックを組んでみてから判断するのが現実的です。
触ってみないと分からない細かな使い勝手の差は、資料を読むだけでは把握しきれない部分でもあります。

公式サイトlazyblocks.comのドキュメントとBaseOneの解説記事で情報を補う

Lazy Blocksの詳細な設定項目や更新情報は、公式サイトlazyblocks.comのドキュメントで確認できます。
管理画面の各設定項目に迷ったときは、まず公式のドキュメントに立ち返るのが基本の動き方です。

加えて、Lazy Blocksの解説記事を配布しているBaseOneでは、シングルページやLP向けの無料HTMLテンプレートも用意されており、テンプレートの作り方を具体例として参照する材料になります。
実際の出力例を見比べながら自分のブロックに応用すると、抽象的な設定画面の意味が理解しやすくなります。

プラグインの仕様は更新に伴って変わることがあるため、記事や資料だけを頼りにせず、導入前に公式情報を確認しておくことが推奨されます。
最新の機能やドキュメントの内容は、公式サイトや配布ページで随時ご確認ください。

楽天市場で「BaseOne」を見る

まとめ

この記事のポイントをまとめます。

• Lazy Blocksのテンプレートとは、ブロック編集画面のTemplateタブで設定する出力用のHTML部分のことを指す
• 投稿タイプごとの初期配置を決めるBlocks Templatesとは別の機能として区別しておくとわかりやすい
• テンプレートの編集は、Lazy Blocksのメニューからブロックを開き、設定パネルでOutput Methodを選ぶ流れでたどり着ける
• 出力方法にはHTML・PHP・Theme Templateの3種類があり、装飾の簡単さや条件分岐の有無に応じて選び分けられる
• Theme Templateを選んだ場合は、テーマ直下のblocks/ブロック名/block.phpという場所にファイルを置く必要がある
• テンプレート内では$attributes・$blocks・$contextという3つの変数を使って、入力値やインナーブロック、投稿情報を取り出せる
• 繰り返しフィールドは多次元配列として扱われるため、foreachで回せばカスタムフィールドのような使い方ができる
• 出力されるHTMLには自動でラップ要素が付くため、余白や枠線はそのクラスを起点にCSSで調整すると崩れにくい
• ブログカードやステップ表示などはサンプルの構成を参考にすると、比較的短い手順で形にしやすい

Lazy Blocksのテンプレートは、最初のうちは設定項目や変数の意味がつかみにくく感じられるかもしれません。
ただ、Output Methodの違いや$attributesなどの基本変数の役割さえ押さえてしまえば、思ったよりも見通しよく扱える仕組みだと感じられるはずです。

特にTheme Templateを使う方法は、コードをテーマ側でまとめて管理できるという点で、後からの調整や見直しがしやすくなる選び方といえます。
反対に、ちょっとした装飾だけを加えたい場合は、HTML出力でHandlebars構文を使う方法の方が手軽に感じられることも多いでしょう。

繰り返しフィールドやラップ要素まわりのくせは、最初は戸惑うポイントかもしれませんが、一度パターンをつかんでしまえば、ブログカードやステップ表示のような定型的なデザインにも応用しやすくなります。
既存のサンプルを手元で真似しながら試すことで、少しずつ感覚がつかめてくるはずです。

Genesis Custom Blocksなど他のプラグインとの違いも踏まえながら、自分の制作スタイルやチームの状況に合った方法を選んでいただければと思います。
まずは1つ、身近な用途のブロックからテンプレートづくりを試してみてはいかがでしょうか。