学做网站培训课程介绍

当前位置:

如何自定义wordpress 用户注册页面

使用wordpress 建网站,程序自带有注册页面,但很难满足我们自己建网站的需求。我们在做网站时,如何自定义wordpress 注册页面呢?下面就是自定义wordpress 注册页面的方法。

先看下制作好的wordpress 注册页面的效果:(以下代码比较多,如果你对代码不熟悉,可以直接安装WordPress用户注册登录会员中心插件(组件)来实现)
自定义wordpress 注册页面

方法/步骤

第一步:新建一个HTML空白页面,在HTML页面中,粘贴以下HTML代码,用于显示用户输入框。


<?php get_header();?>
<div class="con">
      <div class="zhuce">
      <?php the_content(); ?>
<?php if(!empty($error)) {
echo '<p class="ludou-error">'.$error.'</p>';
}
if (!is_user_logged_in()) { ?>
<div class="top1">
        <h2>注册账户</h2>
        <div class="txt">欢迎您注册<?php bloginfo('name'); ?> 【官网】会员,如果您已拥有账户,则可在此 <a href="<?php echo get_option('home'); ?>/">首页登录</a></div>
    </div>
<form name="registerform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-reg">
<p class="zc00">
<label for="user_login">用户昵称:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="user_login" id="user_login" class="input" value="<?php if(!empty($sanitized_user_login)) echo $sanitized_user_login; ?>" size="20" />&nbsp;&nbsp;<span style="color:#900">长度为6~16位字符</span>
</label>
</p>
<p class="zc00">
<label for="user_pwd1">设置密码:&nbsp;&nbsp;&nbsp;&nbsp;<input id="user_pwd1" class="input" type="password" tabindex="21" size="25" value="" name="user_pass" />&nbsp;&nbsp;<span style="color:#900">长度为6~16位字符,可以为“数字/字母/中划线/下划线”组成</span>
</label>
</p><p class="zc00">
<label for="user_pwd2">确认密码:&nbsp;&nbsp;&nbsp;&nbsp;<input id="user_pwd2" class="input" type="password" tabindex="21" size="25" value="" name="user_pass2" />
</label>
</p>
<p class="zc00">
<label for="user_email">电子邮件:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="user_email" id="user_email" class="input" value="<?php if(!empty($user_email)) echo $user_email; ?>" size="25" />
</label>
</p>

<p class="submit">
<input type="hidden" name="ludou_reg" value="ok" />
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="立即注册" />
</p>
</form>
<?php } else {
echo '<p class="ludou-error">您已注册成功,并已登录!<a style="color:red;" href="/">返回首页</a></p>';
} ?></div>
    <div class="clear h10"></div>
</div>
<?php get_footer();?>

第二步:将第一步的HTML页面进行保存,取名为reg.php;

第三步:使用以下的PHP代码替换掉reg.php中的

<?php get_header();?>

,作用是为了验证用户填写的信息。


<?php
/*
Template Name: 网站注册页面
* 代码来源:学做网站论坛 https://www.xuewangzhan.net/
*/
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_userdatabylogin($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);
}
}
}get_header();?>

第四步:将下面的CSS代码粘贴到 get_header();?> 的下面,用于控制wordpress注册页面的样式。


<style>
.zc00{margin:15px 0;}
.zhuce{    width: 860px;
    margin: 0 auto;
    padding: 30px 30px 40px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;}
.zhuce input{    width: 280px;
    height: 35px;
    margin-right: 10px;
    padding: 0 10px;
    line-height: 30px;
    border: 0;
    background-image: url(<?php bloginfo('template_directory'); ?>/images/userlog_input_bg.png);
    font-size: 14px;
    font-family: Verdana;}
.zhuce input[type="submit"]{width: 119px;
    height: 37px;
    background-image: url(<?php bloginfo('template_directory'); ?>/images/userlog_btn_bg.png);
    border: 0;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: "微软雅黑";
    cursor: pointer;
    margin-left:120px;
}
.top1 {
    margin-bottom: 40px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #dadada;}
    .top1 h2 {
    font-size: 20px;
    color: #9C0;
    margin-bottom:10px;
}
.mainbody .txt {
    margin-top: 8px;
    color: #999;
}
</style>

第五步:将所有的改动全部保存。然后在wordpress网站后台,新建一个页面,标题写“用户注册”,模板选择“网站注册页面”,然后创建,这样一个自定义的wordpress注册页面就制作好了。结合制作WP网站的登录功能,就可以完美的给自己的网站制作出注册和登录页面了。

下面是完整的wordpress注册页面的代码:


<?php
/*
Template Name: 网站注册页面
* 代码来源:学做网站论坛 https://www.xuewangzhan.net/
*/
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_userdatabylogin($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);
}
}
}get_header();?>
<style>
.zc00{margin:15px 0;}
.zhuce{    width: 860px;
    margin: 0 auto;
    padding: 30px 30px 40px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;}
.zhuce input{    width: 280px;
    height: 35px;
    margin-right: 10px;
    padding: 0 10px;
    line-height: 30px;
    border: 0;
    background-image: url(<?php bloginfo('template_directory'); ?>/images/userlog_input_bg.png);
    font-size: 14px;
    font-family: Verdana;}
.zhuce input[type="submit"]{width: 119px;
    height: 37px;
    background-image: url(<?php bloginfo('template_directory'); ?>/images/userlog_btn_bg.png);
    border: 0;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: "微软雅黑";
    cursor: pointer;
    margin-left:120px;
}
.top1 {
    margin-bottom: 40px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #dadada;}
    .top1 h2 {
    font-size: 20px;
    color: #9C0;
    margin-bottom:10px;
}
.mainbody .txt {
    margin-top: 8px;
    color: #999;
}
</style>
<div class="con">
      <div class="zhuce">
      <?php the_content(); ?>
<?php if(!empty($error)) {
echo '<p class="ludou-error">'.$error.'</p>';
}
if (!is_user_logged_in()) { ?>
<div class="top1">
        <h2>注册账户</h2>
        <div class="txt">欢迎您注册<?php bloginfo('name'); ?> 【官网】会员,如果您已拥有账户,则可在此 <a href="<?php echo get_option('home'); ?>/">首页登录</a></div>
    </div>
<form name="registerform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-reg">
<p class="zc00">
<label for="user_login">用户昵称:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="user_login" id="user_login" class="input" value="<?php if(!empty($sanitized_user_login)) echo $sanitized_user_login; ?>" size="20" />&nbsp;&nbsp;<span style="color:#900">长度为6~16位字符</span>
</label>
</p>
<p class="zc00">
<label for="user_pwd1">设置密码:&nbsp;&nbsp;&nbsp;&nbsp;<input id="user_pwd1" class="input" type="password" tabindex="21" size="25" value="" name="user_pass" />&nbsp;&nbsp;<span style="color:#900">长度为6~16位字符,可以为“数字/字母/中划线/下划线”组成</span>
</label>
</p><p class="zc00">
<label for="user_pwd2">确认密码:&nbsp;&nbsp;&nbsp;&nbsp;<input id="user_pwd2" class="input" type="password" tabindex="21" size="25" value="" name="user_pass2" />
</label>
</p>
<p class="zc00">
<label for="user_email">电子邮件:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="user_email" id="user_email" class="input" value="<?php if(!empty($user_email)) echo $user_email; ?>" size="25" />
</label>
</p>


<p class="submit">
<input type="hidden" name="ludou_reg" value="ok" />
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="立即注册" />
</p>
</form>
<?php } else {
echo '<p class="ludou-error">您已注册成功,并已登录!<a style="color:red;" href="/">返回首页</a></p>';
} ?></div>
    <div class="clear h10"></div>
</div>
<?php get_footer();?>

《“如何自定义wordpress 用户注册页面”》 有 4 条评论

  1. 学习建网站学员 西安宫康说道:

    第五步:将所有的改动全部保存。然后在wordpress网站后台,新建一个页面,标题写“用户注册”,模板选择“网站注册页面”,

    请问
    在网站后台怎么找不到“模板选择”

  2. 学做网站论坛讲师 学做网站讲师说道:

    有的,你新建页面时,右侧可以选择模板

  3. 学习建网站学员 yth说道:

    你好,我想问下这个注册的是订阅者,可以改变角色吗?

    • 学做网站论坛讲师 学做网站讲师说道:

      可以,在后台设置默认角色

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 用wordpress程序建站时,往往很难去设置产品的大小、重量、单价等参数,好在wordpress有一个自定义栏目功能。我们可以通过wordpress自定义栏目给产品
  • 新手在学做网站时,Dreamweaver是一个常用的网页编辑软件,它的功能强大。所以学做网站论坛提供了dreamweaver视频教程,免费供学建站新手学习。在
  • 漂亮的wordpress淘客模板 图文教程 (111025 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • 一些自己学建网站的学员,使用photoshop软件修改网站图片,安装ps软件后出现"不能完成要求,因为注册信息丢失或无效",这是因为PS的注册信息没有写入到
  • 什么是手机域名手机域名又叫Mobi域名。Mobi是被ICANN批准,并致力于将internet内容传送到移动装置,例如智能电话,PDA,手机等的专属域名
  • 针对于网站中的一些特殊页面,WordPress提供专题页面功能。通过新建WordPress 专题页面,可以让我们在做网站中,制作一些特殊的网页版面。例如,
  • 在课程我们讲到,我们在建站时,可以建立页面和分类目录,然后在网站导航上调用页面与分类目录。更换页面的顺序,我们可以在后台修改每个页面的排