在WordPress中实现评论头像的自定义默认和延迟加载

自定义 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 依赖性强的平台来说这种做法未必是好事.

选择是否延迟加载图片, 要衡量内容的重要性和页面的性能, 在其中取得平衡很重要.

赞 (0)

相关推荐

  • WordPress中限制非管理员用户在文章后只能评论一次

    之前有网友提出,在WordPress中有没有办法实现每篇文章只允许用户评论一次? 暂不说这个需求有没有用,毕竟WordPress就是给有各种需求的人用的.这个功能实现起来也比较简单,只需每次用户发表的评论进数据库之前,从当前文章的所有评论中查找是否有相同的用户名或邮箱已经发表过评论,如果有就跳到错误页面即可. 实现代码,放到当前主题的functions.php中即可(这里还增加了对IP的判断,更保险): // 获取评论用户的ip,参考wp-includes/comment.php functio

  • WordPress中利用AJAX异步获取评论用户头像的方法

    WordPress中利用AJAX异步获取评论用户头像的方法

    在评论者输入邮箱后,异步获得评论者的头像并显示出来,个人感觉这个功能虽不能给用户体验带来多大的提升,也不算是一个实用的功能,但至少很炫,看到有的网站有添加这个功能,我也不甘寂寞所以也写了个脚本,没有时间做封装,所以直接上原理和代码. 异步动态调用头像原理 获得用户输入 过滤用户输入 传递变量到后台 后台处理数据,并返回头像的HTML代码 获得后台返回数据,将HTML代码加载到当前页面 貌似很多步骤,其实很简单,我们只要将自己的主题稍作修改就可以到达效果. 简单功能截图: 实现 功能代码:Java

  • 使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

    使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

    添加 Ctrl+Enter 快捷回复 这里送上两种方法,首先是 jQuery 方法,前段时间一直在研究 jQuery ,因此对 jQuery 方法比较熟悉,如果你的主题本来已经加载 jQuery 库,建议你使用下面的方法. 把这段代码加入 js 文件中,如果你已经加载 jQuery ,现在就可以使用 Ctrl+Enter 进行快捷回复. jQuery(document).ready(function($){ //Ctrl+Enter回复 jQuery(document).keypress(fun

  • 利用jQuery实现WordPress中@的ID悬浮显示评论内容

    利用jQuery实现WordPress中@的ID悬浮显示评论内容

    比如: A 留言了, B 用 @ 回复了 A, 所以 B 的回复可能是这样的: @A How much money do you have? 就是说, 当鼠标悬停在 @A 上面的时候, 就会将 A 的评论内容显示在一个悬浮区域中. 实现步骤 在这里我们将以iNove主题为例进行讲解. 1. 将以下代码保存为commenttips.js: jQuery(document).ready( function(){ var id=/^#comment-/; var at=/^@/; jQuery('#t

  • 修改PHP脚本使WordPress拦截垃圾评论的方法示例

    拦截英文垃圾评论 由于绝大多数的垃圾评论都是英文的,所以国内不少朋友在使用 Some Chinese Please 插件,它可以有效地拦截内容中不带有中文字的comment和trackback(pingback),不写入数据库中,可有效地减小spam对blog服务器的无谓使用.虽然已经 2 年多没有更新,但还是可用的. 其实还可以简化下,直接将下面的代码添加到主题的 functions.php 文件,效果与使用 Some Chinese Please 插件相同: /* refused spam

  • 利用AJAX实现WordPress中的文章列表及评论的分页功能

    文章列表页分页 一.加载 jQuery 库 既然是 jQuery 驱动的 Ajax ,加载 jQuery 库是必须的. 二.文章列表格式 在你的文章列表页面(首页 index.php.归档 archive.php )需要确保有以下类似的结构 <!-- 包含所有文章的容器 --> <div id="content"> <!-- 各文章的容器 --> <div class="post"></div> <d

  • WordPress过滤垃圾评论的几种主要方法小结

    由于个人博客小站的空间与mysql空间往往有限,共享服务器资源也有限,所以垃圾评论一定要拦截在写入数据库之外. 更可气的是看到空间的统计,很几千的IP访问,但基本上都是这个垃圾评论的IP,所以实在不能忍 网上找了一些方法,主要有三个,如果将这三个一块使用基本上就可以拦截绝大多数垃圾评论 一.使用Akismet插件(https://wordpress.org/plugins/akismet/),后台申请一个免费的key,可以拦截99%的垃圾评论,但是这个插件还是会将垃圾评论写入数据库的,一会几千条

  • WordPress中对访客评论功能的一些优化方法

    WordPress中对访客评论功能的一些优化方法

    前几天见到某 Blog (忘记名字和网址了) 有一个相当实用的评论功能. 访客留言之后资料输入框会被隐藏起来, 如同登录了一般. 访客可以选择修改相关资料再进行评论. 给予访客很好的用户体验. 今天我将这个功能移植到了自己的主题上, 制作不难, 分享一下吧. 需求 细心的朋友可能已经注意到了: 当在某个 WordPress 发表评论后再次访问该 Blog, 资料就不需要再次填写, 因为它们都已经在资料输入框里面. 但没评论过的或者清除了 Cookie 之后, 资料输入框将空空如也. 1. 当访客

  • 讲解WordPress中用于获取评论模板和搜索表单的PHP函数

    comments_template()(获取评论模板) comments_template() 函数用来获取评论模板,一般只能用在文章或者页面上,如果不是文章或者页面将无法显示. 用法 comments_template( $file, $separate_comments ); 参数 $file (字符串)(可选)要评论模板文件. 默认值:/comments.php(当前主题根目录的 comments.php 文件). $separate_comments (布尔)(可选)是否根据评论的类型区

  • 在WordPress中实现评论头像的自定义默认和延迟加载

    自定义 WordPress 默认评论头像 对于没有设置Gravatra头像的评论者来说,WordPress会显示一个你在后台设置的默认头像,可以是神秘人.空白.默认的Gravatar 标志等等.但是这些头像有一个共同的不足之处,就是不怎么美观,可看性不强!打个比方,如果你去一个博客阅读文章,但当你放心评论文章的读者头像都是小怪物.复古等一系列WordPress自动生成的"不堪入目"的头像时,你还有很浓的兴趣去阅读这个博客的文章吗?我想答案是肯定的!那么,你有没有想过,自己设计或找一个属

  • 详解WordPress中调用评论模板和循环输出评论的PHP函数

    comments_template comments_template 函数是一个调用评论模板的函数,使用起来很简单,与get_header()等函数一样,是一个include文件类函数,今天来讲一下他的使用. 描述 上面已经讲过了,就是调用评论模板的一个函数. 使用 <?php comments_template( $file, $separate_comments ); ?> 其中 $file 需要调用的文件名 默认值: /comments.php $separate_comments 是

  • WordPress中用于获取搜索表单的PHP函数使用解析

    get_search_form 函数在 WordPress 中是用来提取预设的搜索表单或者默认的搜索表单的.因为官方这个函数没有中文的,所以我就简单写了一下. 描述 get_search_form 函数在 WordPress 中是用来提取自定义搜索表单或者默认的搜索表单的. 显示自定义表单还是显示默认表单,完全取决于您的主题中是否有search.php文件, 如果有该文件,则自动调用该文件,如果没有则显示默认的搜索表单. 使用 <?php get_search_form($echo = true

  • 详解WordPress中的头像缓存和代理中的缓存更新方法

    详解WordPress中的头像缓存和代理中的缓存更新方法

    wordpress评论中的头像是使用Gravatar的头像服务(Gravatar官方注册地址:http://en.gravatar.com),用户的缓存头像一般都是固定不变的,所以我们可以将头像缓存到本地来提高我们网站的访问速度. 我的wordpress avatar目录的头像缓存: wordpress头像缓存功能设置方法 首先是在根目录下建立一个文件夹avatar,权限755.再在里面放一个默认的头像(default.jpg),没头像的童鞋就会用默认的.代码如下: function my_av

  • WordPress中利用AJAX技术进行评论提交的实现示例

    一直对 WordPress 的 Ajax 交互研究感兴趣,也一直很关注于这方面的技术,谈到 WordPress Ajax 就不得不谈到评论 Ajax提交,作为一个博客.论坛评论的 Ajax 提交不仅可以改善用户体验,还可以大幅缩减服务器开支,毕竟输出单条评论内容比重新组织输出一个页面要简单的多. 虽说现在访问量一直比较低,不存在服务器压力的问题,但一向注重用户体验的我,当然不能放弃这么一个提升用户体验的机会.今天抽了一下午的空,把这个主题的 Ajax 评论提交初步完成了. 直接开门见山,直接上代

  • WordPress中邮件的一些修改和自定义技巧

    更改邮件内容类型为 HTML 在 WordPress 中发送邮件需要使用 wp_mail() 函数,但是邮件内容默认的类型却是"text/plain",也就是不支持 HTML. 如果你想要在邮件内容中添加 HTML 代码,除了发送"Content-Type: text/"的 headers 信息之外,还可以利用过滤器统一修改. /** *WordPress 更改邮件内容类型为 HTML *http://www.endskin.com/mail-content-typ

  • WordPress中设置Post Type自定义文章类型的实例教程

    WordPress中设置Post Type自定义文章类型的实例教程

    什么是自定义post? 不要想当然的认为这里的post就是就是指博客中的文章,它只不过是一个文章类的代理词而已,甚至你还可以认为它是内容. 自定义模型是没有一个很标准的什么规定的,文章模型可以是你想的任何一个内容模型,就拿wordpress本身来说就内置了以下几个内容文章模型: 博客文章 页面 附件 修正 导航等 你可以这样去理解:它只要是想我们使用博客文章那样用来创建.编辑和储存数据的一种很灵活的内容形式. 不过在这里我还是需要提醒下,博客内置的post还是有点点不同的,你可以利用它含有分类.

  • WordPress中Gravatar头像缓存到本地及相关优化的技巧

    将Gravatar全球通用头像缓存的目的在于加快网站的打开速度,因为Gravatar官网的服务器在国外,加上伟大的GFW,国内打开速度经常很慢.方法来自willin,不过貌似他的网站已经打不开了- -   将Gravatar全球通用头像缓存到本地   缓存方法如下: 1.建立缓存目录 在WordPress根目录建立一个名为 avatar的文件夹,设置该文件夹的权限为 0755 (如果 0755 不行,就试一下 0777). 2.设置默认头像 准备一张大小适合(32*32即可)的默认头像,命名为"

  • 在WordPress中创建自定义页面模板方法详解

    在WordPress中创建自定义页面模板方法详解

    WordPress 页面模板是特定的模板文件,用于特定页面或页面组,这些用于单页数据的模板显示在前端.我们还可以在 WordPress 中创建自定义页面模板. 在本文中,我们将学习如何在 WordPress 中创建自定义页面模板,以及我们如何将自定义模板分配给 WordPress 中的特定页面或页面组. 在 WordPress 中创建自定义页面模板 默认情况下,WordPress 允许使用默认模板文件page.php创建页面和文章来处理前端的外观. 我们还可以对默认模板文件 ( page.php

随机推荐