在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桌面中心(三) 修改数据库
Mar 11 PHP
数据库查询记录php 多行多列显示
Aug 15 PHP
Memcached常用命令以及使用说明详解
Jun 27 PHP
php结合ajax实现赞、顶、踩功能实例
May 12 PHP
php中$_GET与$_POST过滤sql注入的方法
Nov 03 PHP
wamp服务器访问php非常缓慢的解决过程
Jul 01 PHP
php根据日期或时间戳获取星座信息和生肖等信息
Oct 20 PHP
前端必学之PHP语法基础
Jan 01 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
May 13 PHP
php写app接口并返回json数据的实例(分享)
May 20 PHP
visual studio code 调试php方法(图文详解)
Sep 15 PHP
PHP设计模式之观察者模式定义与用法示例
Aug 04 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下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
php实现映射操作实例详解
2019/10/02 PHP
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
简单谈谈python中的语句和语法
2017/08/10 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
中专自荐信
2013/10/13 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
有关打架的检讨书
2014/01/25 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android