如何自定義wordpress 注冊(cè)頁(yè)面
2018-11-02 來(lái)源：學(xué)做網(wǎng)站論壇
使用wordpress 建網(wǎng)站，程序自帶有注冊(cè)頁(yè)面，但很難滿足我們自己建網(wǎng)站的需求。我們?cè)谧鼍W(wǎng)站時(shí)，如何自定義wordpress 注冊(cè)頁(yè)面呢？下面就是自定義wordpress 注冊(cè)頁(yè)面的方法。
先看下制作好的wordpress 注冊(cè)頁(yè)面的效果：
自定義wordpress 注冊(cè)頁(yè)面的步驟
第一步：新建一個(gè)HTML空白頁(yè)面，在HTML頁(yè)面中，粘貼以下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>注冊(cè)賬戶</h2>
<div class="txt">歡迎您注冊(cè)<?php bloginfo('name'); ?> 【官網(wǎng)】會(huì)員，如果您已擁有賬戶，則可在此 <a href="<?php echo get_option('home'); ?>/">首頁(yè)登錄</a></div>
</div>
<form name="registerform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-reg">
<p class="zc00">
<label for="user_login">用戶昵稱： <input type="text" name="user_login" id="user_login" class="input" value="<?php if(!empty($sanitized_user_login)) echo $sanitized_user_login; ?>" size="20" /> <span style="color:#900">長(zhǎng)度為6~16位字符</span>
</label>
</p>
<p class="zc00">
<label for="user_pwd1">設(shè)置密碼： <input id="user_pwd1" class="input" type="password" tabindex="21" size="25" value="" name="user_pass" /> <span style="color:#900">長(zhǎng)度為6~16位字符，可以為“數(shù)字/字母/中劃線/下劃線”組成</span>
</label>
</p><p class="zc00">
<label for="user_pwd2">確認(rèn)密碼： <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">電子郵件： <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="立即注冊(cè)" />
</p>
</form>
<?php } else {
echo '<p class="ludou-error">您已注冊(cè)成功，并已登錄！<a style="color:red;" href="/">返回首頁(yè)</a></p>';
} ?></div>
? <div class="clear h10"></div>
</div>
<?php get_footer();?>
第二步：將第一步的HTML頁(yè)面進(jìn)行保存，取名為reg.php;
第三步：使用以下的PHP代碼替換掉reg.php中的
<?php get_header();?>
，作用是為了驗(yàn)證用戶填寫的信息。
<?php
/*
Template Name: 網(wǎng)站注冊(cè)頁(yè)面
* 代碼來(lái)源：學(xué)做網(wǎng)站論壇 https://www.xuewangzhan.com/
*/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>錯(cuò)誤</strong>：請(qǐng)輸入用戶名。<br />';
} elseif ( ! validate_username( $sanitized_user_login ) ) {
$error .= '<strong>錯(cuò)誤</strong>：此用戶名包含無(wú)效字符，請(qǐng)輸入有效的用戶名<br />。';
$sanitized_user_login = '';
} elseif ( username_exists( $sanitized_user_login ) ) {
$error .= '<strong>錯(cuò)誤</strong>：該用戶名已被注冊(cè)，請(qǐng)?jiān)龠x擇一個(gè)。<br />';
}
// Check the e-mail address
if ( $user_email == '' ) {
$error .= '<strong>錯(cuò)誤</strong>：請(qǐng)?zhí)顚戨娮余]件地址。<br />';
} elseif ( ! is_email( $user_email ) ) {
$error .= '<strong>錯(cuò)誤</strong>：電子郵件地址不正確。！<br />';
$user_email = '';
} elseif ( email_exists( $user_email ) ) {
$error .= '<strong>錯(cuò)誤</strong>：該電子郵件地址已經(jīng)被注冊(cè)，請(qǐng)換一個(gè)。<br />';
}// Check the password
if(strlen($_POST['user_pass']) < 6)
$error .= '<strong>錯(cuò)誤</strong>：密碼長(zhǎng)度至少6位!<br />';
elseif($_POST['user_pass'] != $_POST['user_pass2'])
$error .= '<strong>錯(cuò)誤</strong>：兩次輸入的密碼必須一致!<br />';if($error == '') {
$user_id = wp_create_user( $sanitized_user_login, $_POST['user_pass'], $user_email );
if ( ! $user_id ) {
$error .= sprintf( '<strong>錯(cuò)誤</strong>：無(wú)法完成您的注冊(cè)請(qǐng)求... 請(qǐng)聯(lián)系<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;
// 自動(dòng)登錄
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注冊(cè)頁(yè)面的樣式。
<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>
第五步：將所有的改動(dòng)全部保存。然后在wordpress網(wǎng)站后臺(tái)，新建一個(gè)頁(yè)面，標(biāo)題寫“用戶注冊(cè)”，模板選擇“網(wǎng)站注冊(cè)頁(yè)面”，然后創(chuàng)建，這樣一個(gè)自定義的wordpress注冊(cè)頁(yè)面就制作好了。結(jié)合制作WP網(wǎng)站的登錄功能，就可以完美的給自己的網(wǎng)站制作出注冊(cè)和登錄頁(yè)面了。
下面是完整的wordpress注冊(cè)頁(yè)面的代碼：
<?php
/*
Template Name: 網(wǎng)站注冊(cè)頁(yè)面
* 代碼來(lái)源：學(xué)做網(wǎng)站論壇 https://www.xuewangzhan.com/
*/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>錯(cuò)誤</strong>：請(qǐng)輸入用戶名。<br />';
} elseif ( ! validate_username( $sanitized_user_login ) ) {
$error .= '<strong>錯(cuò)誤</strong>：此用戶名包含無(wú)效字符，請(qǐng)輸入有效的用戶名<br />。';
$sanitized_user_login = '';
} elseif ( username_exists( $sanitized_user_login ) ) {
$error .= '<strong>錯(cuò)誤</strong>：該用戶名已被注冊(cè)，請(qǐng)?jiān)龠x擇一個(gè)。<br />';
}
// Check the e-mail address
if ( $user_email == '' ) {
$error .= '<strong>錯(cuò)誤</strong>：請(qǐng)?zhí)顚戨娮余]件地址。<br />';
} elseif ( ! is_email( $user_email ) ) {
$error .= '<strong>錯(cuò)誤</strong>：電子郵件地址不正確。！<br />';
$user_email = '';
} elseif ( email_exists( $user_email ) ) {
$error .= '<strong>錯(cuò)誤</strong>：該電子郵件地址已經(jīng)被注冊(cè)，請(qǐng)換一個(gè)。<br />';
}// Check the password
if(strlen($_POST['user_pass']) < 6)
$error .= '<strong>錯(cuò)誤</strong>：密碼長(zhǎng)度至少6位!<br />';
elseif($_POST['user_pass'] != $_POST['user_pass2'])
$error .= '<strong>錯(cuò)誤</strong>：兩次輸入的密碼必須一致!<br />';if($error == '') {
$user_id = wp_create_user( $sanitized_user_login, $_POST['user_pass'], $user_email );
if ( ! $user_id ) {
$error .= sprintf( '<strong>錯(cuò)誤</strong>：無(wú)法完成您的注冊(cè)請(qǐng)求... 請(qǐng)聯(lián)系<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;
// 自動(dòng)登錄
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>注冊(cè)賬戶</h2>
<div class="txt">歡迎您注冊(cè)<?php bloginfo('name'); ?> 【官網(wǎng)】會(huì)員，如果您已擁有賬戶，則可在此 <a href="<?php echo get_option('home'); ?>/">首頁(yè)登錄</a></div>
</div>
<form name="registerform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-reg">
<p class="zc00">
<label for="user_login">用戶昵稱： <input type="text" name="user_login" id="user_login" class="input" value="<?php if(!empty($sanitized_user_login)) echo $sanitized_user_login; ?>" size="20" /> <span style="color:#900">長(zhǎng)度為6~16位字符</span>
</label>
</p>
<p class="zc00">
<label for="user_pwd1">設(shè)置密碼： <input id="user_pwd1" class="input" type="password" tabindex="21" size="25" value="" name="user_pass" /> <span style="color:#900">長(zhǎng)度為6~16位字符，可以為“數(shù)字/字母/中劃線/下劃線”組成</span>
</label>
</p><p class="zc00">
<label for="user_pwd2">確認(rèn)密碼： <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">電子郵件： <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="立即注冊(cè)" />
</p>
</form>
<?php } else {
echo '<p class="ludou-error">您已注冊(cè)成功，并已登錄！<a style="color:red;" href="/">返回首頁(yè)</a></p>';
} ?></div>
? <div class="clear h10"></div>
</div>
<?php get_footer();?>
標(biāo)簽： 代碼 電子郵件 建網(wǎng)站 網(wǎng)站制作
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
最新資訊
熱門推薦