wordpress文章下如何顯示作者欄位

瀏覽: 人氣

Posted on 5 9 月, 2013 by A-MO

A-MO先生的筆記

wordpress好玩又好用,但對多作者的配套外掛有限,這部份很多要自己來
以下是我網羅各派教學後消化的結果。
要動手的檔案有:

佈景函式庫 (functions.php)|單篇文章 (single.php)|樣式表 (style.css)

佈景函式庫 (functions.php)
function add_user_porfile( $contactmethods ) {
$contactmethods[‘google’] = ‘Google+ 個人網址’;
$contactmethods[‘facebook’] = ‘Facebook 個人網址’;
$contactmethods[‘twitter’] = ‘Twitter 個人網址’;
$contactmethods[‘description_url’] = ‘個人網站’;
return $contactmethods;
}
add_filter(‘user_contactmethods’,’add_user_porfile’,10,1);

function postauthor_init(){
global $post;
?>
<div class=”author”>
<div class=”avatar”><?php echo get_avatar(get_the_author_meta(‘ID’), 100);?></div>
<div class=”text”>
<span class=”name”>編者:<?php the_author_meta(‘display_name’);?></span>
<span class=”description”>
<?php the_author_meta(‘description’);?>
</span>
<div class=”social”>
<?php if ( get_the_author_meta( ‘google’ ) ): ?>
<a href=”<?php the_author_meta(‘google’);?>?rel=author” title=”我的G+”>Google+</a> | <? endif;?>
<?php if ( get_the_author_meta( ‘facebook’ ) ): ?>
<a href=”<?php the_author_meta(‘facebook’);?>” title=”我的臉書”>Facebook</a> | <? endif;?>
<?php if ( get_the_author_meta( ‘twitter’ ) ): ?>
<a href=”<?php the_author_meta(‘twitter’);?>” title=”我的推特”>Twitter</a> | <? endif;?>
<?php if ( get_the_author_meta( ‘description_url’ ) ): ?>
<a href=”<?php the_author_meta(‘description_url’);?>” title=”<?php the_author_meta(‘display_name’);?> 個人介紹”>個人介紹</a> | <? endif;?>
<a href=”<?php echo get_author_posts_url(get_the_author_meta(‘ID’));?>” title=”更多<?php the_author_meta(‘display_name’);?>的文章”>更多文章 &gt; </a></span>
</div>
</div>
</div>
<?
}


休息一下!進廣告!


樣式表 (style.css)
.author {
padding: 0 10px;
display: inline-block;
width: 97%;
margin: 15px 0 0 0;
border: 1px solid #f3f3f3;
background-color: #22C0CE;
} .author > .text > .name { font-size: 14px; font-weight: normal; font-family: “微軟正黑體”, sans-serif; display: block; line-height: 2em; } .author > .text { margin: 0 0 0px 0; word-wrap: break-word; word-break: break-all; color: #000; } .author a{ color:#FFFFFF; text-shadow:none; } .author > .text > .social { text-align: right; display: block; } .author > .avatar { float: left; margin: 10px 12px 10px 0; overflow: hidden; } .author > .avatar > img { border-left: 1px solid #CCC; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; } .author > .text > .description { margin: 0 0 20px 0; }


單篇文章 (single.php)或外掛 Post Layout Pro
<? postauthor_init(); ?>







參考/樂在設計http://fundesigner.net/author-singlepost/

看到這裡,有沒有納悶,作者頭像呢?怎麼上傳?
很可惜這部分沒有像論壇那麼方便。所以要到gravatar全球公認頭像做上傳及修改,設定好之後你的頭像就綁定你的e-mail,往後到哪個網站需要e-mail留言的都會顯示一樣的大頭https://en.gravatar.com/