wordpress主题目前还没有开发用户头像框的功能

源码简介:

wordpress子比主题(zibll)目前还没有开发用户头像框的功能,所以有位技术大佬就写了这么一个功能,实现起来也比较简单。

相关图片:

2345_image_file_copy_14

2345_image_file_copy_15

 

教程如下:

此处隐藏内容

1、将以下代码复制到子比主后台主题配置->自定义代码:自定义CSS代码中

/*头像框*/
.txgj {
    top: 2px;
    transform: scale(1.7);
    width: 90px;
    position: absolute;
    z-index: 1;
}

.top-user-info-box-name .txgj {
    left: -5px;
    transform: scale(1);
    top: 6px;
}

.post-meta-left .txgj {
    display: none;
}

.post-meta-left .avatar-parent .txgj {
    display: block;
    transform: scale(1.6);
    display: block;
    left: 0px !important;
}

.top-user-box-drop .avatar {
    border-radius: 50%;
}

.comment .gravatar img {
    border-radius: 50%;
}

/*用户中心头像圆形*/
.author-header .avatar-img {
    --this-size: 95px;
}

.author-header .avatar-img .avatar {
    border-radius: 50px;
    border: 4px solid var(--main-bg-color)
}

2、下载头像框的图片素材并上传到自己的网站。
3、最后一步,将以下代码复制到子比主后台主题配置->自定义代码:自定义JavaScript代码中

//头像框
$(function () {
    $('.avatar-img ').prepend('<img src="头像框图片地址" class="txgj">');
    $('.avatar-mini ').prepend('<img src="头像框图片地址" class="txgj">');
    $('.comt-avatar mb10 ').prepend('<img src="头像框图片地址" class="txgj">');
    $('.avatar-set-link').css('z-index', '1');
})

 

5、如果按上述步骤操作后,首页头像显示不全,可将下方CSS代码添加到主题的自定义css代码中。

.ml6 {
margin-left: 8px;
}
.posts-item .item-meta item {
margin-right: 8px;
font-size: 13px;
margin-left: 8px;
margin-bottom: 3px;
}
温馨提示:本文最后更新于2024-05-08 01:25:28,某些文章具有时效性,若有错误或已失效,请在下方留言
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容