在 WordPress 边栏中添加登录表单有多种方法,从简单的自带功能到自定义开发,适用于不同技术水平的用户,以下是具体步骤:

方法一:使用 WordPress 自带的 “登录” 小工具(最简单)

WordPress 内置了基础的登录小工具,无需额外插件或代码,适合快速实现需求。
步骤:
  1. 登录 WordPress 后台,进入「外观」→「小工具」(或「外观」→「自定义」→「小工具」,取决于主题)。
  2. 在左侧 “可用小工具” 中找到「登录」小工具(英文名为 “Login”)。
  3. 将其拖拽到右侧的 “边栏” 区域(如 “主边栏”“右侧边栏”,具体名称取决于主题)。
  4. 可自定义小工具标题(如 “会员登录”),点击 “保存” 即可。
效果:边栏会显示用户名 / 邮箱输入框、密码框、“记住我” 选项、登录按钮,以及 “忘记密码?” 链接;用户登录后会自动显示用户信息和 “退出” 链接。

方法二:使用插件实现更自定义的登录表单

如果需要更丰富的功能(如自定义字段、注册链接、样式美化等),可以用插件快速实现。推荐两款常用插件:

插件 1:Custom Login Form(轻量)

  1. 后台进入「插件」→「安装插件」,搜索 “Custom Login Form”,点击 “安装” 并 “激活”。
  2. 激活后,进入「外观」→「小工具」,找到 “Custom Login Form” 小工具,拖拽到边栏。
  3. 配置表单:可设置标题、显示 “注册” 链接(需先在「设置」→「常规」中勾选 “任何人都可以注册”)、显示 “忘记密码” 链接等,保存即可。

插件 2:Profile Builder(功能强大)

适合需要深度自定义(如自定义登录字段、样式、登录后跳转等)的场景:
  1. 安装并激活 “Profile Builder” 插件(搜索后安装)。
  2. 进入「Profile Builder」→「Form Fields」,可自定义登录表单的字段(默认已包含用户名、密码等基础字段)。
  3. 进入「外观」→「小工具」,找到 “Profile Builder Login Form” 小工具,添加到边栏,配置标题、样式等,保存即可。

方法三:手动代码实现(适合开发者,更灵活)

如果需要完全自定义样式或逻辑,可以通过代码调用 WordPress 内置的 wp_login_form() 函数生成登录表单,添加到边栏。

步骤 1:创建自定义小工具(推荐)

通过自定义小工具,可在后台自由开关登录表单,不破坏主题文件。
  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');
 
  1. 保存文件后,进入「外观」→「小工具」,找到 “自定义登录表单” 小工具,添加到边栏即可。

步骤 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;
}
 

总结

  • 新手推荐用「方法一(自带小工具)」或「方法二(插件)」,无需代码;
  • 开发者推荐「方法三(手动代码)」,可完全自定义功能和样式。

添加后记得在前台刷新页面,确认边栏登录表单正常显示~

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部