WordPress-7B2主题美化之登陆弹窗

admin

适用于WordPress网站7B2主题的登陆弹窗界面美化教程

效果图

美化教程1.放置js代码

有子主题就放在child.js文件中

1. $(function(){
   
2. /*弹窗登录效果-www.xiaohuli.vip*/
   
3. $("#login-box .login-box-content").addClass("b2-radius");
   
4. $('.login-box-content').prepend(''+
   
5. ''+
   
6. ''+
   
7. ''+
   
8. ''+
   
9. ''
   
10. );
    
11. })
    

复制代码

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

1. <span>src="/dl.js">
   

复制代码

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

1. wp_enqueue_script( 'b2-jquery','https://img.ahap.cn/file/ahap/jquery.min.js', array(), null , false );
   

复制代码

其中jquery.min.js文件可以自己下载到服务器
3.css样式代码：
加入到主题文件目录的style.css中，代码中的图片自行替换我的是375 × 500 像素

1. /*登陆弹窗美化-www.xiaohulizyw.cn*/
   
2. .login-box-content {
   
3. margin-top: 0;
   
4. width: auto;
   
5. display: flex;
   
6. position: relative;
   
7. background: #fff;
   
8. min-width: 750px;
   
9. }
   
10. .aibk_com_login {
    
11. width: 50%;
    
12. position: relative;
    
13. background: url(https://img.xiaohulizyw.xiaohuli.vip/wp-content/uploads/2021/12/dl.webp);
    
14. background-size: cover;
    
15. background-position: center 0;
    
16. }
    
17. .login-box-content .login-box-top {
    
18. width: 50%;
    
19. padding: 30px 30px 25px;
    
20. }
    
21. .wxlogin-sidebar {
    
22. position: absolute;
    
23. bottom: 0;
    
24. width: 100%;
    
25. background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 100%);
    
26. }
    
27. .wxlogin-sidebar h3{
    
28. color: #fff;
    
29. font-size: 18px;
    
30. margin-bottom: 10px;
    
31. }
    
32. .wxlogin-sidebar p{
    
33. color: rgba(255, 255, 255, 0.7);
    
34. font-size: 14px;
    
35. }
    
36. .wxlogin-sidebar>div {
    
37. padding: 30px;
    
38. }
    
39. @media screen and (max-width: 768px){
    
40. .aibk_com_login {
    
41. display: none;
    
42. }
    
43. .login-box-content{
    
44. min-width: auto;
    
45. }
    
46. .login-box-content .login-box-top{
    
47. width: 100%;
    
48. }
    
49. }
    

复制代码