WP自定义前端登录弹出框

Published
2023-01-25
浏览次数 :  12

<!DOCTYPE html>
<html>
<head>
    <title>Login Form in Modal Window</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        jQuery(document).ready(function($) {
            // Initialize the jQuery UI Dialog widget
            $("#loginform").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "Log In": function() {
                        $(this).submit();
                    }
                }
            });
            // Open the login form when the login link is clicked
            $("#login-link").click(function() {
                $("#loginform").dialog("open");
                return false;
            });
        });
    </script>
</head>
<body>
<a href="#" id="login-link">Login</a>
<form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post">
    <p class="login-username">
        <label for="user_login">Username or Email Address</label>
        <input type="text" name="log" id="user_login" class="input" value="" size="20" autocomplete="username" />
    </p>
    <p class="login-password">
        <label for="user_pass">Password</label>
        <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" autocomplete="current-password" />
    </p>
    <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label></p>
    <p class="login-submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Log In" />
        <input type="hidden" name="redirect_to" value="<?php echo esc_url( home_url() ); ?>" />
    </p>
</form>
</body>
</html>

  • 标签1
  • 标签1
  • 标签1
Top