記事の中に情報を持たせたいときはACF(Advanced Custom Fields)のカスタムフィールドに入力しますが、
ブログカードなどブロック単位をカスタムしたい時は無料のカスタムブロック作成プラグインLazy Blocksをよく使います。
そのサンプルコードです。
Lazy Blocksのインストールとカスタムブロック作成の基本手順
動作に必要な環境は、WordPress 6.2以上、PHP 8.0以上です(バージョン4.4.1の時点)。

WordPressの管理画面で、プラグインの新規追加からLazy Blocksを検索します。
プラグインをインストールして有効化します。
ブロックの作成は3つの段階で進めます。
最初に、ブロックの名前・アイコン・カテゴリーなどを設定します。
次に、入力欄(コントロール)をドラッグ&ドロップで追加します。
入力欄はブロックの中か右側の設定パネルに配置できます。
最後にHTMLかPHPで表示用のコードを書きます。

ベーシック│Lazy Blocksのサンプルコード解説
基本的にはベーシックの出力方法は全て同じです。
下の「出力結果」は既存の見本です。掲載コードを修正しても、その見本の出力テンプレートは自動では更新されません。今回変更した未入力・0・色・日時などの条件を実環境で検証済みとするものではありません。
テキスト
テキストの出力結果は、ユーザーが入力した文字列がそのまま表示されます。
<!-- テキスト -->
<h3>テキスト</h3>
<p>
<?php
if ( isset( $attributes['my_text'] ) && '' !== $attributes['my_text'] ) {
echo nl2br( esc_html( $attributes['my_text'] ) );
}
?>
</p>
テキストの出力結果
「テキスト」の値を出力
テキストエリア
テキストエリアは、複数行のテキストを入力する場合に使用されます。
コメントや説明文など、長めの文章を扱う際に便利です。
<!-- テキストエリア -->
<h3>テキストエリア</h3>
<p>
<?php
if ( isset( $attributes['my_textarea'] ) && '' !== $attributes['my_textarea'] ) {
echo nl2br( esc_html( $attributes['my_textarea'] ) );
}
?>
</p>
テキストエリアの出力結果
「テキストエリア」の値を出力
「テキストエリア」の値を出力
「テキストエリア」の値を出力
数値
数値フィールドは、数値のみを入力する際に使用します。
ユーザーが数値を入力すると、その数値が直接出力されます。
<!-- 数値 -->
<h3>数値</h3>
<p>
<?php
if ( isset( $attributes['my_number'] ) ) {
echo esc_html( $attributes['my_number'] );
}
?>
</p>
数値の出力結果
777
範囲
範囲フィールドは、スライダーで数値を指定する場合に使用します。
ユーザーが指定した範囲内の数値が出力されます。
<!-- 範囲 -->
<h3>範囲</h3>
<p>
<?php
if ( isset( $attributes['my_range'] ) ) {
echo esc_html( $attributes['my_range'] );
}
?>
</p>
範囲の出力結果
6
URL
URLフィールドは、リンクやWebアドレスを入力するために使用します。
ユーザーが入力したURLは、リンクとして出力されます。
<!-- URL -->
<h3>URL</h3>
<p>
<a href="<?php echo esc_url( $attributes['my_url'] ?? '' ); ?>">
<?php echo esc_html( $attributes['my_url'] ?? '' ); ?>
</a>
</p>
URLの出力結果
メールアドレス
メールアドレスフィールドは、ユーザーがメールアドレスを入力するために使用します。
出力時には、「mailto:」リンクとして表示され、クリックするとメールクライアントが開きます。
<!-- メールアドレス -->
<h3>メールアドレス</h3>
<p>
<a href="<?php echo esc_url( 'mailto:' . ( $attributes['my_email'] ?? '' ) ); ?>">お問い合わせ</a>
</p>
メールアドレスの出力結果
パスワード
Passwordコントロールは編集画面の入力文字を伏せますが、保存値を暗号化しません。認証用パスワードやAPIキーなどの秘密情報を、このブロック属性へ保存しないでください。
ここでは値を公開せず、固定の案内文だけを表示します。HTMLエスケープは、秘密の値を非公開にする処理ではありません。

<!-- パスワード -->
<h3>パスワード</h3>
<p>パスワードの値は公開しません。</p>パスワードの出力結果
パスワードの値は公開しません。
コンテンツ│Lazy Blocksのサンプルコード解説
テキスト以外のデータは記述方法が異なります。
画像
画像フィールドは、ユーザーがアップロードした画像を表示するために使用します。
画像のURLとaltテキストが出力されます。
<!-- 画像 -->
<h3>画像</h3>
<?php if ( isset( $attributes['my_image']['url'] ) ) : ?>
<img src="<?php echo esc_url( $attributes['my_image']['url'] ); ?>" alt="<?php echo esc_attr( $attributes['my_image']['alt'] ?? '' ); ?>">
<?php endif; ?>
画像の出力結果

ギャラリー
ギャラリーフィールドは、複数の画像をまとめて表示する場合に使用します。
ユーザーが選択した複数の画像がギャラリーとして表示されます。
<!-- ギャラリー -->
<h3>ギャラリー</h3>
<?php if ( ! empty( $attributes['my_gallery'] ) && is_array( $attributes['my_gallery'] ) ) : ?>
<?php foreach( $attributes['my_gallery'] as $image ): ?>
<?php if ( is_array( $image ) && ! empty( $image['url'] ) ) : ?>
<img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ?? '' ); ?>">
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
ギャラリーの出力結果


ファイル
Fileコントロールで選んだファイルのURLを利用できます。次の例は音声ファイルをaudio要素で表示するものです。PDFなどの文書リンクを出力する例ではありません。
<!-- ファイル -->
<h3>ファイル</h3>
<?php if ( isset( $attributes['my_file']['url'] ) ) : ?>
<audio src="<?php echo esc_url( $attributes['my_file']['url'] ); ?>" controls>
お使いのブラウザは、オーディオ要素に対応していません。
</audio>
<?php endif; ?>
ファイルの出力結果
リッチテキスト (WYSIWYG)
リッチテキストフィールドは、WYSIWYGエディタ(What You See Is What You Get)を使用して、装飾されたテキストを入力する場合に使用します。
<!-- リッチテキスト (WYSIWYG) -->
<h3>リッチテキスト (WYSIWYG)</h3>
<div>
<?php echo wp_kses_post( $attributes['my_rich_text'] ?? '' ); ?>
</div>
リッチテキスト (WYSIWYG)の出力結果
「リッチテキスト」の値を出力
クラシックエディター (WYSIWYG)
クラシックエディターフィールドは、従来のWordPressエディタスタイルでリッチテキストを入力するために使用します。
<!-- クラシックエディター (WYSIWYG) -->
<h3>クラシックエディター (WYSIWYG)</h3>
<div>
<?php echo wp_kses_post( $attributes['my_classic_editor'] ?? '' ); ?>
</div>
クラシックエディター (WYSIWYG)の出力結果
「クラシックエディター」の値を出力
コードエディター
コードエディターフィールドは、コードを入力して、そのまま表示する場合に使用します。
コードはエスケープされて表示されるため、実行されることはありません。
<!-- コードエディター -->
<h3>コードエディター</h3>
<pre>
<?php echo esc_html( $attributes['my_code'] ?? '' ); ?>
</pre>
何も選択されていません。
選択
選択フィールドは、ユーザーが事前に定義されたオプションから選択する際に使用します。
ラベルと値が設定され、出力されます。
<!-- 選択 -->
<h3>選択</h3>
<?php if ( isset( $attributes['my_select']['label'], $attributes['my_select']['value'] ) ) : ?>
<p>ラベル: <?php echo esc_html( $attributes['my_select']['label'] ); ?></p>
<p>値: <?php echo esc_html( $attributes['my_select']['value'] ); ?></p>
<?php else : ?>
<p>選択の値が正しく設定されていません。</p>
<?php endif; ?>Output FormatはBoth (Array)で設定

選択の出力結果
ラベル: 選択2
値: 2
ラジオボタン

ラジオボタンフィールドは、複数のオプションから1つを選択する際に使用します。
選択されたラベルと値が出力されます。
<!-- ラジオボタン -->
<h3>ラジオボタン</h3>
<?php if ( isset( $attributes['my_radio']['label'], $attributes['my_radio']['value'] ) ) : ?>
<p>ラベル: <?php echo esc_html( $attributes['my_radio']['label'] ); ?></p>
<p>値: <?php echo esc_html( $attributes['my_radio']['value'] ); ?></p>
<?php else : ?>
<p>ラジオボタンの値が正しく設定されていません。</p>
<?php endif; ?>Output FormatはBoth (Array)で設定

ラジオボタンの出力結果
ラベル: 選択肢1
値: 出力結果1
チェックボックス
次の例は、単一のチェックボックスのオン・オフを真偽値として表示します。複数の選択肢の値を列挙するコードではありません。

選択状態が出力されます。
<!-- チェックボックス -->
<h3>チェックボックス</h3>
<?php if ( ! empty( $attributes['my_checkbox'] ) ) : ?>
<p>値は「True」です</p>
<?php else: ?>
<p>値は「False」です</p>
<?php endif; ?>
チェックボックスの出力結果
値は「True」です
切り替え(トグル)
トグルフィールドは、オン/オフのスイッチを表示する際に使用します。
選択状態が出力されます。
<!-- 切り替え -->
<h3>切り替え</h3>
<?php if ( ! empty( $attributes['my_toggle'] ) ) : ?>
<p>値は「True」です</p>
<?php else: ?>
<p>値は「False」です</p>
<?php endif; ?>
切り替えの出力結果
値は「True」です
上級者向け│Lazy Blocksのサンプルコード解説
上級者向けのコードです。
非常に便利な情報を入力できます。
カラーピッカー
カラーピッカーフィールドは、ユーザーが色を選択する際に使用します。
次の例は、3桁または6桁のHEX色を文字色として使います。空欄やこの形式以外の値では色を指定しません。透過色・RGBA・背景色の出力はこの例の対象外です。

<!-- カラーピッカー -->
<h3>カラーピッカー</h3>
<?php
$color_input = $attributes['my_color'] ?? '';
$color = is_string( $color_input ) ? sanitize_hex_color( $color_input ) : null;
?>
<p<?php if ( $color ) : ?> style="color: <?php echo esc_attr( $color ); ?>"<?php endif; ?>>
ここにテキスト
</p>
カラーピッカーの出力結果
ここにテキスト
日時ピッカー
日時ピッカーフィールドは、ユーザーが日付と時刻を選択する際に使用します。
選択された日時がフォーマットされた形で出力されます。
この例は、コントロールが返す日時文字列をstrtotimeで読み、従来のdate_i18nで表示します。空欄や読み取り失敗では日時を表示しません。保存される日時の形式とタイムゾーン、夏時間をまたぐ表示は実環境で未確認です。

<!-- 日時ピッカー -->
<h3>日時ピッカー</h3>
<?php
$datetime_input = $attributes['my_datetime'] ?? '';
$datetime_value = is_string( $datetime_input ) && '' !== trim( $datetime_input )
? strtotime( $datetime_input )
: false;
?>
<?php if ( false !== $datetime_value ) : ?>
<p>日付と時刻: <?php echo esc_html( date_i18n( 'Y年n月j日 H:i', $datetime_value ) ); ?></p>
<p>日付: <?php echo esc_html( date_i18n( 'Y年n月j日', $datetime_value ) ); ?></p>
<p>時刻: <?php echo esc_html( date_i18n( 'H:i', $datetime_value ) ); ?></p>
<?php else : ?>
<p>日時が未入力、または読み取れない値です。</p>
<?php endif; ?>
日時ピッカーの出力結果
日付と時刻: 2024年8月1日 14:58
日付: 2024年8月1日
時刻: 14:58
レイアウト│Lazy Blocksのサンプルコード解説
リピーターのブロックです。
情報の数が決まってない時はリピーターで付け足していきます
繰り返し
繰り返しフィールドは、複数のデータセットを入力し、それを繰り返し表示する場合に使用します。
各セットのデータが順番に出力されます。
<!-- 繰り返し -->
<h3>繰り返し</h3>
<?php if ( ! empty( $attributes['my_repeater'] ) && is_array( $attributes['my_repeater'] ) ) : ?>
<?php foreach( $attributes['my_repeater'] as $inner ): ?>
<p>
<?php echo esc_html( is_array( $inner ) ? ( $inner['my_repeater_text'] ?? '' ) : '' ); ?>
</p>
<?php endforeach; ?>
<?php endif; ?>
繰り返しの出力結果
「繰り返し1」のテキスト
「繰り返し2」のテキスト
Deprecated(非推奨)│Lazy Blocksのサンプルコード解説
Deprecatedは非推奨という意味です。旧Inner Blocksコントロールを使っている場合は、公式の移行案内を確認してください。
インナーブロック
インナーブロックフィールドは、他のブロックをネストして表示する際に使用します。
<div class="my-custom-block">
<InnerBlocks />
</div>旧Inner Blocksコントロールの出力例はここには掲載しません。公式の移行案内に沿って、FrontendとEditorの出力を確認してください。
Lazy Blocksの表示コードの書き方とメタフィールド保存
表示コードはPHPのほかにHTMLとHandlebarsで書けます。
テーマのフォルダーに配置したテンプレートファイルでも記述できます。
ブロックの入力欄を投稿のメタフィールドとして保存する設定も選べます。
2026年10月11日に掲載コードを静的に読み、公式資料と照合しました。今回、WordPress・PHP・Lazy Blocksでコードを実行していません。導入中のバージョン、属性名と出力形式、未入力時の表示、日時の扱い、画像・音声の読み込みは実環境で未確認です。
ほかの実装方法は、WordPressの使い方まとめから確認してください。


