WordPress 留言头像只能使用 Gravatar 头像而且还拖累网站速度。使用头像插件,只能使用一个特定的头像来给未注册的用户显示头像,过于单调?最好的方法是随机显示留言头像,现在来动手实现吧!

WordPress 插件中,关于头像的插件有很多,但是能够实现随机头像的插件却几乎没有,所以这个功能必须自己动手来实现,方法如下:
方法一:
方法一简单、支持范围广。我们修改 get_avatar() 的行为,将获取头像的行为改为自己的随机本地头像即可。实现方法很简单,利用如下代码:
add_filter( 'get_avatar' , 'local_random_avatar' , 1 , 5 ); function local_random_avatar( $avatar, $id_or_email, $size, $default, $alt) { if ( ! empty( $id_or_email->user_id ) ) { $avatar = ''.get_template_directory_uri().'/avatar-fruit/admin.png'; // 此处修改链接及图片后缀名 }else{ $random = mt_rand(1, 20); // 此处修改随机头像编号 $avatar = ''.get_template_directory_uri().'/avatar-fruit/Fruit-'. $random .'.png'; // 此处修改链接及图片后缀名 } $avatar = "<img alt='{$alt}' src='{$avatar}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />"; return $avatar; }
其中 get_template_directory_uri() 的意思是,获取当前主题的目录(这里演示的代码使用的是相对路径)
在两条注释的地方修改你自己的图片地址和名称,该有符号的地方要加上符号,随机产生的只有数字,我这里随机数产生范围是 [1,20] 的整数:
使用相对链接
比如我的系列图片命名是 Fruit-1.png, Fruit-2.png, Fruit-3.png …,并且头像文件夹名称是 avatar-fruit,那么我的图片相对链接地址可以写成:
'avatar-fruit/Fruit-' + 随机数 + '.png'
需要注意的是,使用相对链接,这个头像文件夹应该放在当前主题下的根目录,这个很重要!
比如我是用的是 twentythirteen 主题,那么就要放在这个位置:/wp-content/themes/twentythirteen/avatar-fruit/
使用绝对链接
如果你拿捏不准位置,或者经常更换主题,那么使用绝对链接肯定没错:
'http://yourdomain.com/avatar-fruit/Fruit-' + 随机数 + '.png'

将以上代码粘贴到 当前主题的functions.php 中,这是个老方法,你可以这样做,但是我建议你按照我下面的操作来做,便于维护和选择执行范围:
安装 Snippets
在 WordPress 插件中搜索并安装插件:Code Snippets
安装好插件后启用,点击 添加片段 并 新建 一个片段。自己命名并插入相关代码,然后注意一下底部选项:
选项 | 效果 |
Run snippets everywhere | 在所有页面执行此段代码 |
Only run on site front-end | 仅在前端执行此代码,对后端无影响 |
建议选择第二项效果更佳,仅在前端执行此代码,实现随机头像效果。

保存执行即可!
但是,这样实现起来会有一定的问题,比如你在已经登陆到 WordPress后台 的时候,访问前端网站,Wordpress 会在顶部显示你的登陆状态,由于前端实行随机头像,导致缩略图和个人头像不一致。

到这里,前端随机头像肯定就实现了,如果你没有成功,尝试检查图片路径的问题。下面是修复一个小问题,如果你不在意也可以不管他,可以到此结束了!
如果还有疑问,可以留言讨论。
小问题修复:
首先,你得先安装一款 WordPress 头像插件,类似于 WP User Avatar,不用非得安装与我相同的插件,Wordpress 大多数的头像插件都很类似。
在 WordPress 插件中搜索并安装插件:WP User Avatar

进入设置界面,我们需要将 默认头像 此处不选中,但这是个单选框,不能取消选中,我们必须借用浏览器进行修改代码。用 Chrome浏览器 Ctrl + Shift + i 打开检查:
定位到选项位置:

将 radio 改为 checkbox,单选框就变成了复选框:

然后,退出代码检查模式,下面就很简单了,取消选中并保存即可:

最后,只需在 用户 → 编辑 中设置自己的管理员头像即可,这样一来在前端,WP User Avatar 的优先级比 Snippents 修改的 functions.php 的优先级高,不会出现上类问题,前后端都可以完美实现。
方法二:
2021年了,今天更新一下新的方法。因为随着技术的发展,一些高可定制的 WordPress 主题也越来越多了(比如 Blocksy 主题),这些主题修改了很多接口,使用了自己的服务,有可能会使得方法一失效。
由于 get_avatar() 可能会失效,要修改为 get_avatar_data() 的处理方法。改进的代码如下,不需要使用任何插件了:
add_filter('get_avatar_data', 'local_random_avatar', 10, 2); function local_random_avatar($args, $id_or_email){ // 管理员 if ($id_or_email->user_id == '1') { $args['url'] = '/avatar-fruit/admin.png'; return $args; } else if ($id_or_email->user_id == null) { // ID为null情况的管理员 $args['url'] = '/avatar-fruit/admin.png'; return $args; } else { // 用户头像 $random = mt_rand(1, 20); $args['url'] = '/avatar-fruit/Fruit-'. $random .'.png'; return $args; } }
判断是否是管理员,是管理员就使用管理员头像,反之就随机给一个本地头像。
这种方法不会调用 secure.gravatar.com 进行跳转,所以也算是禁用了 Gravatar 头像服务。
此代码在 Code Snippets 建议选择 Run snippet everywhere(整站执行),如果你不在意后台的头像,依旧可以选择 Only run on site front-end(仅在前端运行)的选项。

水果头像真的好好看。
方法二很完美,我在前台后台后正常,挺好用的,感谢!
谢谢!成功实现了
😎 😎
学习了,确实有用!
😀 😀
试试这个头像
试试这个头像
试试这个头像
试试这个头像
试试这个头像
试试这个头像
试试这个头像
试试这个头像
试试这个头像
试一下
试吧试吧,我准了
不知道为啥我没弄成功啊~
教程能不能在添加一些细节?
教程细节更新了下,没有成功多半是图片位置没放对,你可以吃查看我更新的“相对链接”和“绝对链接”两种方法,如果还有疑问,可以加QQ咨询
我来试试看效果。哈哈。
哈哈哈,如果遇到问题记得call我~
水果头像挺好看的 ^_^
看名字,是反语吗??哈哈哈