纯代码添加WordPress网站侧边栏文章作者信息小工具

来源:赚贝金融

阅读量:590

发布时间:2019-02-21 14:41:53

1点我秒拿钱

2撩我放心贷

3此处有惊喜

当前无论是个人博客还是自媒体平台都会在文章页侧边栏显示文章作者信息,这样一来能够给作者更多的曝光,也让网站显得更具亲和力。且如果网站是多编辑的话,也能跟很清晰的将作者进行区分,这显然是目前自媒体流行的氛围下一种潮流。 赵斌自媒体博客是基于WordPress搭建的,跟大多数博主一样,笔者想增加这个功能第一件事就是去搜索一下有没有类似的小工具。这里插一句,笔者是非常青睐调用小工具的,可视化的操作使各项功能都简单快捷,也便于维护代码。 非常遗憾,笔者没有找到现成的小工具,很多的站长采用的是直接用文本小工具写静态html,这样缺点很明显,作者信息并不能跟随着文章作者的变化而改变;或者搭配支持PHP的文本小工具动态加载作者信息,但这样维护代码却令人头疼。所以最合适的就小工具了,既然找不到,那索性就自己写一个吧。 对于前端效果,在看了不少样式后,笔者决定做一个稍微时尚一点的效果,参考了很多优秀的主题,最终效果如下:

作者信息小工具代码

<?php
/*
Widget Name:本文作者 
Description:显示当前文章的作者信息
Version:1.0  
Author:赵斌自媒体博客  
Author URI:http://www.zbzmtbk.com 
*/  
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%20bloginfo('template_url');%20?>/images/post-lz.png">
<div class="author-avatar">
<a href=""><?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%20echo%20get_author_posts_url(%20get_the_author_meta(%20'ID'%20)%20)%20?>" target="_blank">
(<?php the_author_posts(); ?>篇文章)
</a>
  <span>
 /* 判断作者的身份信息*/  
<?php $user_id=get_post($id)->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'订阅者';
}
?>
</span>
</div>
<div class="author-des">
<?php the_author_description(); ?>
</div>
<div class="author-social">
<span class="author-blog">
<a href="<?php%20the_author_url();%20?>"  rel="nofollow" target="_blank"><i class="icon-home"></i>博客</a>
</span>
<span class="author-weibo">
<a href="<?php%20the_author_meta('weibo');%20?>"  rel="nofollow" target="_blank"><i class="icon-weibo"></i>微博</a>
</span>
</div>
</div>
  <?php
}
?>
PS:也可以直接下载笔者做好的文件 widget-authorinfo.php css代码(放入主题样式表中,一般都是主题文件下的style.css文件)
/* 本文作者小工具 */
.author-info{
width: 100%;
color: #888;
font-size: 12px;
/* 这里改成自己的背景图片路径 */
background: url(/images/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: #F00;
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;
}

使用方法:

将上述php代码放入你的小工具文件中(一般在主题文件夹下widgets文件夹下),因为每个主题调用小工具的形式不尽相同,笔者也无法详细的解释! 然后将上述小工具部署在你的主题中,只需要在function.php添加如下代码即可:
//调用作者信息小工具
require_once get_stylesheet_directory() . '/widgets/widget-authorinfo.php';
然后在后台就可以看到‘本文作者’小工具了: 然后在后台调用小工具,前台刷新即可看到效果了。
本小工具亮点 使用简单,直接部署就可使用;样式时尚大气,也可根据自己喜好修改样式表;动态加载,实时调取文章作者信息,特别适用于多作者网站;代码集成,比使用文本框输出有显著优势,便于维护和升级改版。
下半部分两个按钮是调取后台用户个人资料填写的站点和微博,有人会问,为何我的后台资料处没有微博这个选项呢?这个是可以自定义个人信息选项的,只需要在function.php添加如下代码即可,同理可以添加诸如电话、地址等信息;所以本小工具需要自定义一下微博。
//增加个人简介信息
function my_new_contactmethods( $contactmethods ) {
$contactmethods['weibo'] = '微博';
 return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);
特别提醒:由于各个主题不尽相同,笔者不能保证完美展现.有疑问欢迎留言一起交流。 本小工具用到的图片文件(自行下载调用):

扫码关注喜乐贷,天天都是发薪日,微信扫一扫直接申请

为你推荐

大王贷款

利息低至5毛钱

信贷系统

找贷款平台

广告