WordPress添加前台注册功能
有网友留言,想实现WordPress在前台注册的功能,联想之前写的教程:WordPress添加投稿功能,实现方法很类似,趁着今天休息,琢磨了一下,很快实现了WordPress前台的注册的功能。下面分享具体方法:
一、添加注册表单
1、首先在当前主题的目录下新建一个php文件,命名为reg-page.php,然后将page.php中的所有代码复制到reg-page.php中;
2、删除reg-page.php开头的所有注释,即 /* 与 */ ,以及它们之间的所有内容;
3、搜索:the_content,可以查找到类似代码:<?php the_content(); ?>,将这段代码替换成代码一(注意使用UTF-8编码另存为替换原来的reg-page.php)
如果你在reg-page.php中找不到the_content,那么你可以查找:get_template_part,可找到类似代码:<?php get_template_part( 'content', 'page' ); ?>,将content-page.php中的所有代码替换这部分代码即可。再用下面的代码替换<?php the_content(); ?>
代码一
<?php the_content(); ?>
<?php if(!empty($error)) {
echo '<p class="ludou-error">'.$error.'</p>';
}
if (!is_user_logged_in()) { ?>
<form name="registerform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-reg">
<p>
<label for="user_login">用户名<br />
<input type="text" name="user_login" tabindex="1" id="user_login" class="input" value="<?php if(!empty($sanitized_user_login)) echo $sanitized_user_login; ?>" />
</label>
</p>
<p>
<label for="user_email">电子邮件<br />
<input type="text" name="user_email" tabindex="2" id="user_email" class="input" value="<?php if(!empty($user_email)) echo $user_email; ?>" size="25" />
</label>
</p>
<p>
<label for="user_pwd1">密码(至少6位)<br />
<input id="user_pwd1" class="input" tabindex="3" type="password" tabindex="21" size="25" value="" name="user_pass" />
</label>
</p>
<p>
<label for="user_pwd2">重复密码<br />
<input id="user_pwd2" class="input" tabindex="4" type="password" tabindex="21" size="25" value="" name="user_pass2" />
</label>
</p>
<p class="submit">
<input type="hidden" name="ludou_reg" value="ok" />
<button class="button button-primary button-large" type="submit">注册</button>
</p>
</form>
<?php } else {
echo '<p class="ludou-error">您已注册成功,并已登录!</p>';
} ?>
二、添加表单处理代码
在reg-page.php开头处中,将第一个 <?php 改成代码二(注意使用UTF-8编码保存):
<?php
/**
* Template Name: 前台注册
* 作者:露兜
* 博客:https://www.ludou.org/
*
* 2013年02月02日 :
* 首个版本
*/
if( !empty($_POST['ludou_reg']) ) {
$error = '';
$sanitized_user_login = sanitize_user( $_POST['user_login'] );
$user_email = apply_filters( 'user_registration_email', $_POST['user_email'] );
// Check the username
if ( $sanitized_user_login == '' ) {
$error .= '<strong>错误</strong>:请输入用户名。<br />';
} elseif ( ! validate_username( $sanitized_user_login ) ) {
$error .= '<strong>错误</strong>:此用户名包含无效字符,请输入有效的用户名<br />。';
$sanitized_user_login = '';
} elseif ( username_exists( $sanitized_user_login ) ) {
$error .= '<strong>错误</strong>:该用户名已被注册,请再选择一个。<br />';
}
// Check the e-mail address
if ( $user_email == '' ) {
$error .= '<strong>错误</strong>:请填写电子邮件地址。<br />';
} elseif ( ! is_email( $user_email ) ) {
$error .= '<strong>错误</strong>:电子邮件地址不正确。!<br />';
$user_email = '';
} elseif ( email_exists( $user_email ) ) {
$error .= '<strong>错误</strong>:该电子邮件地址已经被注册,请换一个。<br />';
}
// Check the password
if(strlen($_POST['user_pass']) < 6)
$error .= '<strong>错误</strong>:密码长度至少6位!<br />';
elseif($_POST['user_pass'] != $_POST['user_pass2'])
$error .= '<strong>错误</strong>:两次输入的密码必须一致!<br />';
if($error == '') {
$user_id = wp_create_user( $sanitized_user_login, $_POST['user_pass'], $user_email );
if ( ! $user_id ) {
$error .= sprintf( '<strong>错误</strong>:无法完成您的注册请求... 请联系<a href="mailto:%s">管理员</a>!<br />', get_option( 'admin_email' ) );
}
else if (!is_user_logged_in()) {
$user = get_user_by( 'login', $sanitized_user_login );
$user_id = $user->ID;
// 自动登录
wp_set_current_user($user_id, $user_login);
wp_set_auth_cookie($user_id);
do_action('wp_login', $user_login);
}
}
}
最后进入WordPress管理后台 – 页面 – 创建页面,标题为注册(可以自己起名),内容填上注册说明等,右侧可以选择模板,选择 前台注册 即可。此页面即前台注册页面,将该页面的链接放到网站任何位置,供用户点击注册即可。
代码补充说明
1、注册成功会让用户自动登录,如果不需要自动功能,可以将49-55行代码删除,换成:
// 注册成功后跳转到站内其他页面,URL自行修改
wp_safe_redirect( 'https://www.ludou.org/' );
2、如果想美化一下注册表单,可以在主题的style.css中添加以下代码:
p.ludou-error {
margin: 16px 0;
padding: 12px;
background-color: #ffebe8;
border: 1px solid #c00;
font-size: 12px;
line-height: 1.4em;
}
.ludou-reg label {
color: #777;
font-size: 14px;
cursor: pointer;
}
.ludou-reg .input {
margin: 0;
color: #555;
font-size: 24px;
padding: 3px;
border: 1px solid #e5e5e5;
background: #fbfbfb;
}
前台登录
实现了前台注册功能,当然前台登录也是少不了的,具体看这篇文章:WordPress实现前台登录功能
-- 完 --
本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/wordpress-frontend-register.html
想请教下,如何让检查用户名有没有被注册和邮箱有没有被注册自动检测,而不是填写完成后点击提交按钮再判断
@Kelvin 需要用到ajax,代码较多,涉及东西也较多,需要专门调试。
@露兜 明白了,
不过要是能再出“找回密码”页面和“前台修改个人资料”的教程就完美了
@Kelvin 插件:WP User Frontend
可以控制之允许数字或者字母注册吗?禁止中文和任何符号。
@jayden WordPress本身禁止中文,其他需求请参考这篇文章修改:
https://www.ludou.org/wordpress-allowing-chinese-in-registration-2.html
你好,我想請問你一下。
你的語法教學
那種文字框,裡面的文字又有顏色,那是怎麼做到的?感謝你囉!
@郭偉威 插件 https://www.ludou.org/codecolorer.html
我收到囉,太感謝你囉。
第49行代码过时啦自3.3版本起,已不建议使用get_userdatabylogin,请换用get_user_by('login')
一直学习中
博主大人 这个添加之后 那个提示好难看 要怎么办呢? “<strong>错误</strong>:密码长度至少6位!<br” 是添加对应CSS样式上就可以了吗
@超级三只猫 css代码就自己加吧
博主大人,
請問一下WordPress有沒有辦法「網頁設置密碼要註冊會員」才能登入觀看的功能?
這幾天找了WordPress外掛發現似乎沒有串聯在一起的功能,
似乎都是網頁密碼一塊,會員註冊是一塊的…
請問如果要自行用您上面的方式編寫有沒有可能?
另外這樣有辦法管理到註冊人的資料嗎?如果後續需要刪除的話?
請麻煩大人解惑!!
@淘亞 插件:https://www.ludou.org/wordpress-plugin-login-to-view-all.html
@露兜 謝謝,博主大人解答!!
趕緊學起來^^~
你好,我按照你的教程做出来了模板,可是应用到前台全是空白,是哪里出了问题吗,能指导下吗
这个是用的来给其他用户注册,登录用的吗?我指的不是 通过这个注册能登录后台。
get_userdatabylogin() 已经被替换成了get_user_by()
@hello 谢谢提醒
如何让注册的时候多添加个姓氏和名字,我直接加上去,提交后没存到数据库啊。求解
感谢博主的教程,让我受益匪浅。感谢万分,希望博主的网站越办越好。
您好,请问我想做一个只有注册用户才能投稿的网站,是不是前端注册、前端登陆和前端投稿都需要实现,除了实现这个,如何把登陆用户和用户投稿放在一起呢?
大神求指点,自定义注册页面如何添加自定义问题判断,应该怎么写?
大神您好,可以改良一下前台注册,添加验证码功能,防止恶意注册吗
博主,我想问一下怎么添加PHP文件啊?谢谢
楼主怎么在你这段代码里新增自定义字段?新增字段加了表也保存不了。网上找了好久都是在functions.php里面加的,但这个并不是我们自定义页面啊。而且页面样式也不是自己的样式。望楼主看到后帮忙解答下,谢谢