wordpress增加作者信息小工具

本文介绍的方法是通过在添加小工具代码的方式增加的，所以添加之后，大家可以随意调节显示的位置。

增加小工具代码

首先打开自己主题对应的小工具代码文件，一般位于主题下面的inc/functions/widgets.php文件，在文件顶部或者其他位置增加如下代码：

<?php  
   /* 
   Widget Name:木子网 
   Description:木子网 
   Version:1.0 
   Author:木子网 
   Author URI:https://www.xiangcaowuyu.net 
   */  
   add_action('widgets_init', create_function('', 'return register_widget("Authorinfo");'));  
   class Authorinfo extends WP_Widget {  
   function Authorinfo() {  
   $widget_ops = array('description' => '显示当前文章的作者信息！');  
   $this->WP_Widget('Authorinfo', '本文作者', $widget_ops);  
    }  
   function update($new_instance, $old_instance) {  
    return $new_instance;  
    }  
   function widget($args, $instance) {  
   extract( $args );  
   echo $before_widget;  
   echo widget_authorinfo();  
   echo $after_widget;  
    }  
   }  
   function widget_authorinfo(){  
    ?>  
    <div class="Author-recommend">  
    <div class = "Author-recommendation">  
     <div class = "wrap">   
        <a class = "zzavatar" href = "https://www.xiangcaowuyu.net/">  
         <img alt = "木子网" src = "https://www.xiangcaowuyu.net/wp-content/themes/Nana/img/post-lz.png" class = "avatar avatar-137 photo" width = "137" height = "137" >  
        </a>  
       <h4><a href="https://www.xiangcaowuyu.net/about-me">木子网</a></h4>  
       <p class="description">木子网是个人的生活纪实博客，记录个人点滴生活，分享和交流开发技术。</p>  
       <div id="aboutme_widget">   
           <span class="aboutme">   
               <ul>  
                   <li class="fahome">  
                    <a title="木子网" href="https://www.xiangcaowuyu.net/"  rel="nofollow">  
                        <i class="fa fa-home"></i>  
                    </a>  
                   </li>  
                   <li class = "fauser">   
                    <a title = "专栏地址" href = "https://www.xiangcaowuyu.net/" rel = "nofollow">  
                        <i class = "fa fa-user"> </i>  
                    </a>   
                   </li>  
                   <li class="weixin">   
                    <a title="微信号">  
                        <i class="fa fa-weixin"></i>  
                         <span> <img alt = "微信号" src = "https://xiangcaowuyu.xiangcaowuyu.net/blog/typecho/2017/06/weixinpay.png"></span>  
                        </a>  
                   </li>  
                   <li class="tqq">  
                    <a target="blank" rel="nofollow" href="https://wpa.qq.com/msgrd?V=3&amp;uin=79505393&amp;Site=QQ&amp; Menu = yes " title="QQ在线">  
                        <i class="fa fa-qq "></i>  
                    </a>  
                   </li>  
                   <li class="tsina">  
                    <a title="新浪微博" href="https://weibo.com/333454448" target="_blank" rel="nofollow">  
                        <i class="fa fa-weibo"></i>  
                    </a>  
                   </li>  
                <li class = "toutiao">  
                    <a title = "头条号" href = "https://www.toutiao.com/c/user/1827107990" target = "_blank" rel = "nofollow">  
                        <i class = "fa fa-tumblr"></i>  
                    </a>   
                </li>  
               </ul >   
           </span>  
       </div>  
   </div>  
</div>   
</div>  
    <?php  
   }  
   ?>

修改样式

打开主题样式文件style.css，增加如下样式

/* 本文作者小工具开始 */  
.Author-recommend {  
 text-align:center  
}  
  
#sidebar .Author-recommendation {  
 width:100%;  
 background-color: LightGray;  
}  
.Author-recommend {  
 text-align:center  
}  
.Author-recommendation {  
 width:100%;  
 float:left;  
 position:relative;  
 min-height:1px;  
 padding:0;  
}  
.zzavatar img {  
 width:100%;  
 height:100%;  
 border:1px solid #ddd;  
 border-radius:50%  
}  
.liebiaos li {  
 line-height:25px;  
 whitewhite-space:nowrap;  
 text-overflow:ellipsis;  
 overflow:hidden  
}  
.liebiaos li a {  
 color:#333  
}  
.liebiaos li a:hover {  
 color:#1abc9c  
}  
.liebiaos li {  
 list-style-type:disc;  
 list-style-position:inside;  
 color:#1abc9c;  
 whitewhite-space:nowrap;  
 text-overflow:ellipsis;  
 overflow:hidden;  
 text-align:left;  
 line-height:190%  
}  
.liebiaos p {  
 text-align:left;  
 margin:8px 0  
}  
.Author-recommend .wrap .description {  
 margin:5px auto 5px;  
 height:100%;  
 font-size:13px;  
 line-height:25px  
}  
.Author-recommend .wrap {  
 height:100%;  
 margin-top:60px;  
 padding:0;  
 border:1px solid #e6e6e6;  
 border-radius:4px;  
 background:#fff  
}  
#aboutme_widget li {  
    float: left;  
    width: 16%;  
    margin: 0 0.3%;  
    height: 40px;  
    line-height: 38px  
}  
#aboutme_widget a {  
 color:#999;  
 width:40px;  
 display:block;  
 text-align:center;  
 margin:0 auto;  
 border-radius:25px;  
 border:none  
}  
#aboutme_widget .fauser a:hover {  
 color:#fff;  
 background:#b686d7;  
 border:1px solid #b686d7  
}  
#aboutme_widget .fahome a:hover {  
 color:#fff;  
 background:#949fd8;  
 border:1px solid #949fd8  
}  
.Author-recommend .wrap:hover {  
 box-shadow:0 5px 20px rgba(0,0,0,.1)  
}  
.Author-recommend .wrap .zzavatar {  
 width:80px;  
 height:80px;  
 margin-top:-40px;  
 display:inline-block;  
 background-color:#fff  
}  
.Author-recommend .wrap .zzavatar img {  
 vertical-align:baselinebaseline  
}  
.Author-recommend .wrap .zzavatar {  
 border-radius:40px  
}  
.Author-recommend .wrap h4 {  
 font-size:21px;  
 font-weight:700  
}  
@media screen and (max-width:1080px) {  
 .Author-recommendation {  
  width:50%  
 }  
}  
@media screen and (max-width:720px) {  
 .Author-recommendation {  
  width:100%  
 }  
}  
@media screen and (max-width:360px) {  
 #aboutme_widget li {  
  margin-right:0  
 }  
}   
  
.aboutme {  
 position:relative;  
 font-size:18px;  
 display:block  
}  
#aboutme_widget ul {  
 overflow:hidden;  
 padding:8px 0  
}  
#aboutme_widget span {  
 display:block  
}  
.Author-recommend .tebie .wrap .description {  
 max-width:100%;  
 text-align:left;  
 height:100px  
}  
#text-121 .Author-recommend .tebie .wrap,#text-122 .Author-recommend .tebie .wrap {  
 height:200px  
}  
#zhuantituijian .textwidget,#text-121 .textwidget,#text-122 .textwidget {  
 padding:0  
}  
#zhuantituijian .Author-recommendation,#text-121 .Author-recommendation,#text-122 .Author-recommendation {  
 padding-left:0;  
 padding-right:0  
}  
#text-122 .Author-recommend .wrap {  
 margin-top:40px;  
 padding:0 15px;  
 height:265px  
}  
#text-121 .Author-recommend .wrap {  
 margin-top:58px;  
 padding:0 15px  
}  
#zhuantituijian .textwidget img,#text-121 .textwidget img,#text-122 .textwidget img {  
 padding:0  
}  
#text-121,#text-122 {  
 border:none;  
 background:#e6e6e6  
}  
#aboutme_widget a:hover {  
 color:#fff;  
 border:1px solid #fff  
}  
#aboutme_widget .toutiao a:hover {  
 color:#fff;  
 background:#d28300;  
 border:1px solid #d28300  
}  
#aboutme_widget .weixin a:hover {  
 color:#fff;  
 background:#248a34;  
 border:1px solid #248a34  
}  
#aboutme_widget .tsina a:hover {  
 color:#fff;  
 background:#c40000;  
 border:1px solid #c40000  
}  
#aboutme_widget .tqq a:hover {  
 color:#fff;  
 background:#4e91d1;  
 border:1px solid #4e91d1  
}  
#aboutme_widget .fauser a {  
 color:#b686d7;  
 border:1px solid #b686d7  
}  
#aboutme_widget .fahome a {  
 color:#949fd8;  
 border:1px solid #949fd8  
}  
#aboutme_widget .toutiao a {  
 color:#d28300;  
 border:1px solid #d28300  
}  
#aboutme_widget .weixin a {  
 color:#248a34;  
 border:1px solid #248a34  
}  
#aboutme_widget .tsina a {  
 color:#c40000;  
 border:1px solid #c40000  
}  
#aboutme_widget .tqq a {  
 color:#4e91d1;  
 border:1px solid #4e91d1  
}  
#aboutme_widget .weixin span {  
 position:absolute;  
 left:-10px;  
 visibility:hidden;  
 padding:5px;  
 border:1px dashed gray;  
 background-color:#ffffe0;  
 color:#000;  
 height: 132px;  
 text-decoration:none  
}  
#aboutme_widget img {  
 margin:0;  
 padding:2px;  
 height:90pt;  
 max-width:90pt  
}  
#aboutme_widget .weixin:hover span {  
 top:50px;  
 left:0;  
 visibility:visible  
}  
#text-15 .textwidget {  
 padding:4px 4px 0  
}     
/* 本文作者小工具结束 */