在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 相关文章推荐
Mysql和网页显示乱码解决方法集锦
Mar 27 PHP
php 什么是PEAR?(第二篇)
Mar 19 PHP
关于php curl获取301或302转向的网址问题的解决方法
Jun 02 PHP
PHP 关于访问控制的和运算符优先级介绍
Jul 08 PHP
PHP制作图形验证码代码分享
Oct 23 PHP
php调整服务器时间的方法
Apr 03 PHP
php获取英文姓名首字母的方法
Jul 13 PHP
php简单实现多语言切换的方法
May 09 PHP
制作个性化的WordPress登陆界面的实例教程
May 21 PHP
PHP基于新浪IP库获取IP详细地址的方法
May 04 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
Oct 10 PHP
使用Git实现Laravel项目的自动化部署
Nov 24 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
杏林同学录(三)
2006/10/09 PHP
分享PHP入门的学习方法
2007/01/02 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
详解JS函数防抖
2020/06/05 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
用Python实现数据的透视表的方法
2018/11/16 Python
浅析python的Lambda表达式
2019/02/27 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python class的继承方法代码实例
2020/02/14 Python
PyQt实现计数器的方法示例
2021/01/18 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
交通事故检查书范文
2014/01/30 职场文书
大学班级学风建设方案
2014/05/01 职场文书
学校师德承诺书
2014/05/23 职场文书
幸福终点站观后感
2015/06/04 职场文书
地道战观后感
2015/06/04 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB