为WordPress评论设置默认头像
本文最后更新于 805 天前,其中的信息可能已经有所发展或是发生改变。

众所周知wp的评论头像基于Gravatar,而没有注册此服务的邮箱就没有自定义的头像,虽然Wordpress的设置可以选择一个默认的头像,但都是固定的、或者随机生成的,没有让我们选择自己自定义头像的余地。

因此我们可以通过使用WP钩子来替换头像URL中的参数,即可达到设置自定义头像的目的。

首先,你要将默认头像放到一个网络空间,即可以使用URL访问的位置,例如我使用这个头像:

https://static.orangii.cn/avatar/default.jpg

第二步,我们关键的替换代码如下:

// 默认头像地址
$default_avatar = 'https://static.orangii.cn/avatar/default.jpg';
// 替换掉原本的 d 参数
$url = preg_replace('/(\?|&)(d=[a-zA-Z]+)(&?)/', '\\1', $url);
//添加上我们自己的默认头像参数
$url .= "&d=" . urlencode($default_avatar);

现在可以将它写成一个函数,添加到主题的 functions.php 中,然后注册WP钩子,来达到设置默认头像的目的。示例如下:

function o_default_avatar($url){
	$default_avatar = 'https://static.orangii.cn/avatar/default.jpg';
	$url = preg_replace('/(\?|&)(d=[a-zA-Z]+)(&?)/', '\\1', $url);
	$url .= "&d=" . urlencode($default_avatar);
	return $url;
}
add_filter('get_avatar_url', 'o_default_avatar');

顺便,如果你希望再使用CDN加速Gravatar头像的话,可以直接一步到位(如果效果不理想记得更换cdn):

function o_gravatar_cdn($url){
	$cdn = "gravatar.loli.net/avatar/";
	$default_avatar = 'https://static.orangii.cn/avatar/default.jpg';
	$url = preg_replace("/\/\/(.*?).gravatar.com\/avatar\//", "//" . $cdn, $url);
	$url = preg_replace('/(\?|&)(d=[a-zA-Z]+)(&?)/', '\\1', $url);
	$url .= "&d=" . urlencode($default_avatar);
	return $url;
}
add_filter('get_avatar_url', 'o_gravatar_cdn');

效果的话,可以查看留言板,也可以看友情链接

如果你使用的主题后期会更新,那么你在functions.php里面的修改将会被覆盖失效,可以使用子主题的方式避免这种情况。
文章首发于https://blog.orangii.cn/2022/wp-default-avatar/,转载请注明出处。博客所有文章遵循CC BY-NC 4.0协议

评论

  1. Macintosh Chrome
    2 年前
    2022-4-19 22:18:57

    作为小白的我,只会用WP-China-Yes插件来解决WordPress头像问题

  2. ????.
    置顶
    Macintosh Firefox
    2 年前
    2022-2-14 23:37:42

    默认头像处理用 get_avatar_url filter 不如 avatar_defaults filter 优雅,后者能配置多种多种方案且配置后能在【设置 》讨论】中进行预览切换。

    get_avatar_url ,既承担了代理加速又承担默认头像处理,分工不明确,耦合度太高,而且每次正则处理速度不如 avatar_defaults。

    • 博主
      ????.
      Windows Chrome
      2 年前
      2022-2-15 10:00:44

      感谢指正٩(ˊᗜˋ*)و,最开始不知道avatar_defaults这个filter,感觉wp的官方开发文档写的有点复杂,不像javadoc那种,有时候别说查个hook,连某个类有什么公共属性可能都不好看到……不管怎么说,还是感谢指出,后面也会把文章更新

  3. Windows Chrome
    2 年前
    2022-2-08 20:01:41

    突然想到一个之前遇到的问题…又要迷茫了

  4. Android Chrome
    2 年前
    2022-2-06 20:48:37

    过年好!
    果然技术型选手都会从functions.php入手,我之前的解决方案是整一个插件,但后来发现不太需要这个功能。
    在这里我还有两个问题:

    1. 你的评论置顶是怎么设置的?
    2. 评论的用户假如有主页在名字后面会带一个链接标识,这个是怎么设置的?
    • Temple
      Android Chrome
      2 年前
      2022-2-06 20:49:44

      PS,你的「赞赏」图裂开了,检查下哦。

      • 博主
        Temple
        Windows Chrome
        2 年前
        2022-2-06 22:25:33

        我知道怎么回事了,因为OSS全给我归档储存了……不能访问了,已经全解冻并且关了自动归档,以后应该不会出问题了

    • 博主
      Temple
      Windows Chrome
      2 年前
      2022-2-06 22:18:08

      评论置顶是这个主题1.3.1版本更新的新内容,可以在1.3.1更新日志看到

      第二个是一个样式,wordpress会自动为外部链接添加 class="external" ,所以只需要为其设置一个样式就行了。我的设置的样式如下:

      a.external::after {
        content: '\f08e';
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-left: 0.5em;
      }

      利用了after伪元素会出现在文字后面, \f08e 是这个fontawesome图标的Unicode,可以在fa fa-external图标的页面找到;如果你不是wordpress,可以通过将 a.external::after 选择器换成 [target="_blank"]::after 就可以选中所有在新标签内打开的链接;如果要使用这段css,需要引入FontAwesome 4.17,如果你是5以上版本,具体内容需要修改,主要是修改图标字体库。

      • 橙梓
        Android Chrome
        2 年前
        2022-2-07 2:53:33

        我的确是Wordpress但是在设置样式的时候,用你的代码是无效的,求解。

        • 博主
          Temple
          Windows Chrome
          2 年前
          2022-2-07 10:00:32

          不知道你是添加到了哪里,argon主题如果开启cdn,那么在style.css等文件中修改就没有效果因为文件都不会被加载,可以试试在站点自定义里面的额外CSS中添加

          • 橙梓
            Windows Chrome
            已编辑
            2 年前
            2022-2-07 11:41:37

            我是在自定义里面的额外CSS中添加的。
            \f08efont-smoothingosx-font-smoothin这三处显示是红色的。应该是某种报错?

            • 博主
              Temple
              Windows Chrome
              2 年前
              2022-2-07 13:18:52

              可以加我帮你看一下,现在去你博客看没有找到自定义的CSS

              • 橙梓
                Macintosh Chrome
                2 年前
                2022-2-14 22:45:14

                啊抱歉,我没有收到您的回复邮件,要不是回头来浏览您博客我甚至没发现你回复我了。
                我待会儿再添加下试试,要是不行先算了。也不是核心功能。
                还是很感谢您。

  5. Android Chrome
    2 年前
    2022-2-06 17:38:29

    Gravatar这个网站从来没打开过

    • 博主
      阿锋
      Windows Chrome
      2 年前
      2022-2-06 22:07:20

      确实,这个网站的登录对国内用户比较不友好,,,

  6. Windows Edge
    2 年前
    2022-2-06 15:07:04

    牛的!

  7. 博主
    Windows Chrome
    2 年前
    2022-2-06 14:51:31

    其实如果想的话,还可以利用这种方式来默认使用其他头像生成服务,只需要修改传入参数 d 就可以

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
橙橙梓
甘城猫猫
颜文字
Emoji
小恐龙
花!
上一篇
下一篇