Bricks Builderでは、要素の文字や画像の設定欄にある「動的データ」の選択肢からACFのフィールドを選ぶだけで、投稿ごとに違う値を表示できます。この記事では、ACF側の準備、単一フィールドの差し込み、テンプレートでのプレビュー、リピーターやリレーションのループ表示、表示条件、そして標準機能で足りないときにPHPで整形する方法までを、つまずきやすい点と合わせて解説します。
Bricksは更新が速く、画面の表記や細かい機能は版によって変わります。この記事では設定を「何のための項目か」で説明するので、実際のラベルはお使いのバージョンの公式ドキュメントと照らし合わせてください。以下は執筆時点（2026年10月現在）の情報です。
先に確認しておくこと
BricksはテーマなのでPHPの追記は子テーマへ
Bricksはプラグインではなくテーマとして動きます。後半でPHPを書く場面がありますが、親テーマのファイルを直接編集すると更新で消えるため、公式に用意されている子テーマを有効化してから作業します。作業前にはサイト全体のバックアップを取り、できればステージング環境で試してください。
ACFの無料版とPROでできることが違う
動的データで使うフィールドがどちらの版の機能かを先に把握しておくと、「選択肢に出てこない」という混乱を避けられます。
- 無料版で使える主な型: テキスト、テキストエリア、数値、URL、画像、ファイル、リンク、セレクト、真偽値、日付、投稿オブジェクト、リレーションなど
- ACF PROの機能: リピーター、フレキシブルコンテンツ、ギャラリー、オプションページ
リピーターの行をループで並べたい、サイト共通の電話番号をオプションページで管理したい、といった場合はACF PROが前提になります。
手順1: ACFでフィールドグループを作る
例として、カスタム投稿タイプ「物件」に次のフィールドを作るとします。
price（数値）: 賃料floor_plan（テキスト）: 間取りmain_photo（画像）: メイン写真nearby_spots（リレーション）: 近くのスポット（別の投稿タイプ）
フィールドグループの「位置」の設定で、表示条件を「投稿タイプが物件と等しい」にします。ここを間違えると、Bricksの動的データには名前が出るのに値が空になる、という状態になります。
フィールド名（price など）は英小文字とアンダースコアで付け、後から変えないことをおすすめします。動的データのタグはフィールド名で値を参照するため、名前を変えるとBricks側の設定がすべて空振りになります。
手順2: 単一の値を要素に差し込む
Bricksのエディターで見出しやテキスト要素を選び、文字の入力欄にある動的データのボタン（稲妻のアイコン）を押すと、使えるデータの一覧が出ます。ACFのフィールドはグループごとにまとまって表示されるので、目的のフィールドを選びます。
選ぶと、入力欄には {acf_floor_plan} のようなタグが入ります。タグは文字と組み合わせられるので、次のように書くこともできます。
間取り: {acf_floor_plan}画像フィールドは、画像要素の画像設定で動的データを選びます。ACFの画像フィールドの「返り値の形式」は、配列・URL・IDのどれでもBricksは解釈できることが多いですが、表示サイズ（サムネイルや大サイズ）を選べるようにするには、画像要素の側でサイズを指定します。メディアライブラリの代替テキストが反映されるかも、公開画面のHTMLで確認しておいてください。
手順3: テンプレートで正しくプレビューする
物件の詳細ページは、1件ずつ作るのではなく、Bricksのテンプレート（シングル用）を1つ作って全物件に適用するのが普通です。このとき、テンプレートの編集画面では「どの物件のデータを表示するか」が決まっていないため、動的データが空に見えます。
テンプレートの設定には、プレビュー用に実際の投稿を指定する項目があります。ここで値が入っている物件を1件選ぶと、エディター上でも実データを見ながらデザインできます。「エディターでは空なのに公開画面では出る」という場合は、多くがこの設定の問題です。
テンプレートの適用条件（どの投稿タイプに使うか）も同じ画面で設定します。条件が重なる複数のテンプレートがあると、意図しないほうが使われることがあるので、適用先を絞って管理してください。
手順4: リピーターやリレーションをループで並べる
複数の値を繰り返し表示するには、Bricksのクエリーループを使います。コンテナやブロック要素で「クエリーループを使う」を有効にし、クエリーの種類として投稿ではなくACFのフィールドを選びます。BricksはACFのリピーターやリレーションをループの元として扱えます。
- リピーター: ループの中の要素では、サブフィールドが動的データの一覧に出てきます。1行ごとにそのサブフィールドの値が入ります。
- リレーション: ループの中では関連付けた投稿が「現在の投稿」として扱われるため、投稿タイトルやアイキャッチ、その投稿側のACFフィールドを通常どおり使えます。
ループを入れ子にする場合（物件の一覧ループの中で、各物件のリレーションをさらにループする）は、内側のループの元が外側の「現在の投稿」を基準にしているか確認します。値が全件同じになるときは、ループの階層が意図と違っていることが多いです。
なお、関連付けが数十件を超えるようなリレーションをループで表示すると、ページの生成が重くなります。表示件数を制限するか、一覧には要点だけを出す設計にしてください。
手順5: 値がないときは表示しない
「駐車場」のような任意項目は、空のときに見出しだけが残ると不格好です。Bricksの要素には表示条件を設定する機能があり、動的データの値が空でないときだけ要素を表示する、といった指定ができます。条件の比較方法（空かどうか、特定の値と等しいか）は要素ごとに選べます。
真偽値フィールド（例: pet_ok）で「ペット可」のバッジを出し分けるのも、同じ仕組みで対応できます。真偽値は内部的に 1 か空で保存されるため、条件の比較値は、公開画面で実際の出力を確かめてから決めてください。
手順6: 整形が必要なときはPHP関数を使う
賃料を「85,000円」と桁区切りにしたい、といった整形は、標準の動的データだけでは難しい場合があります。そのときは子テーマの functions.php に関数を書き、Bricksの {echo:関数名} タグで呼び出す方法があります。
Bricksは安全のため、echo タグで呼べる関数を明示的に許可する仕組みになっています（比較的新しいバージョンから）。次のコードは、許可の登録と整形用の関数の例です。
<?php
// 子テーマの functions.php
add_filter( 'bricks/code/echo_function_names', function ( $names ) {
$names = is_array( $names ) ? $names : array();
$names[] = 'my_property_price_label';
return $names;
} );
function my_property_price_label() {
if ( ! function_exists( 'get_field' ) ) {
return '';
}
$price = get_field( 'price' );
if ( '' === $price || null === $price ) {
return '';
}
return esc_html( number_format_i18n( (int) $price ) . '円' );
}テキスト要素には {echo:my_property_price_label} と書きます。ACFを停止したときにサイトが止まらないよう function_exists( 'get_field' ) で確認し、出力は esc_html() でエスケープしています。
ここで注意したいのは、許可する関数は引数を受け取らない、決まった処理だけにすることです。エディターを触れる人が任意の関数を呼べる状態にすると、思わぬ情報の表示や処理の実行につながります。フィルター名や引数の仕様はBricksの版で変わる可能性があるため、導入時に公式ドキュメントで確認してください。
よくあるつまずき
- 一覧に出るのに値が空: フィールドグループの位置ルールが表示中の投稿タイプと合っていない、またはテンプレートのプレビュー対象に値が入っていない
- リピーターがループの元に出てこない: ACF PROが有効でない、またはフィールドグループの位置ルールがテンプレートの対象と合っていない
- WYSIWYGフィールドで余計な段落が入る: ACFの整形とBricksの整形が重なっていることがあります。テキスト要素の種類を変えるか、フィールドの改行設定を見直します
- キャッシュで古い値が出る: ページキャッシュやBricksのCSSファイル生成を使っている場合は、値を更新した後にキャッシュを消してから確認します
まとめ
- Bricksは動的データのボタンからACFのフィールドを選ぶだけで、
{acf_フィールド名}の形で値を差し込める - リピーター・ギャラリー・オプションページはACF PROの機能なので、使う型を先に確認する
- シングル用テンプレートは、プレビュー用の投稿を指定してから実データでデザインする
- リピーターやリレーションはクエリーループで並べ、入れ子のときは基準となる投稿を確認する
- 整形が必要なら、許可した関数だけを
{echo:}で呼び、出力はエスケープする