首页 / 中文教程 / 教程

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

用自定义函数把 Meta Box Image Advanced 字段的图片数组打乱后取一张,配合 echo 动态数据在 Bricks 中输出随机图片,适合横幅、背景或每日一图场景。

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

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

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 图片数组每项都带 IDurlfull_url 等键)作为函数返回值。

Step 2:Bricks 中引用

在应用到该文章类型(或首页)的 Bricks 模板里:

  1. 添加一个 Image(图片)元素
  2. 图片来源(Source)选择「动态数据」,填入:
{echo:bl_get_random_mb_image_advanced_image_id(random_image)}

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

  1. 如果你的图是挂在站点设置页(比如 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; 的保护。

小结

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

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

需要帮忙?

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

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

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