当前位置：首页 > CMS教程 > 正文

WordPress如何添加登录界面？

admin
CMS教程
2025-06-20
3429

在WordPress中添加登录界面有两种常用方法：一是直接访问默认登录地址 yoursite.com/wp-login.php；二是创建新页面，使用登录表单插件或代码块添加登录功能，然后将该页面设为登录入口即可，也可自定义其外观。

在WordPress中添加登录界面是管理用户访问的关键步骤,默认登录地址为 yoursite.com/wp-admin 或 yoursite.com/wp-login.php，以下是详细的操作方法，涵盖插件和代码两种方式，兼顾安全性和品牌定制需求：

使用插件（推荐新手）

插件是最安全便捷的方式,无需代码知识，适合大多数用户。

方法1：自定义登录页面插件

安装插件
在后台点击【插件】→【安装插件】，搜索以下任一插件：
- ProfilePress（功能全面，支持表单定制）
- Theme My Login（免费，可匹配主题风格）
- WPS Hide Login（仅隐藏默认登录地址，增强安全）
配置登录页面（以ProfilePress为例）
- 安装后进入 ProfilePress → 登录表单，点击【创建新表单】。
- 拖拽组件设计界面（如添加Logo、背景图、社交媒体登录按钮）。
- 保存后复制生成的短代码（如 [profilepress-login id="1"]）。
创建新页面
- 新建页面（如命名为“登录”），将短代码粘贴到内容区并发布。
- 访问 yoursite.com/login 即可看到定制后的登录界面。

方法2：重定向默认登录地址

用 WPS Hide Login 插件隐藏默认路径，防止暴力破解：

安装后进入【设置】→ WPS Hide Login。
在“Login URL”栏输入自定义路径（如 secret-login），保存后原 wp-admin 将自动失效。
用户只能通过 yoursite.com/secret-login 访问登录页。

手动代码定制（适合开发者）

通过主题文件添加自定义登录功能,需编辑代码（操作前务必备份网站）。

步骤1：创建登录页面模板

进入【外观】→【主题文件编辑器】，在子主题的文件夹中新建 login-page.php（避免主题更新丢失）。

复制以下基础代码到文件：

<?php
/* Template Name: Custom Login Page */
get_header(); 
if (is_user_logged_in()) {
 // 已登录用户重定向到首页
 wp_redirect(home_url());
 exit;
}
?>
<div class="custom-login-form">
 <?php 
 // 调用WordPress默认登录表单
 wp_login_form(array(
     'redirect' => home_url(), // 登录后跳转首页
     'label_username' => '用户名/邮箱',
     'label_password' => '密码',
     'remember' => true // 显示“记住我”选项
 )); 
 ?>
 <p><a href="<?php echo wp_lostpassword_url(); ?>">忘记密码？</a></p>
</div>
<?php get_footer(); ?>

步骤2：应用模板到页面

新建页面（如“会员登录”），在右侧“模板”下拉菜单中选择 Custom Login Page 并发布。
访问该页面即可看到登录表单。

步骤3：高级定制（可选）

修改登录界面样式：在主题的 style.css 中添加CSS：

.custom-login-form {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ddd;
}
.custom-login-form input[type="text"],
.custom-login-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
}

添加自定义Logo：在 functions.php 中添加：

function custom_login_logo() {
    echo '<style>
        .login h1 a { 
            background-image: url(' . get_stylesheet_directory_uri() . '/images/logo.png) !important; 
            height: 100px !important;
            width: 100% !important;
            background-size: contain !important;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_logo');