在WordPress中实现评论头像的自定义默认和延迟加载

2024-11-26 54阅读 0评论

延伸 · 阅读
- Ubuntu vps中wordpress网站打开时提示”建立数据库连接错误”的解决
- WordPress 显示文章摘要方法详细篇
- 详解WordPress中调用评论模板和循环输出评论的PHP函数
- WordPress统计当前页面数据库查询次数及消耗时间的方法
- WordPress中用于获取及自定义头像图片的PHP脚本详解
- Wordpress被忽略的SEO技巧介绍
- WordPress中登陆后关闭登陆页面及设置用户不可见栏目
- WordPress 插件直接将服务器文件导入媒体库

自定义 WordPress 默认评论头像
对于没有设置Gravatra头像的评论者来说，WordPress会显示一个你在后台设置的默认头像，可以是神秘人、空白、默认的Gravatar 标志等等。但是这些头像有一个共同的不足之处，就是不怎么美观，可看性不强！打个比方，如果你去一个博客阅读文章，但当你放心评论文章的读者头像都是小怪物、复古等一系列WordPress自动生成的“不堪入目”的头像时，你还有很浓的兴趣去阅读这个博客的文章吗？我想答案是肯定的！那么，你有没有想过，自己设计或找一个属于你博客、适合你博客的默认WordPress头像那？好了，周良就不吊大家的胃口了，让我来说一下如何不使用插件实现自定义WordPress默认评论头像的方法。

方法很简单，将下面我提供的这段代码放在你正在使用的主题functions.php文件中。

<?php

// Make a new default gravatar available on the dashboard

function newgravatar ($avatar_defaults) {

$myavatar = get_bloginfo('template_directory') . '/images/tweaker.jpg';

$avatar_defaults[$myavatar] = "Tweaker";

return $avatar_defaults;

}

add_filter( 'avatar_defaults', 'newgravatar' );

?>

上面代码中的/images/tweaker.jpg就是自定义默认头像的相对路径，你可以自行修改图片的地址。建议将头像放到你正在使用的主题images文件下面。

延迟加载 WordPress 评论头像
修改 HTML 结构

因为前面说到在新式浏览器中的问题, 我们不能再用一般书写 HTML 图片的方式, 而是要将占位符写到 src 属性, 而将真正的图片地址写在 data-original 属性上. 所以 WordPress 头像代码结构应该是下面这样的.

1	`<img` `class="avatar"` `src="占位符图片.gif"` `data-original="头像图片.jpg"` `/>`

在 WordPress 中, 本来输出头像如下.

1	`<?php` `echo` `get_avatar($comment); ?>`

现在需要改为适合 Lazy Load 插件的结构如下.

<?php echo

'<img src="占位符图片.gif" id="codetool">

这里建议使用 loading 图片或者默认头像作为占位符图片.

添加 Lazy Load 支持

打开 footer.php, 在 </body> 前添加 Lazy Load 插件和调用即可.

<script src="jquery.lazyload.js"></script>

<script>

/* <![CDATA[ */

$("img.avatar").lazyload();

/* ]]> */

</script>

当然, 在这之前你还需确保你的网站已经载入 jQuery. 完整的说明可以参考我翻译的关于 Lazy Load 的文章.

使用 Lazy Load 的优缺点

为什么用要 Lazy Load? 可能使用之前你就知道, 可以延迟加载图片, 提升页面加载速度. 但其实紧紧是速度问题, 其对网站的 SEO 也很重要. 比如: 现在有某文章页面, 后面有 N 多人回复, 但这些回复者的头像与文章内容往往没有关系, 我们不希望搜索引擎收录这么多无关的图片.

换个角度, 如果我们做的是电子商务网站, 希望产品的 description 中有丰富的图文信息, 并且被搜索引擎爬取. 但这些图片往往尺寸大影响加载速度, 淘宝为了页面性能也已经全部延迟加载, 而那些对 SEO 依赖性强的平台来说这种做法未必是好事.

选择是否延迟加载图片, 要衡量内容的重要性和页面的性能, 在其中取得平衡很重要.

WordPress

头像

延迟加载

延伸 · 阅读

2022-03-01Centos7的apache网站环境搭建wordpress
2022-03-01详解Xampp和wordpress在Centos7上的搭建与使用
2022-02-25PHP Everywhere漏洞使三万多个WordPress网站处于RCE攻击
2022-02-25易语言输入QQ号查看头像的代码
2022-02-24像素头像生成器_像素头像生成器在线_图片像素画
2022-02-24像素风头像生成器_一键生成像素画_图片像素画生

精彩推荐

Wordpress

Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决

这篇文章给大家介绍的是在Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法，相信"建立数据库连接错误"大家并不陌生，最近我在做一...

chriscabin11012021-03-18
Wordpress

WordPress 显示文章摘要方法详细篇

WordPress又一个比较不好的地方，首页、分类和其它归档页，文章默认都是全文输出排列的。不知现在国外博客是否都流行这种显示方式，反正我个人是很不...

WordPress建站网9222019-09-28
Wordpress

详解WordPress中调用评论模板和循环输出评论的PHP函数

这篇文章主要介绍了WordPress中调用评论模板和循环输出评论的PHP函数,分别是comments_template函数与wp_list_comments函数的使用,需要的朋友可以参考下...

稍息少年6032020-12-13
Wordpress

WordPress统计当前页面数据库查询次数及消耗时间的方法

这篇文章主要为大家介绍了WordPress统计当前页面数据库查询次数及消耗时间的方法,涉及get_num_queries与timer_stop函数的使用技巧,需要的朋友可以参考下...

6822019-09-04
Wordpress

WordPress中用于获取及自定义头像图片的PHP脚本详解

这篇文章主要介绍了WordPress中用于获取及自定义头像图片的PHP脚本编写方法,分别为get_avatar()和alt标签的使用,需要的朋友可以参考下...

斌果4082020-12-08
Wordpress

Wordpress被忽略的SEO技巧介绍

本文将从一个小细节说起来提升你网站的SEO功能 ...

点金主题网3022019-09-28
Wordpress

WordPress中登陆后关闭登陆页面及设置用户不可见栏目

这篇文章主要介绍了WordPress中登陆后关闭登陆页面及设置用户不可见栏目的方法,是多用户模式下比较实用的两个功能,需要的朋友可以参考下...

露兜4122020-12-12
Wordpress

WordPress 插件直接将服务器文件导入媒体库

WordPress 插件直接将服务器文件导入媒体库 ...

WordPress教程网10172019-10-07

最近更新

手机版wordpress怎么用
devops工程师(devops考试费用)
shopex主机(独立站shopify)
devops开发运维一体化
一个人怎么做独立站shopify(国外独立网站如何

编辑推荐

美国和欧洲 vps哪个好？美国和欧洲vps详细对比
2

云服务器是什么，云主机干什么用的？
2020-07-22
3

2020最新好用的web服务器软件推荐
2020-05-17
4

服务器操作系统有哪些?
2020-04-06
5

web服务器配置（图文详解）
2020-04-06
6

企业如何选择阿里云服务器配置?
2019-10-18
7

五大免费主机管理系统优缺点对比及推荐
2019-06-14
8

2019最新三款Windows下连接Linux的ssh软件下载推荐
2019-05-28
9

服务器常用管理软件盘点
2019-05-27
10

Nginx服务器究竟是怎么执行PHP项目
2019-05-24

阅读排行

1 WordPress提示require_once() Failed opening required的解
2 WordPress语言切换（例如中文版和英文版转换）
3 如何一次性删除wordpress所有文章
4 阿里云虚拟主机如何设置wordpress伪静态规则
5 WordPress中的shortcode短代码功能使用详解
6 wordpress网站默认的nginx伪静态规则
7 WordPress中设置Post Type自定义文章类型的实例教
8 WordPress伪静态规则设置代码实例
9 WordPress 全站改https方法
10 WordPress迁移时一些常见问题的解决方法整理

热门标签

502 　静态缓存文件　博客系统　搜索引擎优化　网站运行速度　页面压缩　加速　网站访问　速度优化　网站被挂马　中文留言　 fastcgi_cache 　缓存加速　 wp-config.php 　静态化　 WP-No-Category-Base 　分类链接　阿里云虚拟主机　自动替换　 WordPres 　管理面板　文章类型　后台地址　幻灯片　附件下载地址　 SAE 　静态化插件　 php-cgi 　负载过高　 wp-cron.php 　