»

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

    WordPress  
身份认证web.configcookieshtaccess网站镜像爬虫WP RocketCDN的问题建站SEOWordPress插件防盗链插件windows主机前端工作Apache腾讯云加速IIS网站优化wordpress查询百度云加速重定向CDN

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

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

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

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

my-avatar-ludou

 

因为后面要给无 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 代码生成字母头像

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

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

注意,如果你也使用了延迟加载(懒加载)图片的 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);  

 

大功告成,试一下吧!

本文禁止全文转载。任何形式转载请联系作者(时光在路上 www.timezls.com) Copyright © 2023. All Rights Reserved

时光在路上扫码阅读、分享
  • 版权声明:该文章由 时光在路上 发表,共 1951字。除非特别标注来源,否则为原创。详见《版权声明》部分。
  • 转载请注明:文章标题和文章链接 - 时光在路上 - 也可直接“复制本文链接” 或 使用右边二维码分享本文 →