WordPressのブロックエディタは便利ですが、「毎回同じ形の枠を作るのが面倒」という場面が必ず出てきます。
料金表、施工事例、スタッフ紹介、注意書きのボックス——決まった形で繰り返し使う要素を、毎回手作業で組み立てるのは非効率です。
しかも担当者によって見た目がばらつきます。
これを解決するのがカスタムブロックです。
入力欄を用意しておき、担当者はそこを埋めるだけで、常に同じ体裁の要素が出力される——という仕組みを作れます。
この記事で分かること
- カスタムブロックが必要になる場面
- 3つの作り方と、それぞれの向き不向き
- プラグイン（Lazy Blocks）を使った具体的な手順
- 導入前に知っておくべき運用上の注意
カスタムブロックが必要になる場面
| 場面 | カスタムブロックにする利点 |
|---|---|
| 料金表を記事ごとに載せる | 入力欄と表の構造を固定し、崩れを減らせる |
| 注意書き・補足のボックス | デザインが統一される |
| 担当者プロフィール | 写真・名前・肩書きの配置が固定される |
| 比較表・スペック表 | HTMLを触らずに作れる |
| CTA（申し込み導線） | 文言とリンクだけ差し替えられる |
| 症例・施工事例の定型項目 | 必須項目を設定し、記載漏れを見つけやすくできる |
最後の行は、規制のある業種で特に重要です。
たとえば症例紹介では、治療内容・期間と回数・費用・主なリスクや副作用などを入力欄にすると、確認すべき情報を揃えやすくなります。入力欄だけで医療広告の要件を満たすとは限らないため、公開内容は厚生労働省の医療広告資料に照らして確認してください。
詳しくはクリニックのホームページに必要なコンテンツをご覧ください。
3つの作り方の比較
| 方法 | 難易度 | 特徴 | 向いているケース |
|---|---|---|---|
| 再利用ブロック（同期パターン） | 低 | WordPress標準機能。作った内容をそのまま使い回す | 内容も含めて完全に同じものを繰り返す |
| プラグイン（Lazy Blocks等） | 中 | 入力欄を定義し、PHPとCSSで出力を書く | 形は同じ、中身は毎回違う |
| 自作ブロック（block.json＋JS） | 高 | Reactでの実装。自由度が最も高い | 複雑な操作性が必要／制作会社が構築する |
多くの場合、2番目のプラグイン方式で足ります。入力欄の定義と出力テンプレートの記述だけで済み、JavaScriptの開発環境も不要です。
1番目の再利用ブロックは、「中身まで同じもの」を複数箇所で使い、一括で修正したい場合に有効です。
中身が毎回違うならカスタムブロックの出番です。
以下では、2番目の方法を具体的に見ていきます。
WordPressのカスタムブロックの作り方はいろいろありますが、今回は専用のプラグイン（Lazy Blocks）を使って作成してみます。
無料ですが、とても使いやすいプラグインです。
パラメータの作成
テキストや画像、URLといった様々なタイプのパラメータの枠を定義します。
コードの作成
PHPでコードを書きます。
先ほどのパラメータを参照しています。
もちろんCSSも書いて見た目も整えます。
最後に保存すれば完了です。
カスタムブロックを使用
作成したブロックを読み込み、記事編集画面のパラメーターを入力していきます。
見た目だけでなく、HTMLのコードや色も変更できるようにできます。
こちらは編集画面のブロックの状態です。
最後に記事を公開して確認します。
作るときのポイント
入力欄は少なくする
自由度を上げようとして入力項目を増やすと、結果的に使われなくなります。担当者が「何を入れればいいか分からない」状態になるためです。
迷ったら削ってください。
色や余白の指定まで入力欄にするより、デザインは固定し、テキストと画像だけを入力させるほうが運用は安定します。
必須項目を設定する
必須項目を設定すると、入力漏れに気付きやすくなります。
必須設定だけに依存せず、空欄の保存・再編集・公開時の挙動を使用バージョンと権限で確かめ、出力側にも空値の処理を用意してください。
ラベルを担当者の言葉にする
入力欄の名前を「title」「desc」ではなく、「見出し（20文字以内）」「説明文（改行OK）」のように具体的にしてください。
文字数の目安を添えるだけで、レイアウト崩れが大きく減ります。
CSSはテーマ側にまとめる
ブロックごとにスタイルを書き散らすと、後から一括で調整できなくなります。
Lazy Blocksのblock.cssまたは適切に読み込む子テーマのCSSへ集約し、ブロック側はクラス名を出力する構成にしておくと保守が楽になります。
導入前に知っておくべき注意点
便利な反面、将来の制約になる要素でもあります。ここを理解したうえで導入してください。
| 注意点 | 内容 |
|---|---|
| プラグインへの依存 | 停止後の表示は実装による。PHPで動的に出力するブロックでは出力が失われる場合があるため、使用箇所と代替表示を確認する |
| テーマ移行時に壊れる | CSSがテーマ側にある場合、テーマを変えると見た目が崩れる |
| プラグインの開発終了 | 更新が止まると、WordPress本体との非互換や不具合への対応が受けられない場合がある |
| 他社への引き継ぎ | 独自ブロックの仕様を、次の担当者・制作会社が把握する必要がある |
| 作りすぎると管理できない | 20個も30個も作ると、どれを使うか分からなくなる |
1つ目と2つ目が実務では重くのしかかります。カスタムブロックを多用したサイトは、テーマを変更するときの作業量が跳ね上がります。
移行の実際は他テーマからSWELLへの移行手順と注意点をご覧ください。
依存を減らす工夫
- 作る数を絞る：本当に繰り返し使うものだけ。
5〜10個までを目安に - まずテーマの標準ブロックで作れないか検討する：SWELLなど有料テーマは独自ブロックが豊富で、それで足りることが多い
- 出力するHTMLをシンプルに保つ：構造が単純なほど、移行時の置き換えが容易
- 仕様をドキュメントに残す：ブロック名、入力欄、用途を一覧にしておく
2つ目が特に効きます。
テーマの標準機能で実現できるなら、そちらを使ってください。テーマに含まれるブロックなら、少なくともプラグイン依存は増えません。
テーマごとのブロックの充実度は有料WordPressテーマ比較で解説しています。
よくある質問
Q. プログラミングの知識は必要ですか？
プラグインを使う方法でも、出力部分にPHPとHTML、見た目にCSSの知識が必要です。入力欄の定義だけならコード不要ですが、出力テンプレートは書く必要があります。
難しい場合は制作会社に依頼してください。
Q. 制作会社に作ってもらう場合、いくらくらいですか？
費用は入力項目、出力の条件分岐、編集画面の作り込み、確認範囲によって変わります。必要な項目と使用環境を伝え、個別に見積もりを確認してください。
依頼時は「どの入力欄が必要か」を先に整理しておくと、見積もりの精度が上がります。
Q. 再利用ブロックとの違いは？
再利用ブロックは「中身まで同じもの」を使い回す機能です。
1箇所直せば全箇所に反映されます。
カスタムブロックは「形だけ同じで、中身は毎回違う」場合に使います。
用途が異なります。
Q. 作ったブロックが編集画面で崩れます
編集画面用のCSSが読み込まれていない可能性があります。
プラグインによっては、編集画面用のスタイルを別途指定する必要があります。編集画面と実際の表示が近いほど、担当者の作業効率は上がります。
Q. WordPressの更新でブロックが動かなくなりました
プラグイン側が新しいWordPressに対応していない可能性があります。
まずプラグインを最新版に更新してください。それでも直らない場合の切り分け手順はバージョンアップでサイトが壊れたときの対処にまとめています。
まとめ
- カスタムブロックは「形は同じ、中身は毎回違う」要素に使う
- 多くの場合、プラグイン方式（Lazy Blocks等）で足りる
- 入力欄は絞り、必須項目を設定する。記載漏れを仕組みで防げる
- プラグイン依存とテーマ移行時のリスクを理解して導入する
- まずテーマの標準ブロックで作れないかを検討する
- 作る数は5〜10個まで。
仕様は必ずドキュメントに残す
カスタムブロックは、「担当者が迷わず、崩さずに更新できる状態」を作るための道具です。
作ること自体が目的にならないよう、運用の実態から必要なものだけを見極めてください。
コピーして試せる注意書きブロック
Lazy Blocksで新規ブロックを作り、TextコントロールのNameをnotice_title、TextareaコントロールのNameをnotice_bodyに設定します。
出力方式をPHPにし、block.php欄へ次のコードを貼ります（functions.phpへ貼るコードではありません）。
<?php
$heading = isset($attributes['notice_title']) && is_string($attributes['notice_title']) ? trim($attributes['notice_title']) : '';
$body = isset($attributes['notice_body']) && is_string($attributes['notice_body']) ? trim($attributes['notice_body']) : '';
if ($heading === '' && $body === '') return;
?>
<aside class="waza-notice">
<?php if ($heading !== '') : ?><p class="waza-notice__title"><strong><?php echo esc_html($heading); ?></strong></p><?php endif; ?>
<?php if ($body !== '') : ?><p><?php echo nl2br(esc_html($body)); ?></p><?php endif; ?>
</aside>次のCSSは、子テーマのスタイルシートなど、使用中のテーマで適用される場所に追加します。Lazy Blocks 4.4.2の無料版ではblock.css欄がPro機能と表示されるため、この欄へ保存する方法はPro版の機能を利用できる場合に使ってください。
.waza-notice { padding: 1em; border: 1px solid #777; }
.waza-notice__title { margin-top: 0; }編集画面で2つの値を入力して保存し、再編集と公開画面を確認します。
この例の出力はローカルWordPressで検証し、Lazy Blocksの管理画面での保存と全権限のプレビューは未検証です。
戻すときは既存記事の使用箇所を先に通常ブロックへ置き換え、出力が不要になってからブロック定義を無効化してください。
PHPの出力方法はLazy Blocks公式資料を参照してください。
Lazy Blocks 4.4.2での注意書きブロックの表示例
以下は2026年10月13日に、新規Local環境（WordPress 7.1.3、PHP 8.1.23、Twenty Twenty-Five 1.5、Lazy Blocks無料版4.4.2）へ用意した架空ブロックの実画面です。見出しのTextコントロールはnotice_title、本文のText Areaコントロールはnotice_bodyで、block.phpには上の掲載PHPを使っています。
架空の見出し・本文は撮影前に準備した見本です。定義画面のPHPプレビューと、投稿編集画面の2つの入力欄・プレビューが表示されることを確認しました。今回は管理画面からの値の変更やSaveボタンの操作はしていません。再保存・権限別・本番サイトや他の構成での動作は未検証です。
block.cssタブを開くと、無料版ではStyle EditorがPro機能である案内が表示されました。掲載CSSをこの欄へ入れたり、Pro機能を有効にしたりはしていません。そのため写真のプレビューは、掲載CSSで枠線などを整えた結果ではありません。コード・既存画像・以前の未検証注記は残しています。
