网站侧边栏-作者信息小工具

12 0 2020年3月24日

网站侧边栏与访客接触的机会较多，

用于展示站长的个人信息比较方便。

笔者综合一些代码实现了满意的效果，

这里分享给大家，大家各取所需。

先看简单效果预览：

只需两大步操作即可实现。

一、function.php加入代码

1、增加自定义站长信息

//增加个人简介信息
function my_new_contactmethods( $contactmethods ) {
$contactmethods['zhihu'] = '知乎';
$contactmethods['weibo'] = '微博';
$contactmethods['bianji'] = '编辑身份';
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

说明：此代码在后台添加自定义参数

v2-f4dd5d984f7808adda0dce7402334ba7_720w

2、添加数据获取函数

//获取作者所有文章浏览量
if(!function_exists('author_posts_views')) {
    function author_posts_views($author_id = 1 ,$display = true) {
        global $wpdb;
        $apvn = "SELECT SUM(meta_value+0) FROM $wpdb->posts left join $wpdb->postmeta on ($wpdb->posts.ID = $wpdb->postmeta.post_id) WHERE meta_key = 'views' AND post_author = $author_id ";
        $author_posts_views = intval($wpdb->get_var($apvn));
        if($display) {
            echo number_format_i18n($author_posts_views);
        } else {
            return $author_posts_views;
        }
    }
}
//获取作者参与评论的评论数
if(!function_exists('author_posts_comments')) {
    function author_posts_comments( $author_id = 1 ,$author_email='' ,$display = true) {
        global $wpdb;
        $apcn = "SELECT count(comment_author) FROM $wpdb->comments WHERE comment_approved='1' AND comment_type='' AND (user_id = '$author_id'  OR comment_author_email='$author_email' )";
        $author_posts_comments = intval($wpdb->get_var($apcn));
        if($display) {
            echo number_format_i18n($author_posts_comments);
        } else {
            return $author_posts_comments;
        }
    }
}

3、注册侧边栏作者信息工具

//作者信息侧边栏
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;
    }
}
v2-559d65e872d8677e9c8ff3ff9afc8c68_720w

4、侧边栏作者信息功能函数


function widget_authorinfo(){
    if (!wp_is_mobile()){
    ?>
    <div class="author-info">               
        <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' ); }?>  <i title="网站作者认证 " class="author-ident"> <img class="zuozeipc" src="https://www.jishusongshu.com/wp-content/uploads/2020/03/v.png"></i>
          </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">
            <a href="https://www.jishusongshu.com/about/about-jishusongshu-blog/" target="_blank" rel="noopener noreferrer">
            <span><font color="#ffffff"><?php the_author_meta('bianji'); ?></font></span></a>
        </div>
        <div class="author-des">
            <?php the_author_description(); ?>
        </div>

        <div class="author-social">
            <span class="author-weixin"> 
                <a title="微信"><i class="fa fa-weixin"></i>公众号<em style="background-image: url(http://test/wp-content/uploads/2020/03/jishusongshu.jpg);"></em></a>
            </span> 
            <span class="author-zhihu">
                <a href="<?php the_author_meta('zhihu'); ?>"  rel="nofollow" target="_blank"><i class="fa fa-comment-o" aria-hidden="true"></i>知乎</a>
            </span>
            <span class="author-weibo">
                <a href="<?php the_author_meta('weibo'); ?>"  rel="nofollow" target="_blank"><i class="fa fa-weibo" aria-hidden="true"></i>微博</a>
            </span>
        </div>   
        <section class="author_count">
        <ul>
            <li><span>文章数</span><strong><?php the_author_posts(); ?></strong></li>
            <li><span>浏览量</span><strong><?php author_posts_views( get_the_author_meta('ID') ); ?><?php echo get_the_author_meta('ID '); ?></strong></li>
            <li><span>评论数</span><strong><?php author_posts_comments( get_the_author_meta('ID') ,get_the_author_meta('user_email')); ?></strong></li>
        </ul>
        </section>        
    </div>    
    <?php 
        }
    }

注意里面有些参数需要修改

认证标志，哈哈！

若icon如果无法显示，可以参考

网站菜单：添加个性化图标

二、添加CSS样式

在样式表 style.css 文件内添加代码。此方法若无效果，则到WordPress后台，依次选择【外观】-【自定义】-【额外CSS】

1、头像旋转代码

.avatar{
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.5s;
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.5s ease-out;/*图像旋转变化时间设置为0.5秒*/
-moz-transition: -moz-transform 0.5s ease-out;
}
.avatar:hover{/*鼠标悬浮在头像时的CSS样式*/
transform: rotateZ(360deg);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg); 
}

2、作者信息显示主要样式

/* 本文作者小工具*/
.author-info{
width: 100%;
color: #888;
font-size: 12px;
background: url(https://头像背景图地址) #fff center top no-repeat;
position: relative;
background-size: 100%;
}
.author-avatar{
padding-top: 45px;
}
.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-ident {
    display: inline-block;
    background-repeat: no-repeat;
    width:20px;
    height:0px;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    vertical-align: -2px;
    background-position: -50px -25px;
    position: absolute;
    bottom: 152px;
    right: 142px;
}
.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: #2AA145;
color: #FFFFFF;
padding: 2px 6px;
margin-left: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position: relative;
}
.author-name span:hover {
background-color: #0084FF;
}
.author-des {
padding: 10px;
background: #DFDBDB;
text-indent: 2em;
}
.author-social {
text-align: center;
padding:20px 10px;
}
.author-social span{
padding:3px 15px;
margin-right: 10px;
border-radius: 2px;
display: inline-block;
}
.author-social span:hover {
background-color: #2AA145;
}
.author-social span a {
font-size: 14px;
color: #fff;
}
.author-social span a i {
margin-right: 5px;
}
.author-social .author-weixin {
background-color: #2AA145;
}
.author-social .author-zhihu {
background-color: #0084FF;
}
.author-social .author-weibo {
background-color: #E6162D;
}

说明：样式可能需要修改

加V认证图片的位置可能需要调整

.author-ident {.author-ident {
...
bottom: 152px;
right: 142px;
}

下方的是鼠标悬于社交按钮改变颜色

.author-social span:hover {
background-color: #2AA145;
}

3、鼠标悬浮显示QR Code样式

span.author-weixin a em {position:absolute;z-index:99;bottom:108px;left:0;margin-left:26px;width:100px;height:100px;background-color:#fff;-webkit-background-size:95% auto;background-size:95% auto;background-position:center center;background-repeat:no-repeat;border:1px solid #DDDDDD;display:none;-webkit-transition:all .2s ease-out .1s;-o-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s;}
span.author-weixin a em:after {position:absolute;bottom:-16px;left:50%;width:0;height:0;margin-left:-8px;line-height:0;border:8px solid transparent;border-top:8px solid #dddddd;content:'';}
span.author-weixin a:hover em {display:block;-webkit-transition:all .2s ease-out .1s;-o-transition:all .2s ease-out .1s;transition:all .2s ease-out .1s;}

4、数据列表样式

.author_count {background-color:#fff;border-top:1px #efefef solid;}
.author_count ul {display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;text-align:center;}
.author_count ul li {float:left;list-style:none;width:33.333%;border-right:1px #efefef solid;padding:8px 0;font-weight:300;}
.author_count ul li:last-child {border-right:1px solid transparent;}
.author_count ul li span {display:block;font-size:14px;color:#999;}
.author_count ul li strong {font-weight:bold;}

完成后在小工具栏添加【本文作者】工具即可

三、参考资料

以上代码主要综合参考了

雅兮网：https://www.yaxi.net/2016-11-10/1132.html

一若博客：https://www.pieruo.com/5950.html

396资源：https://www.zmd396.cn/73.html

四、源码下载

以上代码文件下载

技术松鼠提示：内容已隐藏，请输入验证码后查看！
验证码：
微信扫描右侧二维码，或微信搜索“技术松鼠”或“JISHUSONGSHU”关注本站公众号，回复“验证码”，获取验证码。

v2-7f8555c24379af9fa6627943bec3b2e3_720w
Invitation
QQ Group
1095632335

created:04/01/2020

Welcome to the Group

加入企鹅群，暗号【技术松鼠】

Use this card to join us and participate in a pleasant discussion together .

Welcome to JISHUSONGSHU Group,wish you a nice day .

使用 CardLink 库生产卡片式链接

[WordPress]懒加载插件a3 Lazy …

留言添加访客操作系统及浏览器

网站用户显示QQ头像（加密），…

[WordPress]免费夜间模式插件Da…

# 作者信息工具# 网站侧边栏
×