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


Posted in PHP onNovember 24, 2015

自定义 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 头像代码结构应该是下面这样的.

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

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

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

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

<?php echo '<img class="avatar" src="占位符图片.gif" alt="" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar($comment)) . '" />'; ?>

这里建议使用 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 依赖性强的平台来说这种做法未必是好事.

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

 

PHP 相关文章推荐
php面向对象全攻略 (十) final static const关键字的使用
Sep 30 PHP
PHP用mysql数据库存储session的代码
Mar 05 PHP
调整优化您的LAMP应用程序的5种简单方法
Jun 26 PHP
使用JSON实现数据的跨域传输的php代码
Dec 20 PHP
win7下memCache的安装过程(具体操作步骤)
Jun 28 PHP
PHP内核探索:变量概述
Jan 30 PHP
9段PHP实用功能的代码推荐
Oct 14 PHP
php实现的任意进制互转类分享
Jul 07 PHP
PHP中危险的file_put_contents函数详解
Nov 04 PHP
thinkphp5 URL和路由的功能详解与实例
Dec 26 PHP
PHP+MySQL实现模糊查询员工信息功能示例
Jun 01 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
Jan 16 PHP
WordPress中缩略图的使用以及相关技巧
Nov 24 #PHP
WordPress中对访客评论功能的一些优化方法
Nov 24 #PHP
php发送短信验证码完成注册功能
Nov 24 #PHP
PHP获取文件扩展名的4种方法
Nov 24 #PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
Aug 17 #PHP
PHP如何通过AJAX方式实现登录功能
Nov 23 #PHP
最新制作ThinkPHP3.2.3完全开发手册
Nov 23 #PHP
You might like
用libtemplate实现静态网页生成
2006/10/09 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
浅谈node的事件机制
2017/10/09 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python 图片验证码代码分享
2012/07/04 Python
python万年历实现代码 含运行结果
2017/05/20 Python
Python 私有函数的实例详解
2017/09/11 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
python统计文章中单词出现次数实例
2020/02/27 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
大学生自荐信
2013/12/11 职场文书
天坛导游词
2015/02/02 职场文书
大国崛起英国观后感
2015/06/02 职场文书
python文件目录操作之os模块
2021/05/08 Python
解析原生JS getComputedStyle
2021/05/25 Javascript
SpringBoot 集成Redis 过程
2021/06/02 Redis
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS