在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 urlencode()与urldecode()函数字符编码原理详解
Dec 06 PHP
PHP备份数据库生成SQL文件并下载的函数代码
Feb 05 PHP
windows环境下php配置memcache的具体操作步骤
Jun 09 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
Aug 16 PHP
laravel安装zend opcache加速器教程
Mar 02 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
Apr 15 PHP
php实现的用户查询类实例
Jun 18 PHP
解析WordPress中的post_class与get_post_class函数
Jan 04 PHP
joomla数据库操作示例代码
Jan 06 PHP
基于PHP生成简单的验证码
Jun 01 PHP
PHP的curl函数的用法总结
Feb 14 PHP
Laravel开启跨域请求的方法
Oct 13 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
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python 为什么说eval要慎用
2019/03/26 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
python 安装移动复制第三方库操作
2020/07/13 Python
Python如何读取、写入CSV数据
2020/07/28 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
团队精神演讲稿
2013/12/31 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
小学生环保倡议书
2014/05/15 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
合作协议书模板
2014/10/10 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
实习单位推荐信
2015/03/27 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript