WordPress侧边栏作者信息小工具

2016-11-10 11:14 来自本站原创 119,679 35 21
[摘要]

今天为大家分享一个WordPress侧边栏显示作者信息的小工具,增加文章作者曝光度,提升网站亲和力,纯代码实现,简单实用!

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

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

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

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

WordPress侧边栏作者信息小工具

作者信息小工具代码

<?php
/*
Widget Name:本文作者 
Description:显示当前文章的作者信息
Version:1.0 
Author:雅兮网 
Author URI:https://www.yaxi.net 
*/ 
add_action('widgets_init', create_function('', 'return register_widget("Authorinfo");'));
class Authorinfo extends WP_Widget {

function Authorinfo() {
 $widget_ops = array('description' => '显示当前文章的作者信息!');
 $this->WP_Widget('Authorinfo', '本文作者', $widget_ops);
 }

function update($new_instance, $old_instance) {
 return $new_instance;
 }

function widget($args, $instance) {
 extract( $args );
 echo $before_widget;
 echo widget_authorinfo();
 echo $after_widget;
 }
}

function widget_authorinfo(){
 ?>
 <div class="author-info">
 <img class="zuozeipc" src="<?php bloginfo('template_url'); ?>/img/post-lz.png">
 <div class="author-avatar">
 <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" title="<?php the_author(); ?>" rel="author">
 <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
 </a>
 </div>
 <div class="author-name">
 <?php the_author_posts_link(); ?>
 <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" target="_blank">(<?php the_author_posts(); ?>篇文章)</a>
 <span>站长</span>
 </div>
 <div class="author-des">
 <?php the_author_description(); ?>
 </div>
 <div class="author-social">
 <span class="author-blog">
 <a href="<?php the_author_url(); ?>" rel="nofollow" target="_blank"><i class="icon-home"></i>博客</a>
 </span>
 <span class="author-weibo">
 <a href="<?php the_author_meta('weibo'); ?>" rel="nofollow" target="_blank"><i class="icon-weibo"></i>微博</a>
 </span>
 </div>
 </div>
 
 <?php
}
?>

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

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

/* 本文作者小工具 */
.author-info{
 width: 100%;
 color: #888;
 font-size: 12px;
 background: url(img/author-banner.png) #fff center top no-repeat;
 position: relative;
}
.zuozeipc {
 width: 50px;
 position: absolute;
 top: -1px;
 left: 10px;
}
.author-avatar{
 padding-top: 30px;
}
.author-avatar a{
 display: block;
 width: 80px;
 height: 80px;
 margin: 0 auto;
 background: #C9C9C9;
 border-radius: 50%;
 border: 3px solid #fff;
 -webkit-border: 3px solid #fff;
 -moz-border: 3px solid #fff;
}
.author-avatar .avatar {
 width: 74px;
 height: 74px;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
}
.author-name {
 height: 26px;
 line-height: 26px;
 margin: 10px 0;
 font-weight: bold;
 font-size: 16px;
 text-align: center;
}
.author-name span {
 font-size: 12px;
 background: #CECECE;
 color: #FFFFFF;
 padding: 2px 6px;
 margin-left: 5px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 position: relative;
}
.author-des {
 padding: 10px;
 background: #DFDBDB;
 text-indent: 2em;
}
.author-social {
 text-align: center;
 padding:20px 10px;
}
.author-social span{
 margin-right: 10px;
 border-radius: 2px;
 display: inline-block;
}
.author-social span:hover {
 background-color: #1b1b1b;
}
.author-social span a {
 padding: 4px 15px;
 font-size: 14px;
 color: #fff;
}
.author-social span a i {
 margin-right: 5px;
}
.author-social .author-blog {
 background-color: #ff5e5c;
}
.author-social .author-weibo {
 background-color: #19b5fe;
}

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

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

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

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

//增加个人简介信息
function my_new_contactmethods( $contactmethods ) {
 $contactmethods['weibo'] = '微博';
 return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

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

2016.11.11图发奇想:文中提到想实现作者身份信息,但苦于没有函数支持。既然可以自定义个人简介,则完全可以增加一项“身份”选项,可设置管理员、总编、小编等等,然后再用the_author_meta函数输出即可,这基本上可以实现身份了,缺憾是作者自己可以在后台修改身份信息,但既然是有权限发文的,基本上是自己人了,所以“僭越”身份这种事情不必担心啦...

有需要的可以自行修改一下代码,笔者就暂不修改文中代码了,自己动手丰衣足食嘛 [得意]

本文最后更新于2016年11月19日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:35   其中:访客  0   博主  0
    加载中...
    1. 5年前 (2019-06-26) 20楼

      我看了下收录了。哈哈!已经9102年了 [坏笑]

    2. 5年前 (2019-05-12) 19楼

      感谢分享,正需要

    3. 乔伊 1
      5年前 (2018-11-13) 18楼

      请问下为啥dux主题按照你的做法来设置,结果直接网页打不开,提示找不到这个小工具

    4. kiss 1
      6年前 (2018-09-13) 17楼

      你好站长!还有就是怎么加的V和评论区的等级 能分享下吗? 谢谢啦!

    5. kiss 1
      6年前 (2018-09-13) 16楼

      背景咋弄的啊

    6. Vick 1
      6年前 (2018-08-24) 15楼

      朋友好,我按照您说的捣鼓完毕,发现作者信息显示在其他小工具的最下方,有没有办法将作者信息栏显示在搜索框一下,就像您的网站。

      • Wing
        6年前 (2018-08-25)  地下1层

        @Vick: 小工具位置问题 不是代码原因,可以在后台小工具拖动调整位置的

        • Vick 1
          6年前 (2018-08-25)  地下2层

          @飞鸟: 我是吧这个小工具添加到文章页侧栏,但是好像文章页侧栏和全站侧栏的小工具不能统一排序吧,他们好像是各自独立的排序

          • Wing
            6年前 (2018-08-25)  地下3层

            @Vick: 不同的主题,情况不一;如果文章页有单独的小工具,自然和首页的不一样;另外 关于小工具顺序的,是WordPress基础知识,这位朋友如果还不是很清楚,自己好好琢磨一下基础的东西,我这里就不讨论了。

            • Vick 1
              6年前 (2018-08-25)  地下4层

              @飞鸟: 我是新手,刚接触,谢谢哈

        • Vick 1
          6年前 (2018-08-25)  地下2层

          @飞鸟: 突然发现,是不是我把其他小工具放到全站侧栏的原因,吧各个小工具逐个放到首页侧栏,分类侧栏和文章页侧栏应该就能解决了,这样解决是组好的办法吗?谢谢

    7. 7年前 (2016-11-22) 14楼

      post_author;
      if(user_can($user_id,'install_plugins')) {
      echo '管理员';
      }elseif(user_can($user_id,'edit_others_posts')) {
      echo '编辑';
      }elseif(user_can($user_id,'publish_posts')) {
      echo'作者';
      }elseif(user_can($user_id,'delete_posts')) {
      echo'投稿者';
      }elseif(user_can($user_id,'read')) {
      echo'订阅者';
      }?>

      • 7年前 (2016-11-22)  地下1层

        @Biebb技: 代码显示不全,可以邮箱我

      • Wing
        7年前 (2016-11-23)  地下1层

        @Biebb技: 你这段代码很给力,可以显示作者的权限了,收下了,表示感谢。可惜WordPress后台这个权限做的并不是特别完善。我个人目前是倾向于个人资料设置职位,然后前台调用,这样个性化强一点! [呲牙]

        • 7年前 (2016-11-30)  地下2层

          @飞鸟: 没啥,我也转载了你的文章,哈哈,不过看你没被收录我也就暂时没放出来,等你收录了我就放了

          • Wing
            7年前 (2016-12-01)  地下3层

            @Biebb[呲牙] 我这篇也不知道为啥 一直没有收录,度娘嫌弃 [咒骂]

    1 2
    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 35 21 119,679
    Top