利用Author Image插件实现在文章中添加作者头像

之前有专门针对多作者博客在首页和单个文档页面文章前显示作者头像写了一个方法,用的是CSS+Gravatar头像。自己觉着挺好,因为可以在外站评论别人文章的时候,同步显示一样的头像,很直观。

但,问题是,作为多作者博客,并不是每个作者都有Gravatar的头像,也不是每个人都有兴趣去注册他,就我那个TownFine的站点, 拉来一起写的第一个哥们就没兴趣去这个英文网站注册一下账号,最后只能是我让步,行,那我找其他的方法吧。

通过在WordPress后台搜索有关”Author”的插件,发现一款名为Author Image的插件,该插件安装并激活后,可以在“我的配置”栏目里增加一个作者头像上传栏,这样,作者只需要上传自己希望用到的头像就可以了。

调用也很简单,有两种方式:一种是以侧边栏挂件的形式,另一种是通过在需要显示图像的地方,加入<?php the_author_image();?>代码,就可调用。我需要用到后者,于是根据上一篇有关头像调用的代码基础上更改如下:

一、先在样式表中建立一个浮动CSS框,我们利用ID为“autherimg”来做,使其向左浮动,底部边框为实线,5px粗,外边框上和左为0,右边 为20px,下边为15px 。建立代码如下:

#autherimg {
float:left;
border-bottom-style:solid;
border-bottom-width:5px;
margin:0px 20px 15px 0px;
text-align:center;
}

注明:如果你要想现实该头像在右侧,则将“float:left;”更改为“floalt:right;”

二、将如下代码添加到需要显示头像的文章开头部分:

<div id=”autherimg”><?php the_author_image();?>
<div style=”clear: both;”></div>
<strong><?php the_author_posts_link(); ?></strong>
</div>

说明:因为这里我另外添加了一个显示作者名称和作者页面的链接,而图片输出后采用的CSS是浮动型的,作者名称会紧接其后,所以需要用到“clear”来做一次清理,以让作者名称与图像隔断。如果仅仅是输出图片,那就没必要加<div style=”clear: both;”></div>这个代码了

三、该插件默认输出图片是原大小,那么,对于我们来说就不方便,因为毕竟每个作者上传的头像都是大小不一的嘛。怎么统一呢?在后台进入【插件】-【已安装】,找到该插件,然后点击”编辑”链接。打开插件编辑窗口。利用“CTRL+F”键搜索“<img ”标签,你会发现,就此一个符合对象,那么就是它了,在标签里添加一条属性: width=”80″   当然这个“80”你可以更改为任何你希望的最大宽度。{这个数值更改后,其作为挂件展示的作者头像也会受到影响,目前我功力比较浅,还无法做到在插件更改上做以区分。}

保存后,就可以看到效果了。