今天分享的是在许天的小木屋看到的WordPress博客 b2主题登录弹窗美化教程,下面分享给有需要的站长盆友。
美化后的样子预览
第一步就是主要的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%; } }
最后刷新一下看看效果。
教程来源许天的小木屋