B2美化教程第三弹_wordpress登录弹窗美化

释放双眼,带上耳机,听听看~!

成品



本教程参考了94设计的效果,并在原来的基础上进行了优化,比如源站效果在移动端就乱套了,所以本教程设置了在移动端不显示此效果

第一步,引入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>

第二步,子主题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>在Ai博客你可以获得</h2>'+
'<ul>'+
'<li><i class="ri-checkbox-circle-fill"></i> 全站精品资源 </li>'+
'<li><i class="ri-checkbox-circle-fill"></i> 持续更新,免费资源不断更 </li>'+
'<li><i class="ri-checkbox-circle-fill"></i>让站长不在愁资源</li>'+
'<li><i class="ri-checkbox-circle-fill"></i> 社群交流,结识志同道合站长好友 </li>'+
'</ul>'+
'</div>'+
'</div>');
})

第三步,子主题style.css文件增加以下代码:

隐藏内容,您需要满足以下条件方可查看
End

素材图片,请自行修改css中的图片地址为自己的:

人已赞赏
技术社区美化教程

JS聊天机器人框架BotUI

2020-6-28 11:48:37

美化教程

Wordpress有效拦截和过滤垃圾评论,字数验证,必须包含中文

2020-7-6 12:38:08

22 条回复 A文章作者 M管理员
  1. zym001

    66666

  2. 陌生老友

    初柒看看😤😎

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索