b2主题登录弹窗美化WordPress博客登录页面美化教程

今天分享的是在许天的小木屋看到的WordPress博客 b2主题登录弹窗美化教程,下面分享给有需要的站长盆友。

美化后的样子预览

b2主题登录弹窗美化WordPress博客登录页面美化教程

第一步就是主要的js代码

$(function(){
/*弹窗登录效果*/$("#login-box .login-box-content").addClass("b2-radius");
$('.login-box-content').prepend('<div class="aibk_com_login">'+
'<div class="wxlogin-sidebar">'+
'<div>'+
'<h3>许天的小木屋</h3>'+
'<p>优质内容分享网站 - www.5186a.com</p>'+
'</div>'+

'</div>'+
'</div>'
);
})

这个代码放在子主题的child.js文件中没有在主题目录自己新建一个!

自己新建的要在在主题目录footer.php文件的底部 <?php wp_footer() ; ?> 上面引用这个文件。

第二步引入jquery(我们推荐的是现在最快的字节静态资源库)

主题根目录functions.php文件中插入下方代码:

//引入字节库的JS
wp_enqueue_script( 'b2-jquery','https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js', array(), null , false );

最后一步css样式代码:

代码中的图片自行替换像素是375 × 500 像素

.login-box-content {
    margin-top: 0;
    width: auto;
    display: flex;
    position: relative;
    background: #fff;
    min-width: 750px;
}
.aibk_com_login {
    width: 50%;
    position: relative;
    /**这里就是图片地址了改成你的**/    background: url(//img.ahap.cn/file/ahap/dl.png);
    background-size: cover;
    background-position: center 0;
}
.login-box-content .login-box-top {
    width: 50%;
    padding: 30px 30px 25px;
}
.wxlogin-sidebar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 100%);
}
.wxlogin-sidebar h3{
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
}
.wxlogin-sidebar p{
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}
.wxlogin-sidebar>div {
    padding: 30px;
}


@media screen and (max-width: 768px){
.aibk_com_login {
    display: none;
}
.login-box-content{
 min-width: auto;
}
.login-box-content .login-box-top{
    width: 100%;
}
}

最后刷新一下看看效果。

教程来源许天的小木屋

声明

⚠️免责声明:本站的资源均来自于用户投稿,作个人学习使用,其版权均归原作者所有。

⚠️侵权声明:如有侵权请来信:wenanjiejie#qq.com 告知。

⚠️转载声明:若需转载,请保留原文链接并附出处,谢谢合作。

0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到