当WordPress升级到2.5版本后, 我们基本就不再需要那些显示Gravatar头像的插件了, 因为从WordPress2.5版本以后, WordPress本身就支持了这个功能. 所以, 你可能发现, 在你BLOG的后台管理评论时, 有些评论者是有头像的, 但是在BLOG的前台页面中却没有显示...

因为在2.5版本之前, WP自身是没有评论者头像显示功能的, 所以, 很多WP的模板也没有设计评论者头像的位置... 那么, 现在要怎么做才能把在WP后台管理评论处看到的评论者的头像, 让前台的日志评论中也显示出来呢??

其实很简单, 只是输出一个函数运行结果而已... 方法如下:

代码: <?php echo get_avatar( $comment, 50 ); ?>

简单解释一下, echo是输出指令, get_avatar()是获取头像的函数, 那个参数50是头像的大小(也就是长宽), 你可以填写你想要的数值, 不过最好不要超过80, 因为Gravatar服务所提供的最大头像只是80*80大的图片.

将上面的代码插入到你的评论模板中(comments.php)的适当位置就可以了.  :D 简单吧~

以上这些, 对那些WP的熟练使用者来说, 已经足够了... 他们完全看得懂也知道怎么做了... 但是可能一些不熟悉HTML和对代码一看到就头痛的人来说... 估计起不到什么作用... 那么... 我就尽量讲的再细致一些...

大侠们就不用往下看了... :P

针对人群1: 对页面排版要求不是十分严格, 也懒得去摆弄代码的同学. 否则请参考"针对人群3"


在你们的commnets.php这个文件中, 你们一定会找到 <?php comment_author(); ?> 这样一段代码, 无论是哪个模板, 这段代码是一定会有的... 如果你觉得代码太多, 用眼睛找会很痛苦, 那么就"Ctrl+F"搜索这段代码就行了... 然后把 <?php echo get_avatar( $comment, 50 ); ?> 插入到这段代码前面就可以了... 但这是在你完完全全不知道该怎么做, 插入到哪里的情况下... (我想能够自己安装WP的都一定已经不是泛泛之辈了... 所以... 这段文字貌似有些废话的嫌疑...)

针对人群2: 对HTML有一定了解, 但PHP语言是0基础的同学.

如果你对网页制作和HTML比较熟悉的话... 这个程度至少要在你看到HTML代码时, 至少有70% - 80%的代码你清楚它们是什么意思. 如果你符合这个条件, 那么我只需要说一句话, 你们就完全明白了... <?php echo get_avatar( $comment, 50 ); ?> 这段代码的最终结果, 就是在网页上输出一段 <img alt="" src="http://图片地址" class="avatar avatar-xx" width="xx" height="xx"> 这样的代码(XX表示你所设置的头像大小). 只不过PHP代码是在服务器上被执行, 而HTML代码是在客户端被浏览器读取, 所以你在查看网页源代码的时候无法看到PHP的代码.

针对人群3: 希望页面排版能尽可能漂亮一些, 有情绪去接触HTML, 但并不太会HTML的同学.

插入的方式就在上面, 我就不再重复了, 但插入后效果可能不太好... 你可能看到的是下面这个样子:

昵称: 戴耳钉的猫
发布于: 公元前300年16月271日
星期十六

我想你可能也不太喜欢这个效果吧?

恩... 你可以通过DIV+CSS来完成对这一部分图片的控制, 具体方法如下:

在你的CSS文件中, 添加以下样式的定义:

/* 评论头像左对齐 */

.gravatar {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #009900;
padding-bottom: 5px;
}
.gravatar img {
border: none;
float: left;
margin: 0 5px 0 0;
}

简单解释一下吧, 还是用老办法, 把这段代码直接用中文的方式表达出来...

/* 到 */ 之间的内容是注释部分, 不会干扰其它代码. 包括C语言, PHP, C++等很多语言都可以使用这种注释方法...

.gravatar (随便定义个名字而已, 名称随便你, 只是用来被DIV调用) {
下面的-边框-粗细: 1像素;
下面的-边框-样式: 虚线;
下面的-边框-颜色: 深绿色; (#RRGGBB是颜色表, 关于颜色表的具体细节请查看这里)
区域内放置-距离底部: 5像素;
}
.gravatar img (对这个区域内出现的IMG标记进行定义) {
边框: 没有;
放置: 左边;
区域外放置: 0 5像素 0 0; (这里是4个数值, 分别代表距离"上 右 下 左"的长度, 这个例子中就是距离右边5像素, 其它方向0像素)
}

OK, 这么解释一下就清楚多了吧? 你可以根据自己的需要修改成符合你页面的样式... 如果你实在没明白... 那就直接复制粘贴这个也可以...

接着, 回到你的comments.php模板文件中... 观察 <?php comment_author(); ?> 这段代码的附近区域... 它们可能会类似这个样子:

<a href="<?php comment_author_url(); ?>"><?php comment_author(); ?></a>
<br>
<a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('Y.m.d l') ?> <?php comment_time() ?></a>
&nbsp;&nbsp;<?php edit_comment_link('编辑','[',']'); ?>

上面这段只是举例, 你的代码是和我上面这段不完全一样的, 但应该是类似, 可能会多些东西或少些东西...

还记得要吧 <?php echo get_avatar( $comment, 50 ); ?> 插入到哪里吗? 恩.. 很好, 如果你不想让头像也带有超链接, 那么就插到 <a href="<?php comment_author_url(); ?>"><?php comment_author(); ?></a> 的前面. 下面, 要做的就是用<div class="gravatar">和</div>把这段代码括起来. 即:

<div class="gravatar">
<?php echo get_avatar( $comment, 50 ); ?>
<a href="<?php comment_author_url(); ?>"><?php comment_author(); ?></a>
<br>
<a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('Y.m.d l') ?> <?php comment_time() ?></a>
&nbsp;&nbsp;<?php edit_comment_link('编辑','[',']'); ?>
</div>

这里面<div class="gravatar">中的gravatar是刚刚上面定义好的CSS样式名称, 如果你用了你自己起的名字, 那么记得这里也要使用对应的名字, 才能让DIV找得到.

通过DIV+CSS的控制后, 修改后的代码在页面中显示的效果就会好多了... 如下:

昵称: 戴耳钉的猫
发布于: 公元前300年16月271日
星期十六

好了... 就是这么多... 不知道能不能让人明白...

哦, 对了... 如果你是在写日志的时候希望插入一张图片, 也用这种样子排版的话, 那么大可不必这么费劲的去弄CSS... 因为文章中插入的图片都是HTML代码形式的, 那么只要在IMG标签中进行样式的控制就可以了, 将<img src="http://图片地址" border="0" >中加入 style="float:left" 或者 style="float:right" 即: <img src="http://图片地址" boder="0" style="float:left (或者right)">

总算是写完了... 不过写的我心里很没底... 毕竟能够自己安装使用WordPress的人都不是一般战士... 这种教程对他们来说绝对是可笑的... 因为这些都是最基础不过的东西... 而且这篇文章在Yo2.cn将WordPress程序升级到2.5之前, 基本是没什么用的... 所以... 我真的很怀疑我写这篇东西到底是不是在做无用功... 不管怎么说... 反正也写完了... 发布出来吧... 不然就真的成无用功了... :P

------ by: 本来想写关于OpenID文章的 戴耳钉的猫

---

Orignal From: WordPress如何显示日志评论者的头像