WordPressのブロックエディタは便利ですが、「毎回同じ形の枠を作るのが面倒」という場面が必ず出てきます。
料金表、施工事例、スタッフ紹介、注意書きのボックス——決まった形で繰り返し使う要素を、毎回手作業で組み立てるのは非効率です。
しかも担当者によって見た目がばらつきます。
これを解決するのがカスタムブロックです。
入力欄を用意しておき、担当者はそこを埋めるだけで、常に同じ体裁の要素が出力される——という仕組みを作れます。
この記事で分かること
- カスタムブロックが必要になる場面
- 3つの作り方と、それぞれの向き不向き
- プラグイン（Lazy Blocks）を使った具体的な手順
- 導入前に知っておくべき運用上の注意
カスタムブロックが必要になる場面
| 場面 | カスタムブロックにする利点 |
|---|---|
| 料金表を記事ごとに載せる | 項目を入力するだけ。表の崩れが起きない |
| 注意書き・補足のボックス | デザインが統一される |
| 担当者プロフィール | 写真・名前・肩書きの配置が固定される |
| 比較表・スペック表 | HTMLを触らずに作れる |
| CTA（申し込み導線） | 文言とリンクだけ差し替えられる |
| 症例・施工事例の定型項目 | 必須項目を設定でき、記載漏れを防げる |
最後の行は、規制のある業種で特に重要です。
たとえばクリニックの症例掲載では、治療内容・期間と回数・費用・リスクの4項目が必須になります。
これをカスタムブロックの入力欄として用意しておけば、担当者が変わっても記載漏れが起きません。
詳しくはクリニックのホームページに必要なコンテンツをご覧ください。
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へ集約し、ブロック側はクラス名を出力する構成にしておくと保守が楽になります。
導入前に知っておくべき注意点
便利な反面、将来の制約になる要素でもあります。ここを理解したうえで導入してください。
| 注意点 | 内容 |
|---|---|
| プラグインへの依存 | プラグインを止めると、そのブロックは表示されなくなる |
| テーマ移行時に壊れる | CSSがテーマ側にある場合、テーマを変えると見た目が崩れる |
| プラグインの開発終了 | 更新が止まれば、いずれWordPress本体と非互換になる |
| 他社への引き継ぎ | 独自ブロックの仕様を、次の担当者・制作会社が把握する必要がある |
| 作りすぎると管理できない | 20個も30個も作ると、どれを使うか分からなくなる |
1つ目と2つ目が実務では重くのしかかります。カスタムブロックを多用したサイトは、テーマを変更するときの作業量が跳ね上がります。
移行の実際は他テーマからSWELLへの移行手順と注意点をご覧ください。
依存を減らす工夫
- 作る数を絞る：本当に繰り返し使うものだけ。
5〜10個までを目安に - まずテーマの標準ブロックで作れないか検討する：SWELLなど有料テーマは独自ブロックが豊富で、それで足りることが多い
- 出力するHTMLをシンプルに保つ：構造が単純なほど、移行時の置き換えが容易
- 仕様をドキュメントに残す：ブロック名、入力欄、用途を一覧にしておく
2つ目が特に効きます。
テーマの標準機能で実現できるなら、そちらを使ってください。テーマに含まれるブロックなら、少なくともプラグイン依存は増えません。
テーマごとのブロックの充実度は有料WordPressテーマ比較で解説しています。
よくある質問
Q. プログラミングの知識は必要ですか？
プラグインを使う方法でも、出力部分にPHPとHTML、見た目にCSSの知識が必要です。入力欄の定義だけならコード不要ですが、出力テンプレートは書く必要があります。
難しい場合は制作会社に依頼してください。
Q. 制作会社に作ってもらう場合、いくらくらいですか？
シンプルなもので1ブロックあたり2万〜8万円が目安です。
入力項目が多いもの、条件分岐があるものはさらにかかります。
依頼時は「どの入力欄が必要か」を先に整理しておくと、見積もりの精度が上がります。
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>block.cssには次のCSSを保存します。
.waza-notice { padding: 1em; border: 1px solid #777; }
.waza-notice__title { margin-top: 0; }編集画面で2つの値を入力して保存し、再編集と公開画面を確認します。
この例の出力はローカルWordPressで検証し、Lazy Blocksの管理画面での保存と全権限のプレビューは未検証です。
戻すときは既存記事の使用箇所を先に通常ブロックへ置き換え、出力が不要になってからブロック定義を無効化してください。
PHPの出力方法はLazy Blocks公式資料を参照してください。
