Bricks ビルダーでカスタムフィールドの値を表示するには、「フィールドを用意する → Bricks の要素に動的データタグを入れる → テンプレートやクエリループで表示範囲を決める」の3段階で設定します。この記事では、ACF（Advanced Custom Fields）でフィールドを作った場合を例に、動的データタグの入れ方、画像やリンクへの使い方、繰り返し表示、値が空になるときの確認ポイントまでを説明します。
前提と準備
Bricks はプラグインではなく「テーマ」として動くページビルダーです。functions.php に手を入れる可能性があるなら、Bricks の公式サイトのアカウント画面から配布されている子テーマ（Bricks Child Theme）を有効にしておき、親テーマの Bricks には直接手を加えないようにします。作業前にはサイト全体のバックアップを取り、できればステージング環境で試してから本番に反映してください。
動的データとは、要素の中に固定の文字ではなく {post_title} のような「タグ」を入れておき、表示時に投稿ごとの値へ置き換える仕組みです。タイトルや投稿日のような WordPress 標準の値に加えて、ACF・Meta Box などの対応プラグインで作ったフィールドや、標準のカスタムフィールド（投稿メタ）も扱えます。対応プラグインの範囲やタグの名前は Bricks のバージョンで変わることがあるため（2026年10月現在）、以下のタグは「ピッカーから選ぶと実際に何が入るか」を確かめながら読んでください。
ステップ1：表示したいフィールドを作る
まず値を入れる箱を用意します。ACF の場合は「ACF」→「フィールドグループ」で新規グループを作り、たとえば次のようなフィールドを追加します。
- 価格（フィールドタイプ: 数値、フィールド名:
price） - 担当者コメント（テキストエリア、フィールド名:
staff_comment） - 商品画像（画像、フィールド名:
item_image） - 詳細ページURL（URL、フィールド名:
detail_url）
ここで大事なのが2点です。1つ目は「フィールド名」で、Bricks のタグはラベル（画面に出る日本語名）ではなくフィールド名を使います。後から名前を変えると、すでに入れたタグが空になるので、最初に英数字で決めておきます。2つ目は「位置（ロケーションルール）」で、表示したい投稿タイプにフィールドグループが割り当てられていないと、Bricks 側のピッカーにも候補が出てきません。
画像フィールドの返り値の形式（配列・URL・ID）は、Bricks の画像要素で使うなら配列か ID にしておくと、サイズ指定や alt の取得がしやすくなります。作成後、実際の投稿をいくつか開いて値を入力しておきます。値が入った投稿がないと、ビルダー上で表示を確認できません。
ステップ2：要素に動的データタグを入れる
Bricks でページまたはテンプレートを編集し、見出しやテキストの要素を置きます。テキストを入力する欄にある動的データのアイコン（稲妻のマーク）をクリックすると、使えるタグの一覧が出ます。ここから選ぶと、正しい書式のタグが自動で入るので、手入力より間違いが起きにくくなります。
ACF のフィールドを選ぶと、多くの場合 {acf_price} のように「acf_ + フィールド名」の形で入ります。標準のカスタムフィールドは {cf_フィールド名}、WordPress 標準の値は {post_title}・{post_date}・{post_excerpt}・{featured_image}・{author_name} などです。
タグは文章の途中に混ぜることもできます。
価格：{acf_price}円（税込）
担当者より：{acf_staff_comment}
最終更新：{post_modified}タグの後ろにコロンで指定を付けると、表示形式を変えられるものがあります。たとえば抜粋を短くする {post_excerpt:20} や、日付の書式を指定する形式です。使える指定はタグごとに違い、バージョンでも追加・変更があるため、公式ドキュメントの動的データのページで確認してから使ってください。
ステップ3：画像・リンク・条件表示に使う
文字だけでなく、要素の設定項目そのものにも動的データを使えます。
画像要素では、画像の選択欄で動的データを選び、ACF の画像フィールドやアイキャッチ（{featured_image}）を指定します。こうすると、投稿ごとに違う画像が表示されます。alt テキストが空になっていないかもあわせて確認しておくと、アクセシビリティの面でも安心です。
ボタン要素のリンク先も、リンク設定の種類を外部 URL にして、URL 欄に {acf_detail_url} を入れれば投稿ごとに切り替えられます。URL が空の投稿では壊れたボタンが出てしまうため、次の「条件」と組み合わせます。
Bricks の要素には表示条件（Conditions）を設定でき、条件の種類として動的データを選ぶと「このタグの値が空でなければ表示」といった指定ができます。価格が未入力の投稿では価格欄ごと隠す、URL がない投稿ではボタンを出さない、という使い方です。
ステップ4：テンプレートとクエリループで表示範囲を決める
個別ページ用のテンプレート
投稿タイプごとに同じレイアウトで値を出したい場合は、「Bricks」→「テンプレート」で「シングル」タイプのテンプレートを作ります。テンプレートの設定で適用条件（どの投稿タイプに使うか）を指定し、さらにプレビュー用に表示する投稿を選んでおくと、編集画面でも実際の値が見えるようになります。この設定をしないと、テンプレート編集中はタグが空のまま表示され、「動いていない」と勘違いしやすいので注意してください。
一覧ページで繰り返し表示する
一覧を作るときは、コンテナやブロック要素で「クエリループを使用」を有効にし、取得する投稿タイプや件数を設定します。ループの中に置いた要素の動的データは、ループ中の各投稿の値に置き換わります。ループの外に置くと、そのページ自体の値になる点がつまずきやすいところです。
ACF Pro のリピーターフィールドを繰り返し表示したい場合も、クエリループの種類としてリピーターを選べるようになっています（対応状況はバージョンにより異なります）。
動的データに自作の値を出す（PHPの関数）
既製のタグにない値、たとえば「本文から計算した読了時間」を出したいときは、{echo:関数名} という形で PHP 関数の戻り値を表示できます。ただし近年のバージョンでは、セキュリティ上の理由から使用を許可する関数名を登録しておかないと実行されません。子テーマの functions.php に次のように書きます。
<?php
// 本文の文字数から読了時間（分）を返す
function my_reading_time() {
$content = get_post_field( 'post_content', get_the_ID() );
$chars = mb_strlen( wp_strip_all_tags( $content ) );
$minutes = max( 1, (int) ceil( $chars / 500 ) );
return esc_html( sprintf( '約%d分', $minutes ) );
}
// {echo:my_reading_time} で呼び出せるよう許可リストに登録
add_filter( 'bricks/code/echo_function_names', function ( $names ) {
$names = is_array( $names ) ? $names : array();
$names[] = 'my_reading_time';
return $names;
} );あとはテキスト要素に 読了時間：{echo:my_reading_time} と入れます。許可リストに入れた関数は誰がテンプレートを編集しても呼び出せるため、引数をそのまま SQL や出力に使うような関数は登録しないでください。戻り値は上の例のようにエスケープしてから返します。
値が表示されないときの確認ポイント
動的データが空になる原因は、次の順に見ていくと早く見つかります。
- その投稿に値が入っているか：管理画面で投稿を開き、フィールドに値が保存されているかを見ます。
- タグの名前が合っているか：ラベルではなくフィールド名か、途中で名前を変えていないかを確認します。迷ったらピッカーから選び直すのが手早い方法です。
- フィールドグループの位置ルール：表示したい投稿タイプに割り当てられているかを見ます。
- ループの内側か外側か：一覧で全部同じ値になる、または空になる場合は、要素がクエリループの中にあるかを確認します。
- テンプレートのプレビュー設定：編集画面だけ空でフロント側では表示されるなら、プレビュー用の投稿が未設定なだけです。
- キャッシュ：フロントで古い値が出る場合は、キャッシュプラグインやサーバーのキャッシュを削除してから再確認します。
それでも直らないときは、子テーマの追加コードやほかのプラグインを一時的に止め、Bricks と ACF だけの状態で再現するかを見ると、原因の切り分けができます。
まとめ
- Bricks の動的データは「フィールドを作る → タグを入れる → テンプレートやループで範囲を決める」の順で設定します。
- タグはピッカーから選ぶと書式の間違いを防げます。ACF ならフィールド名を英数字で決め、位置ルールを正しく設定します。
- 画像・リンク・表示条件にも動的データを使えるので、空の値で表示が崩れないよう条件と組み合わせます。
- テンプレートではプレビュー用の投稿を設定し、一覧ではクエリループの内側に要素を置きます。
- 自作関数を
{echo:}で使う場合は許可リストへの登録が必要で、戻り値はエスケープします。作業は子テーマで、バックアップを取ってから行ってください。