如何建立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 -->

使用的是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的方法

//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\\\');