wordpress增加作者信息小工具

原创 Laughing  2017-11-11 12:40  阅读 472 次 评论 0 条

先来一张效果图

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

增加小工具代码

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

  1. <?php  
  2.    /* 
  3.    Widget Name:木子网 
  4.    Description:木子网 
  5.    Version:1.0 
  6.    Author:木子网 
  7.    Author URI:https://www.lisen.me 
  8.    */  
  9.    add_action('widgets_init', create_function('', 'return register_widget("Authorinfo");'));  
  10.    class Authorinfo extends WP_Widget {  
  11.    function Authorinfo() {  
  12.    $widget_ops = array('description' => '显示当前文章的作者信息!');  
  13.    $this->WP_Widget('Authorinfo', '本文作者', $widget_ops);  
  14.     }  
  15.    function update($new_instance$old_instance) {  
  16.     return $new_instance;  
  17.     }  
  18.    function widget($args$instance) {  
  19.    extract( $args );  
  20.    echo $before_widget;  
  21.    echo widget_authorinfo();  
  22.    echo $after_widget;  
  23.     }  
  24.    }  
  25.    function widget_authorinfo(){  
  26.     ?>  
  27.     <div class="Author-recommend">  
  28.     <div class = "Author-recommendation">  
  29.      <div class = "wrap">   
  30.         <a class = "zzavatar" href = "https://www.lisen.me/">  
  31.          <img alt = "木子网" src = "https://www.lisen.me/wp-content/themes/Nana/img/post-lz.png" class = "avatar avatar-137 photo" width = "137" height = "137" >  
  32.         </a>  
  33.        <h4><a href="https://www.lisen.me/about-me">木子网</a></h4>  
  34.        <p class="description">木子网是个人的生活纪实博客,记录个人点滴生活,分享和交流开发技术。</p>  
  35.        <div id="aboutme_widget">   
  36.            <span class="aboutme">   
  37.                <ul>  
  38.                    <li class="fahome">  
  39.                     <a title="木子网" href="https://www.lisen.me/"  rel="nofollow">  
  40.                         <i class="fa fa-home"></i>  
  41.                     </a>  
  42.                    </li>  
  43.                    <li class = "fauser">   
  44.                     <a title = "专栏地址" href = "https://www.lisen.me/" rel = "nofollow">  
  45.                         <i class = "fa fa-user"> </i>  
  46.                     </a>   
  47.                    </li>  
  48.                    <li class="weixin">   
  49.                     <a title="微信号">  
  50.                         <i class="fa fa-weixin"></i>  
  51.                          <span> <img alt = "微信号" src = "https://www.lisen.me/wp-content/uploads/2017/06/weixinpay.png"></span>  
  52.                         </a>  
  53.                    </li>  
  54.                    <li class="tqq">  
  55.                     <a target="blank" rel="nofollow" href="https://wpa.qq.com/msgrd?V=3&amp;uin=79505393&amp;Site=QQ&amp; Menu = yes " title="QQ在线">  
  56.                         <i class="fa fa-qq "></i>  
  57.                     </a>  
  58.                    </li>  
  59.                    <li class="tsina">  
  60.                     <a title="新浪微博" href="https://weibo.com/333454448" target="_blank" rel="nofollow">  
  61.                         <i class="fa fa-weibo"></i>  
  62.                     </a>  
  63.                    </li>  
  64.                 <li class = "toutiao">  
  65.                     <a title = "头条号" href = "https://www.toutiao.com/c/user/1827107990" target = "_blank" rel = "nofollow">  
  66.                         <i class = "fa fa-tumblr"></i>  
  67.                     </a>   
  68.                 </li>  
  69.                </ul >   
  70.            </span>  
  71.        </div>  
  72.    </div>  
  73. </div>   
  74. </div>  
  75.     <?php  
  76.    }  
  77.    ?>  
  78. ?php  

修改样式

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

  1. /* 本文作者小工具开始 */  
  2. .Author-recommend {  
  3.  text-align:center  
  4. }  
  5.   
  6. #sidebar .Author-recommendation {  
  7.  width:100%;  
  8.  background-color: LightGray;  
  9. }  
  10. .Author-recommend {  
  11.  text-align:center  
  12. }  
  13. .Author-recommendation {  
  14.  width:100%;  
  15.  float:left;  
  16.  position:relative;  
  17.  min-height:1px;  
  18.  padding:0;  
  19. }  
  20. .zzavatar img {  
  21.  width:100%;  
  22.  height:100%;  
  23.  border:1px solid #ddd;  
  24.  border-radius:50%  
  25. }  
  26. .liebiaos li {  
  27.  line-height:25px;  
  28.  whitewhite-space:nowrap;  
  29.  text-overflow:ellipsis;  
  30.  overflow:hidden  
  31. }  
  32. .liebiaos li a {  
  33.  color:#333  
  34. }  
  35. .liebiaos li a:hover {  
  36.  color:#1abc9c  
  37. }  
  38. .liebiaos li {  
  39.  list-style-type:disc;  
  40.  list-style-position:inside;  
  41.  color:#1abc9c;  
  42.  whitewhite-space:nowrap;  
  43.  text-overflow:ellipsis;  
  44.  overflow:hidden;  
  45.  text-align:left;  
  46.  line-height:190%  
  47. }  
  48. .liebiaos p {  
  49.  text-align:left;  
  50.  margin:8px 0  
  51. }  
  52. .Author-recommend .wrap .description {  
  53.  margin:5px auto 5px;  
  54.  height:100%;  
  55.  font-size:13px;  
  56.  line-height:25px  
  57. }  
  58. .Author-recommend .wrap {  
  59.  height:100%;  
  60.  margin-top:60px;  
  61.  padding:0;  
  62.  border:1px solid #e6e6e6;  
  63.  border-radius:4px;  
  64.  background:#fff  
  65. }  
  66. #aboutme_widget li {  
  67.     floatleft;  
  68.     width: 16%;  
  69.     margin: 0 0.3%;  
  70.     height40px;  
  71.     line-height38px  
  72. }  
  73. #aboutme_widget a {  
  74.  color:#999;  
  75.  width:40px;  
  76.  display:block;  
  77.  text-align:center;  
  78.  margin:0 auto;  
  79.  border-radius:25px;  
  80.  border:none  
  81. }  
  82. #aboutme_widget .fauser a:hover {  
  83.  color:#fff;  
  84.  background:#b686d7;  
  85.  border:1px solid #b686d7  
  86. }  
  87. #aboutme_widget .fahome a:hover {  
  88.  color:#fff;  
  89.  background:#949fd8;  
  90.  border:1px solid #949fd8  
  91. }  
  92. .Author-recommend .wrap:hover {  
  93.  box-shadow:0 5px 20px rgba(0,0,0,.1)  
  94. }  
  95. .Author-recommend .wrap .zzavatar {  
  96.  width:80px;  
  97.  height:80px;  
  98.  margin-top:-40px;  
  99.  display:inline-block;  
  100.  background-color:#fff  
  101. }  
  102. .Author-recommend .wrap .zzavatar img {  
  103.  vertical-align:baselinebaseline  
  104. }  
  105. .Author-recommend .wrap .zzavatar {  
  106.  border-radius:40px  
  107. }  
  108. .Author-recommend .wrap h4 {  
  109.  font-size:21px;  
  110.  font-weight:700  
  111. }  
  112. @media screen and (max-width:1080px) {  
  113.  .Author-recommendation {  
  114.   width:50%  
  115.  }  
  116. }  
  117. @media screen and (max-width:720px) {  
  118.  .Author-recommendation {  
  119.   width:100%  
  120.  }  
  121. }  
  122. @media screen and (max-width:360px) {  
  123.  #aboutme_widget li {  
  124.   margin-right:0  
  125.  }  
  126. }   
  127.   
  128. .aboutme {  
  129.  position:relative;  
  130.  font-size:18px;  
  131.  display:block  
  132. }  
  133. #aboutme_widget ul {  
  134.  overflow:hidden;  
  135.  padding:8px 0  
  136. }  
  137. #aboutme_widget span {  
  138.  display:block  
  139. }  
  140. .Author-recommend .tebie .wrap .description {  
  141.  max-width:100%;  
  142.  text-align:left;  
  143.  height:100px  
  144. }  
  145. #text-121 .Author-recommend .tebie .wrap,#text-122 .Author-recommend .tebie .wrap {  
  146.  height:200px  
  147. }  
  148. #zhuantituijian .textwidget,#text-121 .textwidget,#text-122 .textwidget {  
  149.  padding:0  
  150. }  
  151. #zhuantituijian .Author-recommendation,#text-121 .Author-recommendation,#text-122 .Author-recommendation {  
  152.  padding-left:0;  
  153.  padding-right:0  
  154. }  
  155. #text-122 .Author-recommend .wrap {  
  156.  margin-top:40px;  
  157.  padding:0 15px;  
  158.  height:265px  
  159. }  
  160. #text-121 .Author-recommend .wrap {  
  161.  margin-top:58px;  
  162.  padding:0 15px  
  163. }  
  164. #zhuantituijian .textwidget img,#text-121 .textwidget img,#text-122 .textwidget img {  
  165.  padding:0  
  166. }  
  167. #text-121,#text-122 {  
  168.  border:none;  
  169.  background:#e6e6e6  
  170. }  
  171. #aboutme_widget a:hover {  
  172.  color:#fff;  
  173.  border:1px solid #fff  
  174. }  
  175. #aboutme_widget .toutiao a:hover {  
  176.  color:#fff;  
  177.  background:#d28300;  
  178.  border:1px solid #d28300  
  179. }  
  180. #aboutme_widget .weixin a:hover {  
  181.  color:#fff;  
  182.  background:#248a34;  
  183.  border:1px solid #248a34  
  184. }  
  185. #aboutme_widget .tsina a:hover {  
  186.  color:#fff;  
  187.  background:#c40000;  
  188.  border:1px solid #c40000  
  189. }  
  190. #aboutme_widget .tqq a:hover {  
  191.  color:#fff;  
  192.  background:#4e91d1;  
  193.  border:1px solid #4e91d1  
  194. }  
  195. #aboutme_widget .fauser a {  
  196.  color:#b686d7;  
  197.  border:1px solid #b686d7  
  198. }  
  199. #aboutme_widget .fahome a {  
  200.  color:#949fd8;  
  201.  border:1px solid #949fd8  
  202. }  
  203. #aboutme_widget .toutiao a {  
  204.  color:#d28300;  
  205.  border:1px solid #d28300  
  206. }  
  207. #aboutme_widget .weixin a {  
  208.  color:#248a34;  
  209.  border:1px solid #248a34  
  210. }  
  211. #aboutme_widget .tsina a {  
  212.  color:#c40000;  
  213.  border:1px solid #c40000  
  214. }  
  215. #aboutme_widget .tqq a {  
  216.  color:#4e91d1;  
  217.  border:1px solid #4e91d1  
  218. }  
  219. #aboutme_widget .weixin span {  
  220.  position:absolute;  
  221.  left:-10px;  
  222.  visibility:hidden;  
  223.  padding:5px;  
  224.  border:1px dashed gray;  
  225.  background-color:#ffffe0;  
  226.  color:#000;  
  227.  height132px;  
  228.  text-decoration:none  
  229. }  
  230. #aboutme_widget img {  
  231.  margin:0;  
  232.  padding:2px;  
  233.  height:90pt;  
  234.  max-width:90pt  
  235. }  
  236. #aboutme_widget .weixin:hover span {  
  237.  top:50px;  
  238.  left:0;  
  239.  visibility:visible  
  240. }  
  241. #text-15 .textwidget {  
  242.  padding:4px 4px 0  
  243. }     
  244. /* 本文作者小工具结束 */  

使用方法

通过上述设置之后,我们进入WordPress后台,依次进入外观→小工具,可以看到“本文作者”小工具,然后拖拽到需要显示的位置即可

本文地址:https://www.lisen.me/wordpress-add-author-information-gadget.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情