您好!欢迎来到模板下载吧!本站资源24小时自动发货,请放心选购,一次付费,终身下载,售后请提交工单!

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

半岛未凉°【美工】❾ 2017-05-07 WP技术 2029 已收录 本文共4263个字,预计阅读需要11分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

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

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

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

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

作者信息小工具代码

  1. <?php
  2. /* Widget Name:本文作者 
  3. Description:显示当前文章的作者信息 
  4. Version:1.0 
  5. Author:模板下载吧
  6. Author URI:https://www.mbxzb.cn
  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);  

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

温馨提示:本文最后更新于2019年3月19日,已超过 2 年没有更新,如果文章内容或图片资源失效,请留言反馈,模板下载吧会及时处理,谢谢!

上一篇:

下一篇:

为WordPress网站侧边栏添加作者信息 小工具功能:等您坐沙发呢!
大牛,别默默的看了,快来点评一下吧!:)。

您必须登录后才能发表评论哦!:)

站内登录 QQ登录 微博登录
wordpress自适应高级图片shejigh主题

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

模板下载吧,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源,帮您更快的完成网站建设。

  • 每日更新模板资源,每日精品推荐,及时获取最新模板资源流行去向。

  • 完美的售后服务,帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏,建立自己的资源库,并与朋友分享。