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 元素现在可以删掉了。

小结

• rwmb_meta() 配合 object_type => user 参数读取用户对象上的 Meta Box 字段；
• 返回数组以附件 ID 为键，用 key() 取出 ID，交给 Bricks 的 Image 元素按 ID 渲染并自由选尺寸；
• 记得通过 bricks/code/echo_function_names 过滤器把自定义函数加入白名单，否则 Code/动态标签里无法调用。