在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 相关文章推荐
无限级别菜单的实现
Oct 09 PHP
php格式化工具Beautify PHP小小BUG
Apr 24 PHP
浅谈PHP强制类型转换,慎用!
Jun 06 PHP
关于zend studio 出现乱码问题的总结
Jun 23 PHP
使用PHP获取当前url路径的函数以及服务器变量
Jun 29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
Jun 26 PHP
CodeIgniter框架URL路由总结
Sep 03 PHP
Laravel 4 初级教程之Pages、表单验证
Oct 30 PHP
php生成RSS订阅的方法
Feb 13 PHP
浅谈PHP值mysql操作类
Jun 29 PHP
php组合排序简单实现方法
Oct 15 PHP
关于PHP中协程和阻塞的一些理解与思考
Aug 11 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
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
yii的CURD操作实例详解
2014/12/04 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
js资料prototype 属性
2007/03/13 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
Python实现list反转实例汇总
2014/11/11 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python重新加载模块的实现方法
2018/10/16 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
思想政治教育专业个人求职信范文
2013/12/20 职场文书
委托公证书范本
2014/04/03 职场文书
信访工作经验交流材料
2014/05/23 职场文书
全运会口号
2014/06/20 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书