建立WordPress登錄表單一般有兩種實現(xiàn)方式，一種是建立登錄頁面+表單，一種是直接使用彈出窗口+表單。今天我介紹下非插件方式制作一個WordPress彈窗的登錄表單，這種方法的好處就是在當(dāng)前頁面登錄，無需跳轉(zhuǎn)頁面。

登錄表單比較核心的函數(shù)是wp_login_form()，就利用其來實現(xiàn)。在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>

未經(jīng)允許不得轉(zhuǎn)載：445IT之家 » 如何建立WordPress登錄彈窗表單？