WordPress侧边栏源码实现作者信息小工具

原创 浪子丶刘少  2019-04-13 09:20  阅读 2,583 次 评论 0 条 百度已收录
给大家分享一个WordPress侧边栏显示作者信息的小工具,增加文章作者曝光度,提升网站亲和力,纯代码实现,简单实用!适合多作者的博客网站

首先贴上后台显示界面:

可以看出,后台多了一个本文作者小工具:

本文作者

本文作者

只需要把此小工具移动至正文侧边栏中即可自动显示每篇文章作者的信息。

前台效果:

前台显示一个侧边栏工具,具体效果请查看本站侧边栏最上方工具。

实现代码:

作者信息小工具代码

<?php
/*
Widget Name:本文作者
Description:显示当前文章的作者信息
Version:1.0
Author:本文由刘少技术博客整理发布
Author URI:https://www.ezliushao.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 bloginfo('template_url'); ?>/images/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' ); }?>
</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"><iclass="icon-weibo"></i>微博</a>
</span>
</div>
</div>
<?php
}
?>

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

/* 本文作者小工具 */
.author-info{
width: 100%;
color: #888;
font-size: 12px;
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;
}

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

温馨提示

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

本文地址:https://www.ezliushao.com/93.html
加入我们:请加入刘少技术博客交流群:扫描二维码刘少技术博客的QQ交流群 | 浪子丶刘少 QQ:1150110267(注:微信暂停添加好友)
版权声明:本文为原创文章,版权归 浪子丶刘少 所有,欢迎分享本文,转载请保留出处!

发表评论


表情