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

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

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

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

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

作者信息小工具代码

  1. <?php
  2. /* Widget Name:本文作者 
  3. Description:显示当前文章的作者信息 
  4. Version:1.0 
  5. Author:模板下载吧
  6. Author URI:https://www.mbxzb.com
  7. */
  8.     add_action('widgets_init', create_function('', 'return register_widget("Authorinfo");'));
  9.     class Authorinfo extends WP_Widget {
  10.     function Authorinfo() {
  11.     $widget_ops = array('description' => '显示当前文章的作者信息!');
  12.     $this->WP_Widget('Authorinfo', '本文作者', $widget_ops);
  13.      }
  14.     function update($new_instance$old_instance) {
  15.      return $new_instance;
  16.      }
  17.     function widget($args$instance) {
  18.     extract( $args );
  19.     echo $before_widget;
  20.     echo widget_authorinfo();
  21.     echo $after_widget;
  22.      }
  23.     }
  24.     function widget_authorinfo(){
  25.      ?>
  26.      <div class="author-info">
  27.     <img class="zuozeipc" src="<?php bloginfo('template_url'); ?>/img/post-lz.png">
  28.      <div class="author-avatar">
  29.      <a href=""><?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?></a>
  30.      </div>
  31.      <div class="author-name">
  32.      <?php the_author_posts_link(); ?>
  33.     <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" target="_blank">(<?php the_author_posts(); ?>篇文章)</a>
  34.      <span>站长</span>
  35.      </div>
  36.      <div class="author-des">
  37.      <?php the_author_description(); ?>
  38.      </div>
  39.      <div class="author-social">
  40.      <span class="author-blog">
  41.     <a href="<?php the_author_url(); ?>" rel="nofollow" target="_blank"><i class="icon-home"></i>博客</a>
  42.      </span>
  43.      <span class="author-weibo">
  44.     <a href="<?php the_author_meta('weibo'); ?>" rel="nofollow" target="_blank"><i class="icon-weibo"></i>微博</a>
  45.      </span>
  46.      </div>
  47.      </div>
  48.      <?php
  49.     }
  50.     ?>

PS:也可以直接下载笔者做好的文件 widget-authorinfo.php

css代码(放入主题样式表中)

  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.   displayinline-block;
  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);  

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

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 Wordpress教程 为WordPress网站侧边栏添加作者信息 小工具功能 https://www.mbxzb.com/blog/wordpress/4253.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务