首页 问答 正文

如何在WordPress中创建自定义登录页

注册会员 / 悠然自学 / 2023-06-11/ 浏览 67 次

要在WordPress中创建自定义登录页面,可以使用以下步骤:

  1. 首先,在WordPress主题文件夹中创建一个新的php文件,例如login.php。

  2. 在login.php文件中编写自定义登录页面的HTML和CSS代码,可以使用WordPress默认样式,也可以添加自己的样式。

示例代码:

<?php /* Template Name: Custom Login Page */ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Login Page</title>
    <?php wp_head(); ?>
    <style>
        /* Custom CSS styles */
        body {
            background-color: #f2f2f2;
        }
        #login {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            margin: 100px auto;
            padding: 50px;
            max-width: 400px;
            text-align: center;
        }
        #login h1 {
            margin-bottom: 30px;
        }
        #login #username,
        #login #password {
            width: 100%;
            margin-bottom: 20px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
        }
        #login #submit {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #0073aa;
            color: #fff;
            text-transform: uppercase;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="login">
        <h1>Login</h1>
        <form action="<?php echo wp_login_url(); ?>" method="post">
            <input type="text" name="log" id="username" placeholder="Username">
            <input type="password" name="pwd" id="password" placeholder="Password">
            <input type="submit" name="submit" id="submit" value="Log In">
        </form>
        <p><a href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a></p>
    </div>
</body>
</html> 
  1. 保存login.php文件,并在WordPress后台的页面编辑器中创建一个新页面。

  2. 在新页面的右侧设置面板中,选择前面创建的“Custom Login Page”模板,保存并发布页面。

  3. 现在访问该页面,应该会看到自定义的登录页面。

说明:示例代码中通过在form标签中设置action参数为wp_login_url(),表单提交的数据会自动提交到WordPress默认的登录地址wp-login.php,并根据提交的数据进行登录验证,如果验证成功,则会跳转到WordPress后台管理界面。同样,示例代码中也通过在“Lost your password?”链接的href参数中设置wp_lostpassword_url(),将忘记密码链接指向WordPress默认的“找回密码”页面。

大家谈论
    我的见解