如何建立WordPress登录弹窗表单？(WordPress正确引入加载JS、css文件的方法)
如何建立WordPress登录弹窗表单？
建立WordPress登录表单一般有两种实现方式，一种是建立登录页面+表单，一种是直接使用弹出窗口+表单。今天我介绍下非插件方式制作一个WordPress弹窗的登录表单，这种方法的好处就是在当前页面登录，无需跳转页面。
登录表单比较核心的函数是wp_login_form()，就利用其来实现。在functions.php中加入：
<?php
/**
* Customizing the Login Form.
* https://codex.wordpress.org/Customizing_the_Login_Form
*/
if ( ! is_user_logged_in() ) {?>
<!-- Login modal START -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" aria-labelledby="modalLoginFormLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLoginFormLabel">登录</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?php
// Display WordPress login form:
$args = array(
'form_id' => 'loginForm',
'label_username' => __( '用户名或电子邮箱地址' ),
'label_password' => __( '密码' ),
'label_remember' => __( '记住我' ),
'label_log_in' => __( '登录' ),
'remember' => true
);
wp_login_form( $args );?>
<p class="px-3 mb-1"><a href="javascript:;">注册</a> | <a href="<?php echo esc_url( wp_lostpassword_url( $currentUri ) ); ?>"><?php esc_html_e( '忘记密码？', 'jet-x' ); ?></a></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- Login modal END -->
<?php }?>
使用的是Bootstrap 5 的Modal弹窗样式，需要确定你的主题是否引入了Bootstrap。
制作一个按钮点击时弹出窗口：
<button type="button" id="loginUrl" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#modalLoginForm">登录</button>
WordPress正确引入加载JS、css文件的方法
我们在开发WordPress主题过程中，会需要添加css、js文件，WordPress为开发者提供了一个很好的脚本及样式文件的排队系统，这有助于防止插件之间的脚本冲突问题。这篇文章wp自学笔记主要为大家介绍WordPress中添加Javascript文件与css文件的方法，对那些刚开始学习WordPress主题和插件的开发是特别有用的。
很多人都接使用link、script标签写进HTML当中，其实WordPress内置了比较完善的引用脚本的函数和方法。
显然，使用WordPress内置的方法引用，更专业更具有可扩展性一些。
正确引入JS、css的方法
|
1 |
//WordPress正确引入JS、css的方法function wptoo_scripts(){$theme_assets = get_template_directory_uri() . \\\'/static\\\';if (!is_admin()) {// 禁用jquery和110n翻译wp_deregister_script(\\\'jquery\\\');wp_deregister_script(\\\'l10n\\\');//引入CSSwp_enqueue_style ( \\\'style\\\' ,get_template_directory_uri().\\\"/style.css\\\" ,array(), false, \\\'all\\\');wp_enqueue_style(\\\'uikit\\\', $theme_assets . \\\'/css/uikit.css\\\', array(), \\\'\\\', \\\'all\\\');// 引入JSwp_enqueue_script(\\\'jquery\\\', $theme_assets . \\\'/js/jquery.min.js\\\', \\\'\\\', false);wp_enqueue_script(\\\'uikit\\\', $theme_assets . \\\'/js/uikit.min.js\\\', array(), \\\'\\\', false);wp_enqueue_script(\\\'\\\', $theme_assets . \\\'/js/clipboard.min.js\\\', array(), \\\'\\\', false);wp_enqueue_script(\\\'index\\\', $theme_assets . \\\'/js/index.js\\\', array(), \\\'\\\', false);}}add_action(\\\'wp_enqueue_scripts\\\', \\\'wptoo_scripts\\\'); |
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 如何建立WordPress登录弹窗表单？(WordPress正确引入加载JS、css文件的方法)
