WordPress 自定义图片字段头像

需求场景

有时候你可能不想用 WordPress 内置的头像功能，而是改用图片类型自定义字段来做头像。

假设我们用 Meta Box 创建了一个名为 “User fields” 的字段组，里面有一个 Image Upload（图片上传） 类型、ID 为 avatar 的字段：

有权限编辑个人资料的用户，可以在资料里选择一张图片作为自己的头像：

假设你的 WordPress 站点用的是 Bricks 主题，现在的目标：在单篇文章模板里加一个 Image（图片）元素，映射到一个自定义动态数据标签——该标签返回文章作者设置的头像图片 ID。

Meta Box 提供了一个很方便的 [rwmb_meta()](https://docs.metabox.io/functions/rwmb-meta/) 函数来取字段值。

Step 1：先看返回的数据结构

在单篇文章模板里加一个 Code（代码）元素，内容如下：

<?php
$img = rwmb_meta( 'avatar', [ 'object_type' => 'user' ], get_the_author_meta( 'ID' ) );
print( "<pre>" . print_r( $img, true ) . "</pre>" );
?>

在前台打开一篇由设置了 avatar 字段的作者发布的单篇文章，输出大概长这样：

Array
(
    [542] => Array
        (
            [width] => 150
            [height] => 150
            [file] => 2026/03/frances-harper.jpg
            [filesize] => 15373
            [sizes] => Array
                (
                    [thumbnail] => Array
                        (
                            [file] => frances-harper-150x150.jpg
                            [width] => 150
                            [height] => 150
                            [mime-type] => image/jpeg
                            [filesize] => 6535
                            [url] => https://devsite.local/wp-content/uploads/2026/03/frances-harper-150x150.jpg
                        )
                    [woocommerce_gallery_thumbnail] => Array
                        (
                            [file] => frances-harper-100x100.jpg
                            [width] => 100
                            [height] => 100
                            [mime-type] => image/jpeg
                            [filesize] => 3970
                            [url] => https://devsite.local/wp-content/uploads/2026/03/frances-harper-100x100.jpg
                        )
                )
            [image_meta] => Array
                (
                    [aperture] => 0
                    [credit] => 
                    [camera] => 
                    [caption] => 
                    [created_timestamp] => 0
                    [copyright] => 
                    [focal_length] => 0
                    [iso] => 0
                    [shutter_speed] => 0
                    [title] => 
                    [orientation] => 0
                    [keywords] => Array
                        (
                        )
                )
            [ID] => 542
            [name] => frances-harper.jpg
            [path] => /Users/sridharkatakam/Sites/devsite/app/public/wp-content/uploads/2026/03/frances-harper.jpg
            [url] => https://devsite.local/wp-content/uploads/2026/03/frances-harper-150x150.jpg
            [full_url] => https://devsite.local/wp-content/uploads/2026/03/frances-harper.jpg
            [title] => frances-harper
            [caption] => 
            [description] => 
            [alt] => 
            [srcset] => https://devsite.local/wp-content/uploads/2026/03/frances-harper-150x150.jpg 150w, https://devsite.local/wp-content/uploads/2026/03/frances-harper-100x100.jpg 100w, https://devsite.local/wp-content/uploads/2026/03/frances-harper.jpg 250w
        )
)

可以看到，这个数组只有一个元素，键就是图片附件 ID（本例为 542）。

因为我们想在 Image 元素的控件里自由选择图片尺寸，所以要取这个 ID 而不是图片 URL。

Step 2：写辅助函数

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

<?php
/**
 * Get the attachment ID of the author's avatar from Meta Box.
 *
 * @param int $user_id The user ID. Defaults to the current post author.
 * @return int The attachment ID, or 0 if not set.
 */
function brickslabs_get_author_avatar_id( $user_id = 0 ) {
	if ( ! $user_id ) {
		$user_id = get_the_author_meta( 'ID' );
	}
	$images = rwmb_meta( 'avatar', array( 'object_type' => 'user' ), $user_id );
	if ( empty( $images ) ) {
		return 0;
	}
	return (int) key( $images );
}

PHP 的 [key()](https://www.php.net/manual/en/function.key.php) 函数返回数组当前指针位置的那个键名——这里数组只有一个元素，所以直接返回图片附件 ID。

Step 3：白名单函数

接下来，把 brickslabs_get_author_avatar_id 加进 Bricks 的 Code 元素函数白名单：

<?php 
add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'brickslabs_get_author_avatar_id'
  ];
} );

*除了 brickslabs_get_author_avatar_id，你在 Bricks 实例中用到的其他函数（原生或自定义）也要一并加进去。*可以在 Bricks → Settings → Custom code（自定义代码）里点击 Code review 按钮检查当前用到的函数列表。

白名单的更多说明见 这里。

Step 4：在模板里用

在单篇文章的 Bricks 模板里加一个 Image（图片）元素，把图片来源设为：

{echo:brickslabs_get_author_avatar_id}

然后选择你想要的图片尺寸：

Step 1 里那个调试用的 Code 元素现在可以删掉了。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

常见误区

几个坑：一是图像字段可能返回数组（含 url/sizes）也可能返回 URL 字符串，没判类型就当字符串用会出错，先用 is_array 兜底；二是没做白名单/权限校验，任意附件 ID 都能被读，有越权隐患，按本文加白名单；三是缩略图尺寸没指定，移动端也加载原图，浪费流量。做用户头像类功能时，记得限制可接受的图像类型，别让访客传可执行文件。

小结

• rwmb_meta() 配合 object_type => user 参数读取用户对象上的 Meta Box 字段；

• 返回数组以附件 ID 为键，用 key() 取出 ID，交给 Bricks 的 Image 元素按 ID 渲染并自由选尺寸；

• 记得通过 bricks/code/echo_function_names 过滤器把自定义函数加入白名单，否则 Code/动态标签里无法调用。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

图像字段返回 URL 还是数组？ 看 ACF 设置，可能是 URL 字符串也可能是含尺寸的数组；代码里用 is_array 兜底最稳。

为什么要加白名单？ 防止通过构造附件 ID 越权读取别的图片，按本文做一层权限校验更安全。

移动端加载原图怎么办？ 调用时指定缩略图尺寸（如 thumbnail/medium），别直接用全尺寸原图。

能做用户上传头像吗？ 能，配合前端表单把上传存到对应用户的图像字段，再按本文方式读取。

• 相关阅读：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.

获取报价 →浏览全部教程