如何在 WordPress 边栏中添加登录表单
14 阅读
0 评论
0 点赞
在 WordPress 边栏中添加登录表单有多种方法,从简单的自带功能到自定义开发,适用于不同技术水平的用户,以下是具体步骤:
方法一:使用 WordPress 自带的 “登录” 小工具(最简单)
WordPress 内置了基础的登录小工具,无需额外插件或代码,适合快速实现需求。
步骤:
- 登录 WordPress 后台,进入「外观」→「小工具」(或「外观」→「自定义」→「小工具」,取决于主题)。
- 在左侧 “可用小工具” 中找到「登录」小工具(英文名为 “Login”)。
- 将其拖拽到右侧的 “边栏” 区域(如 “主边栏”“右侧边栏”,具体名称取决于主题)。
- 可自定义小工具标题(如 “会员登录”),点击 “保存” 即可。
效果:边栏会显示用户名 / 邮箱输入框、密码框、“记住我” 选项、登录按钮,以及 “忘记密码?” 链接;用户登录后会自动显示用户信息和 “退出” 链接。
方法二:使用插件实现更自定义的登录表单
如果需要更丰富的功能(如自定义字段、注册链接、样式美化等),可以用插件快速实现。推荐两款常用插件:
插件 1:Custom Login Form(轻量)
- 后台进入「插件」→「安装插件」,搜索 “Custom Login Form”,点击 “安装” 并 “激活”。
- 激活后,进入「外观」→「小工具」,找到 “Custom Login Form” 小工具,拖拽到边栏。
- 配置表单:可设置标题、显示 “注册” 链接(需先在「设置」→「常规」中勾选 “任何人都可以注册”)、显示 “忘记密码” 链接等,保存即可。
插件 2:Profile Builder(功能强大)
适合需要深度自定义(如自定义登录字段、样式、登录后跳转等)的场景:
- 安装并激活 “Profile Builder” 插件(搜索后安装)。
- 进入「Profile Builder」→「Form Fields」,可自定义登录表单的字段(默认已包含用户名、密码等基础字段)。
- 进入「外观」→「小工具」,找到 “Profile Builder Login Form” 小工具,添加到边栏,配置标题、样式等,保存即可。
方法三:手动代码实现(适合开发者,更灵活)
如果需要完全自定义样式或逻辑,可以通过代码调用 WordPress 内置的
wp_login_form()
函数生成登录表单,添加到边栏。步骤 1:创建自定义小工具(推荐)
通过自定义小工具,可在后台自由开关登录表单,不破坏主题文件。
- 进入主题的
functions.php
文件(路径:wp-content/themes/当前主题名/functions.php
),添加以下代码:
php
// 注册自定义登录小工具
class Custom_Login_Widget extends WP_Widget {
function __construct() {
parent::__construct(
'custom_login_widget', // 小工具ID
'自定义登录表单', // 小工具名称
array('description' => '在边栏显示登录表单') // 描述
);
}
// 前端显示
public function widget($args, $instance) {
echo $args['before_widget']; // 主题自带的小工具前缀(如样式容器)
if (!empty($instance['title'])) {
echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
}
// 调用WordPress登录表单函数
if (!is_user_logged_in()) { // 仅游客显示登录表单
wp_login_form(array(
'redirect' => home_url(), // 登录后跳转地址(默认为当前页)
'label_username' => '用户名/邮箱',
'label_password' => '密码',
'label_remember' => '记住我',
'label_log_in' => '登录',
'remember' => true, // 显示“记住我”选项
));
// 显示注册和忘记密码链接(可选)
echo '<div class="login-links">';
echo '<a href="' . wp_registration_url() . '">注册</a> | ';
echo '<a href="' . wp_lostpassword_url() . '">忘记密码?</a>';
echo '</div>';
} else { // 登录后显示用户信息
echo '<p>你好,' . wp_get_current_user()->display_name . '!</p>';
echo '<a href="' . wp_logout_url(home_url()) . '">退出登录</a>';
}
echo $args['after_widget']; // 主题自带的小工具后缀
}
// 后台设置表单(标题)
public function form($instance) {
$title = !empty($instance['title']) ? $instance['title'] : '会员登录';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">标题:</label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<?php
}
// 保存后台设置
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
return $instance;
}
}
// 注册小工具
function register_custom_login_widget() {
register_widget('Custom_Login_Widget');
}
add_action('widgets_init', 'register_custom_login_widget');
- 保存文件后,进入「外观」→「小工具」,找到 “自定义登录表单” 小工具,添加到边栏即可。
步骤 2:美化样式(可选)
默认表单样式可能与主题不符,可在「外观」→「自定义」→「额外 CSS」中添加样式,例如:
css
/* 登录表单容器 */
.widget_custom_login_widget {
padding: 20px;
border: 1px solid #eee;
border-radius: 4px;
}
/* 输入框样式 */
.widget_custom_login_widget input[type="text"],
.widget_custom_login_widget input[type="password"] {
width: 100%;
padding: 8px;
margin: 5px 0 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
/* 登录按钮 */
.widget_custom_login_widget input[type="submit"] {
background: #007cba;
color: white;
border: none;
padding: 8px 15px;
border-radius: 3px;
cursor: pointer;
}
/* 链接样式 */
.login-links {
margin-top: 10px;
text-align: center;
}
.login-links a {
color: #007cba;
text-decoration: none;
}
总结
- 新手推荐用「方法一(自带小工具)」或「方法二(插件)」,无需代码;
- 开发者推荐「方法三(手动代码)」,可完全自定义功能和样式。
添加后记得在前台刷新页面,确认边栏登录表单正常显示~
- 本文分类:服务器资讯
- 本文标签:WordPress小工具CustomLoginForm插件ProfileBuilder开发者
- 浏览次数:14 次浏览
- 发布日期:2025-09-30 15:18:30
- 本文链接:http://www.pvps.top/fuwuqizixun/238.html
- 上一篇 > 网站被攻击了如何做好防护?
- 下一篇 > 如何在 WordPress 中添加使用 Google 的一键登录
发表评论 取消回复