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

投稿  雅兮网 2016-11-11 阅读 182 次 评论 23 条

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

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

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

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

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

作者信息小工具代码

  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">
  28. <img class="zuozeipc" src="<?php bloginfo('template_url'); ?>/img/post-lz.png">
  29.  <div class="author-avatar">
  30.  <a href=""><?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?></a>
  31.  </div>
  32.  <div class="author-name">
  33.  <?php the_author_posts_link(); ?>
  34. <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" target="_blank">(<?php the_author_posts(); ?>篇文章)</a>
  35.  <span>站长</span>
  36.  </div>
  37.  <div class="author-des">
  38.  <?php the_author_description(); ?>
  39.  </div>
  40.  <div class="author-social">
  41.  <span class="author-blog">
  42. <a href="<?php the_author_url(); ?>" rel="nofollow" target="_blank"><i class="icon-home"></i>博客</a>
  43.  </span>
  44.  <span class="author-weibo">
  45. <a href="<?php the_author_meta('weibo'); ?>" rel="nofollow" target="_blank"><i class="icon-weibo"></i>微博</a>
  46.  </span>
  47.  </div>
  48.  </div>
  49.  <?php
  50. }
  51. ?>

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);

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

本文地址:http://boke112.com/3641.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana
CPA教学与引流技巧

发表评论

呲牙憨笑坏笑偷笑色微笑抓狂睡觉酷流汗鼓掌大哭可怜疑问晕惊讶得意尴尬发怒奋斗衰骷髅啤酒吃饭礼物强弱握手OKNO勾引拳头差劲爱你

表情

  1. 靠谱学生兼职网
    靠谱学生兼职网 【镇长】 @回复

    不错的小技巧。。

  2. BanYuner
    BanYuner 【村长】 @回复

    多作者的情况下可以使用这个 但是我的站点一个人打理 还是算了吧

    • boke112导航
      boke112导航【站长】 @回复

      @BanYuner 一个人的话,其实也是可以增加站长信息的,不过关键还是看个人是否需要吧

  3. 闲鱼
    闲鱼 【村长】 @回复

    蛮不错的,最近都流行这个啊

  4. 森纯博客
    森纯博客 【村长】 @回复

    真的不错

  5. 金榜台博客
    金榜台博客 【县长】 @回复

    很是实用的东西

  6. 爱时尚
    爱时尚 【市长】 @回复

    头像有图片了吗

  7. 韩娱部落
    韩娱部落 【村长】 @回复

    加了这个确实挺好

  8. benen005
    benen005 【镇长】 @回复

    确实不错的东西

  9. 泛宝汇博客
    泛宝汇博客 【市长】 @回复

    很好的代码呀,谢谢分享

  10. 明月登楼的博客
    明月登楼的博客 【总理】 @回复

    不错,很棒的代码分享!学习了!

  11. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    很有技术含量,既详细又实用的一个功能!

  12. 爱时尚
    爱时尚 【市长】 @回复

    能不能搞个zblog

  13. 雅兮网
    雅兮网 【省长】 @回复

    2016.11.11图发奇想:文中提到想实现作者身份信息,但苦于没有函数支持。既然可以自定义个人简介,则完全可以增加一项“身份”选项,可设置管理员、总编、小编等等,然后再用the_author_meta函数输出即可,这基本上可以实现身份了,缺憾是作者自己可以在后台修改身份信息,但既然是有权限发文的,基本上是自己人了,所以“僭越”身份这种事情不必担心啦…
    博主完全可以给转载号、投稿号设置身份信息,甚至可以实现你的“投稿作者等级”天级、地级,同样实现勋章功能也只不过是修改一下代码而已啦,感觉一个强大的自媒体功能正在形成 [偷笑]

    • 橘子书
      橘子书 【县长】 @回复

      @雅兮网 这个倒不是什么大问题,一般如果主题(多用户)没有前端用户中心的话,大多会写非管理员不能登录后台,所以篡改几乎不会。

    • boke112导航
      boke112导航【站长】 @回复

      @雅兮网 是的,完全可以实现为投稿作者搞一个经验值和积分出来进行评比,有空再折腾试试

  14. 管家婆
    管家婆 【镇长】 @回复

    不错不错 学习下

  15. 刘国栋个人博客
    刘国栋个人博客 【村长】 @回复

    很漂亮的工具栏~~

  16. 小萝博客
    小萝博客 【市长】 @回复

    这个挺实用的

  17. Koolight
    Koolight 【省长】 @回复

    学习了,一款强大的主题应该集成这个功能!