WordPress B2主题弹窗登录框美化

美化后的效果

子主题css文件增加以下代码

/*登录弹窗样式*/
@media (min-width: 768px){
    .login-box-content{  
        background-image: url(https://img.2binarys.com/2020/08/20200706041055174.png);
        background-position: 146px bottom;
        background-repeat: no-repeat;}
     .modal-content{width:800px}
    .aibk_com_login {width: 400px;
        height:auto;
        float: left;
       }   
    .login-box-content .login-box-top{    width: 400px;
        float: left;}    
    .aibk_com_login .wxlogin-sidebar{
         padding: 50px 50px 0;}
    .aibk_com_login .wxlogin-sidebar h2 {
        font-size: 22px;
        margin-bottom: 30px;
        color:#fff;
    }    
    .aibk_com_login .wxlogin-sidebar ul li{
         display: block;
        margin-bottom: 10px;
        font-size: 15px;
        color:#fff;
    }  
    p.module-desc {
        border-left: 0px solid #fb5f3c;
        padding-left: 0px;
    }
    .aibk_com_login .wxlogin-sidebar ul li i{
        margin-right: 10px;
        opacity: .52;
        position: relative;
        top:2px;
    }
    .login-title span{padding:10px 10px;font-size:16px;color:#252525;}
    .login-title span b{color:#252525;}
    .login-box-content .login-box-top{padding:36px 24px}
    .header .ri-medal-line{    color: #ffd2ab;
        font-size: 18px;
        position: relative;
        top: 3px;
        margin-right: 3px;}
}
@media (max-width: 768px) {
  .aibk_com_login {
  	display:none
  }
}

子主题child.js文件内增加以下代码

$(function(){
/*追加登录弹窗效果*/
$("#login-box .login-box-content").addClass("b2-radius bar-item-desc");
$('.login-box-content').prepend('<div class="aibk_com_login">'+
'<div class="wxlogin-sidebar">'+
'<h2>感谢您加入好源码网！</h2>'+
'<ul>'+
'<li><i class="b2font b2-dui"></i> 好源码网上线资源圈功能</li>'+
'<li><i class="b2font b2-dui"></i> 届时将为您提供一个更加完善的交流社区</li>'+
'<li><i class="b2font b2-dui"></i> 持续更新，免费资源不断更新</li>'+
'<li><i class="b2font b2-dui"></i> 未来我们会为您提供更多精彩</li>'+
'</ul>'+
'</div>'+
'</div>');
})

引入jquery文件

B2子主题，将下方代码添加至function.php文件中

//引入jquery
    wp_enqueue_script( 'b2-jquery','//cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js', array(), null , false );

或者可以后台头部HTML标签设置的地方引入js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>