WordPress 教程：创建多人博客作者页面

根据前面的 WordPress 技巧：创建博客作者页面 的介绍，今天咱们来完成一个适合多人博客的作者存档页面。可以显示作者的网站，邮箱和个人履历等这些资料，让读者更多地了解这个作者。

第一步：添加适合你博客的资料选项。

添加符合自己需求的资料选项比如： Twitter、Facebook、Google+、新浪微博、腾讯微博、搜狐微博、我的豆瓣、QQ 空间和删除不符合自己需求的资料选项比如： YIM AIM Jabber 资料选项，在 functions.php 文件中添加如下代码：

	add_filter( 'user_contactmethods', 'ts_add_contact_fields' );
	function ts_add_contact_fields( $contactmethods ) {
	$contactmethods['twitter'] = 'Twitter';
	$contactmethods['googleplus'] = 'Google+';
	$contactmethods['facebook'] = 'Facebook';
	$contactmethods['weibo'] = '新浪微博';
	$contactmethods['tencent'] = '腾讯微博';
	$contactmethods['sohu'] = '搜狐微博';
	$contactmethods['douban'] = '我的豆瓣';
	$contactmethods['qzone'] = 'QQ空间';

	unset( $contactmethods['yim'] );
	unset( $contactmethods['aim'] );
	unset( $contactmethods['jabber'] );

	return $contactmethods;
}

第二步：在需要的地方输出我们添加这些资料选项：

既然是多人博客咱们就要考虑到每个人的需求都不一样，那么就要给刚才添加的那些选项用 get_the_author_meta 做一个判断隐藏用户没有填写的字段。

<?php if ( get_the_author_meta( 'description' ) ): ?>
	<div class="author-profile clearfix">
		<div class="author-profile-face clearfix">
			<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'sight_author_bio_avatar_size', 50 ) ); ?>
		</div>
		<div class="author-profile-text">
			<h2 class="yahei"><?php the_author_posts_link(); ?></h2>
			<p><?php the_author_description(); ?></p>
		</div>
		<div class="author-profile-list clearfix">
		<dl class="clearfix">
			<dd>
			<?php if (get_the_author_url()) { ?><a href="<?php the_author_url(); ?>" rel="nofollow" target="_blank">博客</a><?php } ?>
			</dd>
			<dd>
			<?php if (get_the_author_meta('qzone')){ ?><a href="<?php the_author_meta('qzone'); ?>" rel="nofollow" target="_blank">QQ空间</a><?php } ?>
			</dd>
			<dd>
			<?php if (get_the_author_meta('weibo')){ ?><a href="<?php the_author_meta('weibo'); ?>" rel="nofollow" target="_blank">新浪微博</a><?php } ?>
			</dd>
			<dd>
			<?php if (get_the_author_meta('tencent')){ ?><a href="<?php the_author_meta('tencent'); ?>" rel="nofollow" target="_blank">腾讯微博</a><?php } ?>
			</dd>
			<dd>
			<?php if (get_the_author_meta('douban')){ ?><a href="<?php the_author_meta('douban'); ?>" rel="nofollow" target="_blank">豆瓣</a><?php } ?>
			</dd>
			<dd>
			<?php if (get_the_author_meta('twitter')){ ?><a href="<?php the_author_meta('twitter'); ?>" rel="nofollow" target="_blank">Twitter</a><?php } ?>
			</dd>
			<dd>
			<?php if (get_the_author_meta('facebook')){ ?><a href="<?php the_author_meta('facebook'); ?>" rel="nofollow" target="_blank">Facebook</a><?php } ?>
			</dd>
			<dd>
			<?php if (get_the_author_meta('sohu')){ ?><a href="<?php the_author_meta('sohu'); ?>" rel="nofollow" target="_blank">搜狐微博</a><?php } ?>
			</dd>
		</dl>
		</div>
	</div>
<?php endif; ?>

第三步：定义CSS样式

在这里你可以根据自己的需求定义它的样式，如果你的CSS不太好的话，就委屈一下啦将以下代码放到你的style.css文件中。(这里是这个样式的demo小样)

.main-author{ width: 650px;  /* 650px 是宽度大家跟着自己的需求搞一下*/ margin-left: 160px; border-right: none; overflow: visible; }
.author-profile{ background-color:#F5F6F7; border-color: #9C0; color: black; padding: 10px; margin: 10px 0 0 0; }
.author-profile-face{ font-weight: normal; font-size: 12px; position: relative;  }
.author-profile-face img{ position: absolute; margin: 0; padding: 0; }
.author-profile-text{ float: left; margin-left: 70px; }
.author-profile-text h2{ font-weight: 700; line-height: 1.5em; font-size: 16px; margin-bottom: 0; }
.author-profile-text h2 a{ color: #333; text-decoration: none; }
.author-profile-text p{ line-height: 1.5em;  margin: 5px 0; }
.author-profile-list{ width: 100%; margin-top: 10px; padding-top: 10px; display: block; float: left; text-align: right; border-top: 1px solid #ddd; text-align: right; }
.author-profile-list dl{ }
.author-profile-list dd a{ display: block; float: left; text-decoration: none; color: #333; padding: 2px 5px; margin-left: 10px; font-size: 12px; }
.author-profile-list dd a:hover{ background: #D14836; color: #fff; text-decoration: none;  }