在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 相关文章推荐
解析argc argv在php中的应用
Jun 24 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
Oct 25 PHP
zf框架的校验器InArray使用示例
Mar 13 PHP
php实现文件下载功能的几个代码分享
May 10 PHP
php使用pack处理二进制文件的方法
Jul 03 PHP
自定义session存储机制避免会话保持问题
Oct 08 PHP
PHP输出日历表代码实例
Mar 27 PHP
PHP设计模式之注册树模式分析
Jan 26 PHP
php 读写json文件及修改json的方法
Mar 07 PHP
PHP实现动态删除XML数据的方法示例
Mar 30 PHP
PHP xpath()函数讲解
Feb 11 PHP
PHP变量的作用范围实例讲解
Dec 22 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
高中语文教学反思
2014/01/16 职场文书
2014年采购员工作总结
2014/11/18 职场文书
老乡聚会通知
2015/04/23 职场文书
学校通报表扬范文
2015/05/04 职场文书
欧元符号 €
2022/02/17 杂记
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏