在WordPress中实现评论头像的自定义默认和延迟加载
自定义WordPress默认评论头像
对于没有设置Gravatra头像的评论者来说，WordPress会显示一个你在后台设置的默认头像，可以是神秘人、空白、默认的Gravatar标志等等。但是这些头像有一个共同的不足之处，就是不怎么美观，可看性不强！打个比方，如果你去一个博客阅读文章，但当你放心评论文章的读者头像都是小怪物、复古等一系列WordPress自动生成的“不堪入目”的头像时，你还有很浓的兴趣去阅读这个博客的文章吗？我想答案是肯定的！那么，你有没有想过，自己设计或找一个属于你博客、适合你博客的默认WordPress头像那？好了，周良就不吊大家的胃口了，让我来说一下如何不使用插件实现自定义WordPress默认评论头像的方法。
方法很简单，将下面我提供的这段代码放在你正在使用的主题functions.php文件中。
<?php
//Makeanewdefaultgravataravailableonthedashboard
functionnewgravatar($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头像代码结构应该是下面这样的.
<imgclass="avatar"src="占位符图片.gif"data-original="头像图片.jpg"/>
在WordPress中,本来输出头像如下.
<?phpechoget_avatar($comment);?>
现在需要改为适合LazyLoad插件的结构如下.
<?phpecho'<imgclass="avatar"src="占位符图片.gif"alt=""data-original="'.preg_replace(array('/^.+(src=)(\"|\')/i','/(\"|\')\sclass=(\"|\').+$/i'),array('',''),get_avatar($comment)).'"/>';?>
这里建议使用loading图片或者默认头像作为占位符图片.
添加LazyLoad支持
打开footer.php,在</body>前添加LazyLoad插件和调用即可.
<scriptsrc="jquery.lazyload.js"></script>
<script>
/*<![CDATA[*/
$("img.avatar").lazyload();
/*]]>*/
</script>
当然,在这之前你还需确保你的网站已经载入jQuery.完整的说明可以参考我翻译的关于LazyLoad的文章.
使用LazyLoad的优缺点
为什么用要LazyLoad?可能使用之前你就知道,可以延迟加载图片,提升页面加载速度.但其实紧紧是速度问题,其对网站的SEO也很重要.比如:现在有某文章页面,后面有N多人回复,但这些回复者的头像与文章内容往往没有关系,我们不希望搜索引擎收录这么多无关的图片.
换个角度,如果我们做的是电子商务网站,希望产品的description中有丰富的图文信息,并且被搜索引擎爬取.但这些图片往往尺寸大影响加载速度,淘宝为了页面性能也已经全部延迟加载,而那些对SEO依赖性强的平台来说这种做法未必是好事.
选择是否延迟加载图片,要衡量内容的重要性和页面的性能,在其中取得平衡很重要.