将WordPress用户头像本地缓存,并把字母头像分配给无头像用户

本文讲述的是如何将提高 WordPress 用户头像(Gravatar)加载速度的两个方法合并处理,即将有 Gravatar 头像的用户的头像下载到本地缓存,并且将无Gravatar头像的用户的头像,用 LetterAvatar 实现纯前端生成字母头像。

我这仅仅是提供一些思路,需要对一些代码进行改动。

首先是对有 Gravatar 头像用户的头像执行本地缓存

这个,在 露兜博客 中有详细介绍,包括代码,我这里就不多说了。

因为后面要给无 Gravatar 头像的用户分配字母头像,所以需要判断哪些是无 Gravatar 头像用户,并给这类用户的头像指定一个类(class),暂且定为 class="letteravatar" ,根据 class 来设定头像的 CSS(非必要操作) 和执行后面 JavaScript 代码。

那么,露兜博客中,后面的代码 $avatar = "<img alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />" 要 改为:

  1. ifstrpos($a,'default') ){
  2.     $avatar = "<img alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo letteravatar' height='{$size}' width='{$size}' />";
  3. else {
  4.     $avatar = "<img alt='{$alt}' src='{$a}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
  5. }

即通过判断来增加了一个 class:letteravatar 。

本文禁止住转载。任何形式转载请联系作者(时光在路上 www.timezls.com)。时光在路上保留所有权利

露兜博客 中的代码可根据自身需要而进行必要的修改。

 

第二步:使用 LetterAvatar js 代码生成字母头像

完整代码可以在此查看并复制

注意,如果你也使用了延迟加载(懒加载)图片的 js 代码,一定要将下面这段代码在懒加载代码之前加载。

原 js 代码需要略微修改,参见下面代码中的注释内容:

  1. LetterAvatar.transform = function() {
  2.     Array.prototype.forEach.call(d.querySelectorAll(".letteravatar[alt]"),  //此处将原代码中的 img[alt] 变为 .letteravatar[alt]
  3.     function(img, name, color) {
  4.         name = img.getAttribute("alt");
  5.         color = img.getAttribute("color");
  6.         img.src = LetterAvatar(name, img.getAttribute("width"), color);
  7.         img.removeAttribute("alt"); //此处将原代码的 avatar 变为 alt
  8.         img.setAttribute("alt", name)
  9.     })
  10. };
  11. if (typeof define === "function" && define.amd) {
  12.     define(function() {
  13.         return LetterAvatar
  14.     })
  15. else {
  16.     if (typeof exports !== "undefined") {
  17.         if (typeof module != "undefined" && module.exports) {
  18.             exports = module.exports = LetterAvatar
  19.         }
  20.         exports.LetterAvatar = LetterAvatar
  21.     } else {
  22.         window.LetterAvatar = LetterAvatar;
  23.         d.addEventListener("DOMContentLoaded",
  24.         function(event) {
  25.             LetterAvatar.transform()
  26.         })
  27.     }
  28. }
  29. })(window, document);

 

大功告成,试一下吧!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 WP技术 将WordPress用户头像本地缓存,并把字母头像分配给无头像用户 https://www.mbxzb.com/blog/file/wordpress/44726.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务