當前位置：主頁 > 網站建設 > 將WordPress用戶頭像本地緩存，并把字母頭像分配

將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.bifwcx.com/article/web_34774.html