十 2nd, 2010  |  (6+)WordPress团队博客作者头像、简介和文章集插件

目前煮透社有两个作者，一个是我，另一个是我们公司的工程师盛工。也许今后的作者会更多，那么如何很有个性地区分出哪些文章是哪位作者写的？

一般情况下有个作者名就行了，但是这样显得太不个性，而且无法显示作者的作品集。有兴趣的同学可以看看我文章下面的作者介绍，点击作者名称有一个JQUERY弹出框，框里有作者的名称、头像、简介、作品集链接。是不是很酷？

这里先介绍一个插件：Author Exposed 这个插件用来显示文章的作者和作品集，下载＼上传＼激活，之后在需要的地方使用如下调用代码：

<?php the_author_posts_link(); ?>（这个调用代码我们这里暂时不用）

插件下载地址：Plugin: AuthorExposed v1.1 (4kb).   Download

下面是我使用的代码你可以直接复制使用：

<div class="author-detail">
<p> <?php echo get_avatar( get_the_author_email(), '60', 'http://example.com/no_avatar.jpg' ); ?> 作者 - <a href="<?php the_author_url(); ?>"><strong><?php if (function_exists('author_exposed')) {author_exposed();} ?></strong></a></p><p><?php the_author_description(); ?></p>
</div>

我们来把上面代码各部分的功能讲解一下，

<?php echo get_avatar( get_the_author_email(), '60', 'http://example.com/no_avatar.jpg' ); ?>
?? 红色部分是当作者没有申请Avatar头像时，我们使用一个临时的头像图片。

<a href="<?php the_author_url(); ?>"><strong><?php if (function_exists('author_exposed')) {author_exposed();} ?></strong></a>
?? 这一句调用上面插件的功能。


<p><?php the_author_description(); ?> </p>
?? 这一句调用作者的简介，简介在后台用户组里添加。


最后还有这部分的CSS，我的是这样写的如果你COPY了上面的代码，也可以直接COPY这个CSS片段：

.author-detail{background:#efefef;padding:5px;height:70px;}
.author-detail p{line-height:17px;}
.author-detail a,.footer a{border-bottom:none;}
.author-detail h5{font:normal 16px Georgia, "Times New Roman", Times, serif;}
.author-detail img.avatar{float:left;padding:3px;background:#fff;margin-right:10px;width:auto!important;}

完成。

原创文章，版权所有©转载请注明： 转载于“煮透社”。
本文标签：wordpress
如果您觉得这篇文章不错，请点击：