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

松鼠小

发表文章数:103

松鼠工具箱

一个汇集海量优质在线工具网站的精美网址导航。

立即查看
首页 » WordPress » 网站侧边栏 | 作者信息小工具

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

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

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

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

先看简单效果预览:

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

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

一、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);

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

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

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;
    }
}
网站侧边栏 | 作者信息小工具

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

function widget_authorinfo(){
    if (!wp_is_mobile()){
    ?>
        
    

注意里面有些参数需要修改
网站侧边栏 | 作者信息小工具
网站侧边栏 | 作者信息小工具

认证标志,哈哈!

若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”关注本站公众号,回复“验证码”,获取验证码。

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

转载请注明出处: 转载或复制请以 超链接形式 并注明出处 技术松鼠
原文地址:《网站侧边栏 | 作者信息小工具》 作者:松鼠小,发布于2020-03-24

分享到:
赞(3) 打赏

评论 抢沙发

评论前必须登录!

  注册



这里木有人,抢个沙发呗 o(๑◕ ▽ ◕๑)~


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册