Wordpress非插件实现本文的作者栏目效果

演示

1

是不是感觉很不错呀?不要慌,不要忙,等我慢慢道来,只需要几句代码即可实现本效果!

完整代码

functions.php

//添加文章版权信息
function copyright($content) {
    if(is_single()||is_feed()) {
        $content.='<div class="post_info">
            <hr></hr><div class="entry-author"><img alt="微Fan的头像" src="http://www.weeiy.com/avatar/weeiy.jpg" class="avatar avatar-90 photo" height="90" width="90">
<div class="entry-author-desc">
<div class="entry-author-name"><a href="'.home_url().'">'.get_the_author().'</a> </div> 
<span class="entry-author-about"></span>
<div class="entry-author-description">转载请以链接形式注明本文地址:<a href="'.get_permalink().'" title="'.get_the_title

().'">'.get_permalink().'</a><br/>
                版权所有&copy; <a href="'.home_url().'">'.get_bloginfo('name').'</a> | 本文采用 <a title="署名-非
商业性使用-相同方式共享" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" target="_blank">BY-NC-SA</a> 
进行授权丨发布于<time>'.get_the_time('Y-m-d G:i:s').'</time>。</div>
<div class="entry-author-links">
TA的联系方式:<a target="_blank" href="http://admin@weeiy.com"title="给 微Fan 发邮件">微Fan的邮箱</a>丨<a target="_blank" href="https://plus.google.com/u/0/112943435924413365586?rel=author" rel="author" title="关注 微Fan 的 Google+">微Fan Google+</a>丨<a target="_blank" href="http://weibo.com/1661119430/" title="关注 微Fan 的新浪微博">新浪微博</a>丨<a target="_blank" href="http://t.qq.com/only_for_wy" title="关注 微Fan 的腾讯微博">腾讯微博</a>
</div>
<div class="clear" style="clear:both"></div>
<div class="entry-author-title">关于本文的作者</div>
</div>
</div>
</div>';
                }
    return $content;
}
add_filter ('the_tags', 'copyright');

 

Style.CSS

/*关于作者*/
/*本代码来自:微Fan'天空 http://blog.weeiy.com*/
.entry-author{border:1px solid #ddd;padding:15px;margin:10px 0;background:#F9F9F9;font-size:12px;overflow:hidden;position:relative;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;_zoom:1;+zoom:1;}
.entry-author a{color:#0086E3}
.entry-author a:hover{text-decoration:underline}
.entry-author-title{color:#fff;position:absolute;right:30px;top:0px;background:#0086E3;height:25px;line-height:25px;padding:0 15px;border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;}
.entry-author .avatar{float:left;margin-right:25px;width:80px;height:80px;}
.entry-author-about{color:#999}
.entry-author-desc{float:left;width:660px}
.entry-author-name{font-weight:bold;font-size:16px}
.entry-author-description{margin:8px 0 4px 0}
.entry-author-links{color:blueViolet;}

更多功能请自行开发,不要忘记分享给大家哦!

发表评论
加载中...
  • 阿e 3年前 (2015-03-07)

    博主,你现在用的关于作者是怎么做的 :oops:

    查看对话
    • 微饭君 微Fan 3年前 (2015-03-08) 官方

      DIV+CSS框架喔~

  • 小米 3年前 (2015-02-09)

    没有现在你用的样式好看额

相关文章