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

时间:2023-07-23 09:07:23 阅读: 文章分类: 网站建设作者: IT网站员

导读:建站文章建站文章本文讲述的是如何将提高 WordPress 用户头像（Gravatar）加载速度的两个方法合并处理，即将有 Gravatar 头像的用户的头像下载到本地缓存，并网站如何搭建网站技术。

网站如何搭建网站技术

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

我这仅仅是提供一dede网站模板些思路，需要对一些代码进行改动。

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

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

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

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

if(?strpos($a,'default')?){

????$avatar?=?"<img?alt='{$alt}'?src='{$a}'?class='avatar?avatar-{$size}?photo?letteravatar'?height='{$size}'?width='{$size}'?/>";

}?else?{

????$avatar?=?"<img?alt='{$alt}'?src='{$a}'?class='avatar?avatar-{$size}?photo'?height='{$size}'?width='{$size}'?/>";

}

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

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

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

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

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

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

LetterAvatar.transform?=?function()?{

????Array.prototype.forEach.call(d.querySelectorAll(".letteravatar[alt]"),??//此处将原代码中的?img[alt]?变为?.letteravatar[alt]

????function(img,?name,?color)?{

????????name?=?img.getAttribute("alt");

????????color?=?img.getAttribute("color");

????????img.src?=?LetterAvatar(name,?img.getAttribute("width"),?color);

????????img.removeAttribute("alt");?//此处将原代码的?avatar?变为?alt

关键词标签: 建站用户头像

声明: 本文由我的SEOUC技术文章主页发布于:2023-07-23 ，文章将WordPress用户头像本地缓存，并把字母头像分配主要讲述头像,用户,建站网站建设源码以及服务器配置搭建相关技术文章。转载请保留链接: http://www.tngdez.cn/article/web_34774.html