7B2美化|登陆弹窗

效果演示

教程开始

1.放置js代码

• 有子主题就放在child.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>佐佐佑佑-ZZYYI.COM</h3>'+
'<p>💻 折腾网络环境，记录运维踩坑与实操教程</p>'+
'<p>✨ 雕琢网页模样，CSS动效主题美化改造实录</p>'+
'<p>📜 打磨指令言辞，探索Prompt驾驭大模型的门道</p>'+
'<p>🧠 思辨人工智能，留存行业观察与深度思考</p>'+
'<p>😜 收藏烟火日常，写下佐佐佑佑成长细碎时光</p>'+
'<p>🛠 搜罗好物利器，整理各类提升效率的工具合集</p>'+
'</div>'+
'</div>'+
'</div>'
);
})

如果没有子主题可以在网站根目录自己建一个dl.js文件，在主题目录footer.php文件中底的 <？php wp_footer（） ; ？> 上面填写以下代码即可

<script src="/dl.js"></script>

2.引入jquery

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

wp_enqueue_script( 'b2-jquery','https://zzyyi.com/jquery.min.js', array(), null , false );

其中jquery.min.js文件得自己下载到服务器 

3.css样式代码：

加入到主题文件目录的style.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(https://zzyy-1392199884.cos.ap-beijing.myqcloud.com/wp-content/uploads/2026/07/20260706144930999.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%;
}
}