首页 / 中文教程 / 教程

Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据

ACF 图片字段存的是媒体库附件 ID,附件自带的 Alt、Caption、说明文字都能动态取出来。注册 4 个自定义动态标签,在服务/作品归档页的缩略图下方直接输出,1500 张图也不用手工填字段。

Ray Chan·2026-08-11·约 2 分钟

场景:附件数据直接复用

WordPress 媒体库里每张图片都自带元数据:Alt 文本、标题(Title)、说明文字(Caption)、描述(Description)。很多摄影师会用 Lightroom 之类的工具批量填好这些信息再同步进来,数据是现成的,但 Bricks 的图片元素默认只展示图片本身,Caption 一开还会盖在缩略图上。

于是常见需求是:在归档页的缩略图下方,把附件的 Alt/Caption/标题动态打出来。最笨的办法是给每个 CPT 文章再建字段手动复制粘贴——几百上千条内容时完全不现实。正解是注册几个自定义动态标签,从 ACF 图片字段返回的附件 ID 反查媒体库数据,在查询循环里直接插入。

Step 1:建 CPT 与 ACF 图片字段

  1. 在 ACF → Post Types 创建 CPT,比如 service(服务)。高级配置里打开 URLS 选项卡,启用 Archive(归档页),可以顺手填个归档 slug。
  2. 建字段组挂到该 CPT,加一个 Image 类型字段 service_imageReturn Format 保持默认的 Image Array(返回数组,里面带附件 ID,这是下面代码能工作的前提)。
  3. 建若干服务文章,为每篇选一张图(图片在媒体库里已填好 Alt/Caption 等)。

Step 2:注册 4 个自定义动态标签

把下面代码加到子主题 functions.php 或代码片段插件:

add_filter( 'bricks/dynamic_data/tags', function( $tags ) {
  $tags['bl_acf_image_alt']     = [ 'label' => 'BL ACF Image Alt',     'render' => 'bl_acf_image_data' ];
  $tags['bl_acf_image_caption'] = [ 'label' => 'BL ACF Image Caption', 'render' => 'bl_acf_image_data' ];
  $tags['bl_acf_image_title']   = [ 'label' => 'BL ACF Image Title',   'render' => 'bl_acf_image_data' ];
  $tags['bl_acf_image_url']     = [ 'label' => 'BL ACF Image URL',     'render' => 'bl_acf_image_data' ];
  return $tags;
} );

function bl_acf_image_data( $tag, $post, $context, $name ) {
  if ( ! function_exists( 'get_field' ) ) {
    return '';
  }

  $img = get_field( 'service_image', $post->ID );
  if ( empty( $img['ID'] ) ) {
    return '';
  }

  switch ( $name ) {
    case 'bl_acf_image_alt':
      // 附件的 Alt 存在 _wp_attachment_image_alt 这个 meta 里
      return get_post_meta( $img['ID'], '_wp_attachment_image_alt', true );

    case 'bl_acf_image_caption':
      // 附件的 Caption 就是附件的 post_excerpt
      return get_post_field( 'post_excerpt', $img['ID'] );

    case 'bl_acf_image_title':
      return get_the_title( $img['ID'] );

    case 'bl_acf_image_url':
      return wp_get_attachment_url( $img['ID'] );
  }

  return '';
}

要点:

  • bricks/dynamic_data/tags 是 Bricks 注册自定义动态标签的官方钩子,每个标签配一个 render 回调;回调参数 $name 就是被调用的标签名,所以 4 个标签可以共用一个渲染函数;
  • 查询循环里渲染时,$post 就是当前循环项的文章,get_field( 'service_image', $post->ID ) 取到图片数组(含 IDurlaltsizes 等);
  • Alt 文本不在附件文章本身,而在 _wp_attachment_image_alt 这个 meta 键里,必须用 get_post_meta 取——这是最常见的坑;
  • Caption 对应附件的 post_excerpt,Title 对应附件的 post_title,URL 用 wp_get_attachment_url

Step 3:归档页循环里输出

  1. 编辑 service 的归档模板(或任意页面套查询循环),启用查询循环查全部 service 文章。
  2. 循环项结构:Featured Image(或图片元素绑定 {acf_service_image})在上,下面放三个 Basic Text,分别插入动态数据 {bl_acf_image_alt}{bl_acf_image_caption}{bl_acf_image_title}
  3. 需要“点击图片看原图”的话,把图片包进链接元素,链接 URL 用 {bl_acf_image_url}

保存后刷新归档页:每张缩略图下方自动出现该图片在媒体库里维护的 Alt、Caption 和标题。以后在媒体库改任何一条数据,前端全部自动更新——图片没换,字段没换,纯靠动态标签读取附件数据。

两点补充:

  • 性能无忧get_post_metaget_post_fieldget_the_title 读的都是附件对象和 meta 缓存,每个标签只多一次内存级查询,归档页几十上百张图毫无压力,不需要担心 N+1 问题;
  • 场景延伸:这套标签不限于归档页的文章循环——ACF Repeater 循环(图片子字段)、Meta Box Group 循环、甚至单篇文章里手动插入,只要代码里 get_field 的对象是当前上下文,标签一律通用。图片字段换成“从 CPT 文章反查附件 ID”的自定义逻辑也行。

小结:这套方案的核心是把“媒体库附件数据”当成可复用资产:ACF 图片字段的 Return Format 保持 Image Array,自定义动态标签用附件 ID 反查 _wp_attachment_image_alt(Alt)、post_excerpt(Caption)、post_title(Title)。同理还能扩展出 Description(post_content)、文件名(post_name)等更多标签,一套代码在任意查询循环里通用。

需要帮忙?

用 Bricks 建站?我接客户项目。

从快速营销站到完整的 Bricks 建站,再到从 Elementor 迁移——我都做过。本站每篇教程都来自真实项目经验。告诉我你的需求,一个工作日内回复。

  • Bricks 建站与改版
  • Elementor / Divi → Bricks 迁移
  • Bricks → Astro / headless 性能升级
  • 速度优化,PageSpeed 95+ 目标