Single

如何为WordPress网站侧边栏添加作者信息小工具功能

当前无论是个人博客还是都会在文章页侧边栏显示文章,这样一来能够给作者更多的曝光,也让网站显得更具亲和力。且如果网站是多编辑的话,也能跟很清晰的将作者进行区分,这显然是目前自媒体流行的氛围下一种潮流。

是基于WordPress搭建的,跟大多数博主一样,笔者想增加这个功能第一件事就是去搜索一下有没有类似的小工具。这里插一句,笔者是非常青睐调用小工具的,可视化的操作使各项功能都简单快捷,也便于维护代码。

非常遗憾,笔者没有找到现成的小工具,很多的站长采用的是直接用文本小工具写静态html,这样缺点很明显,作者信息并不能跟随着文章作者的变化而改变;或者搭配支持PHP的文本小工具动态加载作者信息,但这样维护代码却令人头疼。所以最合适的就小工具了,既然找不到,那索性就自己写一个吧。

对于前端效果,在看了不少样式后,笔者决定做一个稍微时尚一点的效果,参考了很多优秀的主题,最终效果如下:

  1. <?php
  2. /*
  3. Widget Name:本文作者
  4. Description:显示当前文章的作者信息
  5. Version:1.0
  6. Author:雅兮网
  7. Author URI:http://www.iyaxi.com
  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-info”></div 
  28. <img class=“zuozeipc” src=“/img/post-lz.png”></img 
  29.  <div class=“author-avatar”></div 
  30.  <a href=“”><?php if (function_exists(‘get_avatar’)) { echo get_avatar( get_the_author_email(), ’80’ ); }?></a href=
  31.  
  •  <div class=“author-name”></div 
  •  
  • <a href=“” target=“_blank”>(篇文章)</a href=
  •  站长
  •  
  •  <div class=“author-des”></div 
  •  
  •  
  •  <div class=“author-social”></div 
  •  <span class=“author-blog”></span 
  • <a href=“” rel=“nofollow” target=“_blank”><i class=“icon-home”>博客</i </a href=
  •  
  •  <span class=“author-weibo”></span 
  • <a href=“” rel=“nofollow” target=“_blank”><i class=“icon-weibo”>微博</i </a href=
  •  
  •  
  •  
  •  <?php
  • }
  • ?>
  • PS:也可以直接下载笔者做好的文件 

    1. /* 本文作者小工具 */
    2. .author-info{
    3. width: 100%;
    4. color#888;
    5. font-size12px;
    6. backgroundurl(img/author-banner.png) #fff center top no-repeat;
    7. positionrelative;
    8. }
    9. .zuozeipc {
    10. width50px;
    11. positionabsolute;
    12. top: –1px;
    13. left10px;
    14. }
    15. .author-avatar{
    16. padding-top30px;
    17. }
    18. .author-avatar a{
    19. displayblock;
    20. width80px;
    21. height80px;
    22. margin: 0 auto;
    23. background#C9C9C9;
    24. border-radius: 50%;
    25. border3px solid #fff;
    26.  -webkit-border3px solid #fff;
    27.  -moz-border3px solid #fff;
    28. }
    29. .author-avatar .avatar {
    30. width74px;
    31. height74px;
    32. border-radius: 50%;
    33.  -webkit-border-radius: 50%;
    34.  -moz-border-radius: 50%;
    35. }
    36. .author-name {
    37. height26px;
    38. line-height26px;
    39. margin10px 0;
    40. font-weightbold;
    41. font-size16px;
    42. text-aligncenter;
    43. }
    44. .author-name span {
    45. font-size12px;
    46. background#CECECE;
    47. color#FFFFFF;
    48. padding2px 6px;
    49. margin-left5px;
    50.  -webkit-border-radius: 4px;
    51.  -moz-border-radius: 4px;
    52. border-radius: 4px;
    53. positionrelative;
    54. }
    55. .author-des {
    56. padding10px;
    57. background#DFDBDB;
    58. text-indent: 2em;
    59. }
    60. .author-social {
    61. text-aligncenter;
    62. padding:20px 10px;
    63. }
    64. .author-social span{
    65. margin-right10px;
    66. border-radius: 2px;
    67. displayinlineblock;
    68. }
    69. .author-social span:hover {
    70. background-color#1b1b1b;
    71. }
    72. .author-social span a {
    73. padding4px 15px;
    74. font-size14px;
    75. color#fff;
    76. }
    77. .author-social span a i {
    78. margin-right5px;
    79. }
    80. .author-social .author-blog {
    81. background-color#ff5e5c;
    82. }
    83. .author-social .author-weibo {
    84. background-color#19b5fe;
    85. }

    将上述代码放入你的小工具文件中,因为每个主题调用小工具的形式不尽相同,笔者也无法详细的解释,总之就是将上述小工具部署在你的主题中,然后在后台调用小工具,前台刷新即可看到效果了。

    本小工具亮点

    使用简单,直接部署就可使用;样式时尚大气,也可根据自己喜好修改样式表;动态加载,实时调取文章作者信息,特别适用于多作者网站;代码集成,比使用文本框输出有显著优势,便于维护和升级改版。

    注意:作者信息后面“站长”二字可以在小工具中自行修改,因为理想情况下笔者是将其展示为当前文章作者的身份信息,如管理员、编辑等等,但遗憾的是笔者目前暂未发现实现办法,就暂且设为固定文字吧。

    下半部分两个按钮是调取后台用户个人资料填写的站点和微博,有人会问,为何我的后台资料处没有微博这个选项呢?这个是可以自定义个人信息选项的,只需要在function.php添加如下代码即可,同理可以添加诸如电话、地址等信息;所以本小工具需要自定义一下微博。

    1. //增加个人简介信息
    2. function my_new_contactmethods( $contactmethods ) {
    3. $contactmethods[‘weibo’] = ‘微博’;
    4.  return $contactmethods;
    5. }
    6. add_filter(‘user_contactmethods’,’my_new_contactmethods’,10,1);

    特别提醒:由于各个主题不尽相同,笔者不能保证完美展现.有疑问欢迎留言一起交流。