Bricks 输出 Meta Box 图片高级字段的随机一张图

场景：从多图中随机取一张

Meta Box 的 Image Advanced 字段允许在一篇文章（或一个站点设置页）里上传多张图片，返回的是一个图片信息数组。很多站长想用它做「随机展示」：比如站点首页的横幅图，每次刷新从后台传的一组图里随机换一张；或者文章详情页的顶部背景图，每篇都从多图字段里随机抽。

Meta Box 本身没有「随机取一张」的输出选项，Bricks 的动态数据也只能整组输出。这个免费教程用自定义函数解决，函数只做一件事：把图片数组打乱，返回第一张的 ID。

Step 1：注册随机取图函数

把下面的代码加到子主题的 functions.php（不要带开头的 PHP 标签）或代码片段插件里：

<?php
function bl_get_random_mb_image_advanced_image_id( string $field_id ): int {
    $images = rwmb_meta( $field_id );
    shuffle( $images );
    return reset( $images )['ID'];
}

• rwmb_meta( $field_id ) 是 Meta Box 的标准取值函数，默认取当前文章/当前循环项的字段值，Image Advanced 字段返回图片信息数组。

• shuffle() 原地打乱数组顺序，PHP 内置函数，无需任何依赖。

• reset() 把内部指针拨回数组开头并返回第一个元素，也就是打乱后的「随机第一张」；随后取它的 ID 键（Meta Box 图片数组每项都带 ID、url、full_url 等键）作为函数返回值。

Step 2：Bricks 中引用

在应用到该文章类型（或首页）的 Bricks 模板里：

1. 添加一个 Image（图片）元素。

2. 图片来源（Source）选择「动态数据」，填入：

{echo:bl_get_random_mb_image_advanced_image_id(random_image)}

其中 random_image 替换成你的字段 ID。

3. 如果你的图是挂在站点设置页（比如 Meta Box 的 Settings Page）而不是文章上，rwmb_meta 需要传第二个参数指定页面 ID，函数在此基础上自行扩展即可。

原理说明

• 随机性来自 shuffle()：每次页面渲染时 PHP 都会重新打乱数组，前端刷新就会看到不同的图，无需缓存插件配合也能生效（除非页面被整页缓存）。

• 返回的是图片 ID 而不是 URL，是因为 Image 元素的动态数据直接吃 ID，Bricks 会自动解析出正确的图片尺寸和响应式 srcset。

• 函数返回值声明为 int，如果字段为空（数组为空或 false），reset() 返回 false，取 ['ID'] 会告警——实际使用时建议对空数组先做 if ( empty( $images ) ) return 0; 的保护。

相关阅读：

• Bricks 自定义查询类型：输出 Meta Box 可克隆字段

• Bricks 输出 Meta Box 设置页里选中文章的数据（PHP 查询实现）

• HappyFiles 文件夹图片用 Bricks Query Loop 输出（三种方式）

小结

随机图的实现比想象中简单：Meta Box 取数组 → shuffle 打乱 → 取第一张的 ID → 丢给 Image 元素。整段代码不到十行，零插件依赖，适合做随机横幅、随机背景、每日一图这类效果。

小结：Meta Box Image Advanced 随机输出 = shuffle + reset 取首项 + echo 动态数据。注意空数组保护和返回 ID 而非 URL 这两个细节，就能在 Bricks 里稳定输出随机图。

常见误区

随机图虽然好玩，但有两个坑要提醒：一是缓存会把它变静态——整页开了页面缓存后，每次刷新拿到的是缓存页，随机效果就没了；想保证每次都随机，就得对这块关掉缓存或走动态片段。二是随机不利于 SEO 和社交分享——分享出去的缩略图/OG 图可能被快照成某一固定图，对固定品牌图有要求的场景要权衡。另外记得做好空数组保护，没传图时别让 shuffle 报错，返回一张默认图更稳。

常见问题（FAQ）

Q：随机图每次刷新都会换吗？ A：理论上是，但如果页面开了缓存，实际拿到的是缓存页，随机效果会失效；要保证每次都随机，需对这块关缓存或用动态片段。

Q：为什么函数返回的是 ID 而不是 URL？ A：Bricks 的 Image 元素吃的是附件 ID，给它 URL 反而渲染不出来；用 ID 还能走 WordPress 自带的图片尺寸。

Q：能限定只从某几张里随机吗？ A：能，在函数里先按需要过滤数组再 shuffle 即可，比如只取打了某标签的图。

Q：没上传图时会怎样？ A：教程已做空数组保护返回 false；生产环境建议再给一张默认 fallback 图，避免空白。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程