当前位置：模板系 > 【WordPress教程】添加前台漂亮注册页面

【WordPress教程】添加前台漂亮注册页面

作者 : 觅站网本文共15097个字，预计阅读时间需要38分钟发布时间： 2021-01-28 共260人阅读

1030

620

620

620

620

625

也想出现在这里？联系我们吧

教程开始

1.新建一个名为register.php的文件并添加以下代码放到你主题目录的pages文件夹下

<?php
//下面这一句是必须的，表示当前模板的名称
/*Template Name: Register*/
	
//如果用户已经登陆那么跳转到首页
if (is_user_logged_in()){
  //重定向浏览器
  wp_safe_redirect( get_option('home') );
  //确保重定向后，后续代码不会被执行
  exit;
}
	
//获取注册页面提交时候的表单数据
$redirect_to = sanitize_user( $_REQUEST['redirect_to'] );
if( !empty($_POST['csyor_reg']) ) {
  $error = '';
  $sanitized_user_login = sanitize_user( $_POST['user_login'] );
  $user_website = sanitize_user( $_POST['website'] );
  $user_description = sanitize_user( $_POST['description'] );
  $user_nickname = sanitize_user( $_POST['nickname'] );
  $user_email = apply_filters( 'user_registration_email', $_POST['user_email'] );
  $comment_aaa      	  = ( isset($_POST['aaa']) ) ? trim($_POST['aaa']) : '0';
  $comment_bbb          = ( isset($_POST['bbb']) ) ? trim($_POST['bbb']) : '0';
  $comment_subab        = ( isset($_POST['subab']) ) ? trim($_POST['subab']) : '0';
	
  // 验证邮箱
  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>该电子邮件地址已经被注册，请换一个。';
  }
	
  // 验证用户名
  elseif ( $sanitized_user_login == '' ) {
    $error .= '<strong>错误：</strong><br>请输入登陆账号。';
  } elseif ( !preg_match("/^[a-zA-Z0-9_]{4,16}$/",$sanitized_user_login) ) {
    $error .= '<strong>错误：</strong><br>登陆账号只能包含字母、数字、下划线，长度4到16位。';
    $sanitized_user_login = '';
  } elseif ( username_exists( $sanitized_user_login ) ) {
    $error .= '<strong>错误：</strong><br>该用户名已被注册，请再选择一个。';
  }
%0gged_in()) {
      //注册成功发送邮件通知用户
      $to = $user_email;
      $subject = '您在 [' . get_option("blogname") . '] 的注册已经成功';
      %head>
	  <body>
	  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="vi_box">
      <div class="logo">
<img class="shang_logo animated fadeInUpBig" src="<?php%20echo%20get_template_directory_uri();%20?>/img/logo.png" height="40" alt="mrhee"></div>
<?php if(!empty($error)) {
	  //输出错误提示信息
	  echo '<p class="iblue">'.$error.'</p>';
	}
	if (!is_user_logged_in()) { ?>
  <form name="registerform" method="post" action="#">
		<input type="text" placeholder="用户名"  name="user_login" id="user_login" tabIndex="2" value="<?php if(!empty($sanitized_user_login)) echo $sanitized_user_login; ?>" required>
		
		<hr class="hr15">
		 <div class="col-xs-pass1">
		<input id="user_pwd1" placeholder="密码"  type="password" tabindex="3" name="user_pass"  required>
           </div> <div class="col-xs-pass2">
			<input id="user_pwd2"   placeholder="重复密码" type="password" tabindex="4"  name="user_pass2"  required></div>
				<hr class="hr15">
				<input type="text" placeholder="邮箱"  name="user_email" id="user_email" tabIndex="1" value="<?php if(!empty($user_email)) echo $user_email; ?>" required>
					<hr class="hr15">
					<input id="nickname" placeholder="昵称" type="text" tabindex="5"  name="nickname" />
		<hr class="hr15">
					<input id="website" placeholder="网站" type="text" tabindex="6"  name="website" />
				
							<hr class="hr15">       

							<div class="col-xs-yz">
							<?php $aaa=rand(1,9); $bbb=rand(1,9); ?>
							<?php echo $aaa; ?>+<?php echo $bbb; ?>=
	<input name="aaa" value="<?php echo $aaa; ?>" type="hidden" />
	<input name="bbb" value="<?php echo $bbb; ?>" type="hidden" />
</div>

<div class="col-xs-js">
<input  type="text" name="subab" id="subab" tabindex="8"  placeholder="计算结果" required></div>
		<hr class="hr15">
	<input type="submit" name="wp-submit"  id="wp-submit"  style="width:100%;"  tabindex="7" value="注册" />
	<input type="hidden" name="csyor_reg" value="ok" />
	<input type="hidden" name="redirect_to" value="<?php echo $redirect_to; ?>"/>
        <hr class="hr20">
        <hr class="new">
        <div class="row push">
          <div class="col-xs-btn">
            <a href="<?php%20echo%20home_url()%20?>" class="btn btn-sm btn-danger btn-block">
             返回首页</a>
          </div>
          <div class="col-xs-btn">
            <a href="<?php%20echo%20home_url()%20?>/password" class="btn btn-sm btn-success btn-block">
             忘记密码</a>
          </div>
        </div>      <br>
      </form>
	  	<?php 
         } else {
	   echo 'alert("您已注册成功，并已登录！")';
	 }
	?>
	
		
	
</div>  <?php endwhile; else: ?>
  <?php endif; ?>
 

<canvas height="100%" width="100%" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 1;"  id="canvas"></canvas>
<script>
var canvas,
	ctx,
	width,
	height,
	size,
	lines,
	tick;

function line() {
	this.path = [];
	this.speed = rand(10, 20);
	this.count = randInt(10, 30);
	this.x = width / 2, +1;
	this.y = height / 2 + 1;
	this.target = {
		x: width / 2,
		y: height / 2
	};
	this.dist = 0;
	this.angle = 0;
	this.hue = tick / 5;
	this.life = 1;
	this.updateAngle();
	this.updateDist();
}

line.prototype.step = function(i) {
	this.x += Math.cos(this.angle) * this.speed;
	this.y += Math.sin(this.angle) * this.speed;

	this.updateDist();

	if (this.dist < this.speed) {
		this.x = this.target.x;
		this.y = this.target.y;
		this.changeTarget();
	}

	this.path.push({
		x: this.x,
		y: this.y
	});
	if (this.path.length > this.count) {
		this.path.shift();
	}

	this.life -= 0.001;

	if (this.life <= 0) {
		this.path = null;
		lines.splice(i, 1);
	}
};

line.prototype.updateDist = function() {
	var dx = this.target.x - this.x,
		dy = this.target.y - this.y;
	this.dist = Math.sqrt(dx * dx + dy * dy);
}

line.prototype.updateAngle = function() {
	var dx = this.target.x - this.x,
		dy = this.target.y - this.y;
	this.angle = Math.atan2(dy, dx);
}

line.prototype.changeTarget = function() {
	var randStart = randInt(0, 3);
	switch (randStart) {
		case 0: // up
			this.target.y = this.y - size;
			break;
		case 1: // right
			this.target.x = this.x + size;
			break;
		case 2: // down
			this.target.y = this.y + size;
			break;
		case 3: // left
			this.target.x = this.x - size;
	}
	this.updateAngle();
};

line.prototype.draw = function(i) {
	ctx.beginPath();
	var rando = rand(0, 10);
	for (var j = 0, length = this.path.length; j < length; j++) {
		ctx[(j === 0) ? 'moveTo' : 'lineTo'](this.path[j].x + rand(-rando, rando), this.path[j].y + rand(-rando, rando));
	}
	ctx.strokeStyle = 'hsla(' + rand(this.hue, this.hue + 30) + ', 80%, 55%, ' + (this.life / 3) + ')';
	ctx.lineWidth = rand(0.1, 2);
	ctx.stroke();
};

function rand(min, max) {
	return Math.random() * (max - min) + min;
}

function randInt(min, max) {
	return Math.floor(min + Math.random() * (max - min + 1));
};

function init() {
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	size = 30;
	lines = [];
	reset();
	loop();
}

function reset() {
	width = Math.ceil(window.innerWidth / 2) * 2;
	height = Math.ceil(window.innerHeight / 2) * 2;
	tick = 0;

	lines.length = 0;
	canvas.width = width;
	canvas.height = height;
}

function create() {
	if (tick % 10 === 0) {
		lines.push(new line());
	}
}

function step() {
	var i = lines.length;
	while (i--) {
		lines[i].step(i);
	}
}

function clear() {
	ctx.globalCompositeOperation = 'destination-out';
	ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';
	ctx.fillRect(0, 0, width, height);
	ctx.globalCompositeOperation = 'lighter';
}

function draw() {
	ctx.save();
	ctx.translate(width / 2, height / 2);
	ctx.rotate(tick * 0.001);
	var scale = 0.8 + Math.cos(tick * 0.02) * 0.2;
	ctx.scale(scale, scale);
	ctx.translate(-width / 2, -height / 2);
	var i = lines.length;
	while (i--) {
		lines[i].draw(i);
	}
	ctx.restore();
}

function loop() {
	requestAnimationFrame(loop);
	create();
	step();
	clear();
	draw();
	tick++;
}

function onresize() {
	reset();
}

window.addEventListener('resize', onresize);

init();
</script>




</body>
</html>
<audio autoplay="autoplay">
<source src="http://p2.music.126.net/pOH2QXwQc_7IX4l2sB-iSA==/7954966629620463.mp3" type="audio/mpeg">
</audio>

2.新建一个名为reg.css的css文件并添加以下代码放到你主题目录的css文件中

*{

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -box-sizing: border-box;

    padding:0;

    margin:0;

    list-style:none;

    box-sizing: border-box;

}

body,html{

    height:100%;

    overflow-x:hidden;

}

body{

    background:url(http://img.bizhi.sogou.com/images/2013/12/20/459331.jpg) no-repeat center;

    background-size: cover;

	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

}

a{

    color:#27A9E3;

    text-decoration:none;

    cursor:pointer;

}

.iblue {

    margin: 20px 0px;

    padding: 15px 15px 15px 70px;

    font-size: 12px;

    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);

    border-radius: 5px;

    background: url(../img/info.png) no-repeat 20px 20px #e4eff9;

    border: 1px solid #9acbe8;

    color: #5d93b2;

}


.qrimg {

    display: block;

    width: 100%;

    border: 1px solid #ccc;

}


.vi_box{

    margin: 5% auto 10% auto;

    width: 90%;

    padding: 40px;

    background-color: #ffffff;

	border-radius: 10px;

}


.logo {

    display: block;

    text-align: center;

     margin: 0 auto 20px auto;

}


@media screen and (min-width: 768px){

	.vi_box {

		 width: 20%;

	}

}


a.logo{

    display: block;

    height: 58px;

    width: 167px;

    margin: 0 auto 30px auto;

    background-size: 167px 42px;

}

.message {

    margin: 10px 0 0 -58px;

    padding: 18px 10px 18px 60px;

    background: #27A9E3;

    color: #fff;

    font-size: 16px;

}


#darkbannerwrap {

    background: url(/Style/images/login/aiwrap.png);

    width: 18px;

    height: 10px;

    margin: 0 0 20px -58px;

    position: relative;

}


input[type=text],

input[type=file],

input[type=password],

input[type=email], select {

    border: 1px solid #e4e4e4;

    vertical-align: middle;

    border-radius: 30px;

    height: 50px;

    padding: 0px 20px;

    font-size: 14px;

    color: #555555;

    outline:none;

    width:100%;

	border-radius: 30px;

}

input[type=text]:focus,

input[type=file]:focus,

input[type=password]:focus,

input[type=email]:focus, select:focus {

    border: 1px solid #27A9E3;

	border-radius: 30px;

}


input[type=submit],

input[type=button]{

    display: inline-block;

    vertical-align: middle;

    padding: 12px 24px;

    margin: 0px;

    font-size: 20px;

    line-height: 24px;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    cursor: pointer;

    color: #ffffff;

    background-color: #5bc0de;

    border-radius: 30px;

    border: none;

    -webkit-appearance: none;

    outline:none;

    width:100%;

	border-radius: 30px;

}

hr.hr15 {

    height: 15px;

    border: none;

    margin: 0px;

    padding: 0px;

    width: 100%;

}

hr.hr20 {

    height: 20px;

    border: none;

    margin: 0px;

    padding: 0px;

    width: 100%;

}

hr.new{

	 margin-top: 20px;

    margin-bottom: 20px;

    border: 0;

    border-top: 1px solid #eee;

}


.copyright{

    font-size:14px;

    color:rgba(255,255,255,0.85);

    display:block;

    position:absolute;

    bottom:15px;

    right:15px;

}


.chk_3 {

    display: none;

}


.chk_3 + label {

	background-color: #fafbfa;

	/* padding: 9px; */

	border-radius: 50px;

	display: inline-block;

	position: relative;

	margin-right: 5px;

	-webkit-transition: all 0.1s ease-in;

	transition: all 0.1s ease-in;

	width: 40px;

	height: 17px;

}


.chk_3  + label:after {

	content: ' ';

	position: absolute;

	top: 0;

	-webkit-transition: box-shadow 0.1s ease-in;

	transition: box-shadow 0.1s ease-in;

	left: 0;

	width: 100%;

	height: 100%;

	border-radius: 100px;

	box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4);

}


.chk_3  + label:before {

	content: ' ';

	position: absolute;

	background: white;

	top: 1px;

	left: 1px;

	z-index: 999999;

	width: 18px;

	-webkit-transition: all 0.1s ease-in;

	transition: all 0.1s ease-in;

	height: 17px;

	border-radius: 100px;

	box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3);

}


.chk_3:active + label:after {

	box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;

}


.chk_3:active + label:before {

	width: 37px;

}


.chk_3:checked:active + label:before {

	width: 37px;

	left: 20px;

}


.chk_3  + label:active {

	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

}


.chk_3:checked + label:before {

	content: ' ';

	position: absolute;

	left: 26px;

	border-radius: 100px;

}


.chk_3:checked + label:after {

	content: ' ';

	font-size: 1.5em;

	position: absolute;

	background: #4cda60;

	box-shadow: 0 0 1px #4cda60;

}


.bg-primary {

	color:#fff;

	background-color:#337ab7

}

a.bg-primary:focus,a.bg-primary:hover {

	background-color:#286090

}

.bg-success {

	background-color:#dff0d8

}

a.bg-success:focus,a.bg-success:hover {

	background-color:#c1e2b3

}

.bg-info {

	background-color:#d9edf7

}

a.bg-info:focus,a.bg-info:hover {

	background-color:#afd9ee

}

.bg-warning {

	background-color:#fcf8e3

}

a.bg-warning:focus,a.bg-warning:hover {

	background-color:#f7ecb5

}

.bg-danger {

	background-color:#f2dede

}

a.bg-danger:focus,a.bg-danger:hover {

	background-color:#e4b9b9

}


.row {

	margin-right:-15px;

	margin-left:-15px

}

.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {

	position:relative;

	min-height:1px;

	padding-right:0px;

	padding-left:0px

}

.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {

	float:left

}

.col-xs-12 {

	width:100%

}

.col-xs-11 {

	width:91.66666667%

}

.col-xs-10 {

	width:83.33333333%

}

.col-xs-9 {

	width:75%

}

.col-xs-8 {

	width:66.66666667%

}

.col-xs-7 {

	width:58.33333333%

}

.col-xs-6 {

	width:50%

}

.col-xs-5 {

	width:41.66666667%

}

.col-xs-4 {

	width:33.33333333%

}

.col-xs-3 {

	width:25%

}

.col-xs-2 {

	width:16.66666667%

}

.col-xs-1 {

	width:8.33333333%

}


.col-xs-btn {

	position:relative;

	min-height:1px;

	padding-right:20px;

	padding-left:20px

}

.col-xs-btn {

	float:left

}

.col-xs-btn {

	width:50%

}


.col-xs-pass1 {

	position:relative;

	min-height:1px;

	padding-right:5px;


}

.col-xs-pass1 {

	float:left

}

.col-xs-pass1 {

	width:50%

}


.col-xs-pass2 {

	position:relative;

	min-height:1px;


	padding-left:5px

}

.col-xs-pass2 {

	float:left

}

.col-xs-pass2 {

	width:50%

}


.col-xs-yz {

	position:relative;

	min-height:1px;

	padding-right:10px;

text-align:center;

	letter-spacing:10px;

	font-size:200%;

	font-family: "Microsoft Yahei";

	margin: 1.5% auto 0px auto;

	color:#f3a5a5;

}

.col-xs-yz {

	float:left

}

.col-xs-yz {

	width:50%

}


.col-xs-js {

	position:relative;

	min-height:1px;

	padding-right:0px;

	padding-left:10px


}

.col-xs-js {

	float:left

}

.col-xs-js {

	width:50%

}


.btn {

	display:inline-block;

	padding:6px 12px;

	margin-bottom:0;

	font-size:14px;

	font-weight:400;

	line-height:1.42857143;

	text-align:center;

	white-space:nowrap;

	vertical-align:middle;

	-ms-touch-action:manipulation;

	touch-action:manipulation;

	cursor:pointer;

	-webkit-user-select:none;

	-moz-user-select:none;

	-ms-user-select:none;

	user-select:none;

	background-image:none;

	border:1px solid transparent;

	border-radius:4px

}

.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus {

	outline:thin dotted;

	outline:5px auto -webkit-focus-ring-color;

	outline-offset:-2px

}

.btn.focus,.btn:focus,.btn:hover {

	color:#333;

	text-decoration:none

}

.btn.active,.btn:active {

	background-image:none;

	outline:0;

	-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);

	box-shadow:inset 0 3px 5px rgba(0,0,0,.125)

}

.btn.disabled,.btn[disabled],fieldset[disabled] .btn {

	cursor:not-allowed;

	filter:alpha(opacity=65);

	-webkit-box-shadow:none;

	box-shadow:none;

	opacity:.65

}

a.btn.disabled,fieldset[disabled] a.btn {

	pointer-events:none

}

.btn-default {

	color:#333;

	background-color:#fff;

	border-color:#ccc

}

.btn-default.focus,.btn-default:focus {

	color:#333;

	background-color:#e6e6e6;

	border-color:#8c8c8c

}

.btn-default:hover {

	color:#333;

	background-color:#e6e6e6;

	border-color:#adadad

}

.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default {

	color:#333;

	background-color:#e6e6e6;

	border-color:#adadad

}

.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover {

	color:#333;

	background-color:#d4d4d4;

	border-color:#8c8c8c

}

.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default {

	background-image:none

}

.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover {

	background-color:#fff;

	border-color:#ccc

}

.btn-default .badge {

	color:#fff;

	background-color:#333

}

.btn-primary {

	color:#fff;

	background-color:#337ab7;

	border-color:#2e6da4

}

.btn-primary.focus,.btn-primary:focus {

	color:#fff;

	background-color:#286090;

	border-color:#122b40

}

.btn-primary:hover {

	color:#fff;

	background-color:#286090;

	border-color:#204d74

}

.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary {

	color:#fff;

	background-color:#286090;

	border-color:#204d74

}

.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover {

	col
}

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Start WordPress教程主题代码模板注册添加前台漂亮注册页面表单

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请不要用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"mobanxi.com",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性

模板系 » 【WordPress教程】添加前台漂亮注册页面

也想出现在这里？联系我们吧

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

发表回复取消回复

加入VIP免费获取全站资源

立即查看了解详情

会员特惠
签到
客服

直接说出您的需求！
切记！带上资源连接与问题！

工作时间: 9:30-21:30
更新
日历
全屏
投稿
赚钱

开通VIP 享更多特权，建议使用QQ登录

账号登录/注册

QQ登录