Tạo trang đăng nhập và đăng ký thành viên bằng short code Flatsome

Để tạo trang đăng nhập hoặc đăng ký thành viên chúng ta hay dùng Plugin , Hôm nay tôi gới thiệu cho bạn Tạo trang đăng nhập và đăng ký thành viên bằng short code Flatsome

đăng ký thành viên bằng short code

Tạo trang đăng nhập và đăng ký thành viên bằng short code 

Tạo Short Đăng nhập cho Flatsome 

Đầu tiên các bạn cần mở file funcition.php trong thư mục theme mà bạn đang sử dụng lên. Sao chép toàn bộ code bên dưới rồi dán vào file và lưu lại.

/*tao short đăng nhập */
add_shortcode( 'dangnhap', 'show_dangnhap' );
function show_dangnhap() { ?>
<?php
global $hrm_options;
if(is_user_logged_in()) {
  if(is_super_admin()) { ?>
    <script>
      window.location.href = '<?php echo home_url('dashboard'); ?>';
    </script><?php
  } else { ?>
    <script>
      window.location.href = '<?php echo home_url('/'); ?>';
    </script><?php
  }
}
get_header(); ?>
	<div class="login">
		<div class="login-title">
			<h3>
				<?php
					$login  = (isset($_GET['login']) ) ? $_GET['login'] : 0;
					if ( $login === "failed" ) {
					    echo 'Sai tài khoản hoặc mật khẩu.';
					} elseif ( $login === "empty" ) {
					    echo 'Tài khoản và mật khẩu không thể bỏ trống';
					} elseif ( $login === "false" ) {
					    echo 'Bạn đã thoát ra.';
					} else {
							echo 'Đăng nhập';
					}
              	?>
			</h3>
		</div>
		<div>
			
			<div class="mod-login clearfix">
				<div class="mod-login-col1 clearfix">
					<?php
                        $args = array(
							'redirect'       => site_url( $_SERVER['REQUEST_URI'] ),
							'form_id'        => 'dangnhap', //Để dành viết CSS
							'label_username' => __( 'Tên tài khoản' ),
							'label_password' => __( 'Mật khẩu' ),
							'label_remember' => __( 'Ghi nhớ' ),
							'label_log_in'   => __( 'Đăng nhập' ),
                        );
                      	wp_login_form($args);
                      ?>
                      <div class="forgot">
                      	<a href="<?php echo home_url('/reset-password') ?>">Quên mật khẩu ?</a>
                      </div>
				</div>
			</div>
			
		</div>
	</div>
<?php
}

Đoạn code trên ta được 1 short là [dangnhap]

Tạo trang đăng nhập và đăng ký thành viên bằng short code Flatsome

Tương tự ta tạo Short Đăng ký cho Flatsome 

/*tao short Đăng ký  */
add_shortcode( 'dangky', 'show_dangky' );
function show_dangky() { ?>
<?php
global $hrm_options;

if(is_user_logged_in()) {
	wp_redirect( home_url() );
}
session_start();
$check_capt = '';
get_header(); ?>
<div class="login register">
	<div class="login-title">
		<h3>
			<?php 
			$err = ''; 
			$success = ''; 
			global $wpdb, $PasswordHash, $current_user, $user_ID; 
			if(isset($_POST['task']) && $_POST['task'] == 'register' ) {
				if ($_SESSION['answer'] == $_POST['answer'] ) {

					$pwd1 = $wpdb->escape(trim($_POST['pwd1']));
					$pwd2 = $wpdb->escape(trim($_POST['pwd2']));
					$email = $wpdb->escape(trim($_POST['email']));
					$username = $wpdb->escape(trim($_POST['username']));
					if( $email == "" || $pwd1 == "" || $pwd2 == "" || $username == "") {
						$err = 'Vui lòng không bỏ trống những thông tin bắt buộc!';
					} else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
						$err = 'Địa chỉ Email không hợp lệ!.';
					} else if(email_exists($email) ) {
						$err = 'Địa chỉ Email đã tồn tại!.';
					} else if($pwd1 <> $pwd2 ){
						$err = '2 Password không giống nhau!.';
					} else {
						$user_id = wp_insert_user( 
							array (
								'user_pass' => apply_filters('pre_user_user_pass', $pwd1), 
								'user_login' => apply_filters('pre_user_user_login', $username), 
								'user_email' => apply_filters('pre_user_user_email', $email), 
								'role' =>'contributor' 
							) 
						);
						if( is_wp_error($user_id) ) {
							$err = 'Lỗi khởi tạo người dùng';
						} else {
							do_action('user_register', $user_id);
							$success = 'Bạn đã đăng ký thành công!';
							$current_user = get_user_by( 'id', $user_id );
								// set the WP login cookie
							$secure_cookie = is_ssl() ? true : false;
							wp_set_auth_cookie( $user_id, true, $secure_cookie ); ?>
							<script>
								alert('Đăng ký thành công');
								window.location.href = '<?php echo home_url('/'); ?>';
								</script><?php
								exit;
							}
						}
					}
					else {
						$check_capt = 'Sai captcha. Vui lòng nhập lại';
						$digit1 = mt_rand(1,20);
						$digit2 = mt_rand(1,20);
						if( mt_rand(0,1) === 1 ) {
							$math = "$digit1 + $digit2";
							$_SESSION['answer'] = $digit1 + $digit2;
						} else {
							$math = "$digit1 - $digit2";
							$_SESSION['answer'] = $digit1 - $digit2;
						}
					}
				} else {
					$digit1 = mt_rand(1,20);
					$digit2 = mt_rand(1,20);
					if( mt_rand(0,1) === 1 ) {
						$math = "$digit1 + $digit2";
						$_SESSION['answer'] = $digit1 + $digit2;
					} else {
						$math = "$digit1 - $digit2";
						$_SESSION['answer'] = $digit1 - $digit2;
					}
				}

				if (!empty($err)) { 
					echo $err;
				
					$digit1 = mt_rand(1,20);
					$digit2 = mt_rand(1,20);
					if( mt_rand(0,1) === 1 ) {
						$math = "$digit1 + $digit2";
						$_SESSION['answer'] = $digit1 + $digit2;
					} else {
						$math = "$digit1 - $digit2";
						$_SESSION['answer'] = $digit1 - $digit2;
					}

				} else {
					echo 'Đăng ký';
				}
				if(! empty($success) ) :
					?>
					<script>
						alert('Đăng ký thành công');
						window.location.href = '<?php echo home_url('/dang-nhap'); ?>';
						</script><?php
					endif;
					?>
				</h3>
				<div class="login-other">
					
				</div>
			</div>
			<div>
				<form class="form-horizontal" method="post" role="form">
					<div class="mod-login clearfix">
						<div class="mod-login-col1 clearfix">
							<?php if ( $check_capt ) { ?>
								<div class="alert alert-danger" role="alert"><?php echo $check_capt ?></div>
							<?php } ?>
							<div class="mod-input mod-login-input-email mod-input-id">
								<label>Tên đăng nhập</label>
								<input type="text" placeholder="Vui lòng nhập tên tài khoản" name="username" id="username" value="<?php echo ($_POST['username'])? trim($_POST['username']) : '' ?>" required />
								<b></b>
								<span></span>
							</div>

							<div class="mod-input mod-input-password mod-login-input-password mod-input-password">
								<label>Mật khẩu</label>
								<input type="password" name="pwd1" id="pwd1" placeholder="<?php _e('Mật khẩu','hrm'); ?>" value="<?php echo ($_POST['pwd1'])? trim($_POST['pwd1']) : '' ?>" required />
								<b></b>
								<span></span>
							</div>

							<div class="mod-input mod-input-password mod-login-input-re-password mod-input-re-password">
								<label>Nhập lại mật khẩu</label>
								<input type="password" name="pwd2" id="pwd2" placeholder="<?php _e('Nhập lại mật khẩu','hrm'); ?>" value="<?php echo ($_POST['pwd2'])? trim($_POST['pwd2']) : '' ?>" required />
								<b></b>
								<span></span>
								<div class="mod-input-password-icon"></div>
							</div>
							<!---div class="mod-input mod-input-captcha">
								<label--><!---?php echo $math; ?> = ?</label>
								<input id="captcha" name="answer" type="number" />
							</div--->
						</div>
						<div class="mod-login-col2 clearfix">
							<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>
							<div class="mod-input mod-login-input-email mod-input-email">
								<label>Địa chỉ email</label>
								<input type="email" name="email" id="email" placeholder="Email" value="<?php echo ($_POST['email'])? trim($_POST['email']) : '' ?>" required />
								<b></b>
								<span></span>
							</div>
							<div class="mod-login-btn">
								<button type="submit" class="next-btn next-btn-primary next-btn-large">ĐĂNG KÍ</button>
								<input type="hidden" name="task" value="register" />
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script>
			var password = document.getElementById("pwd1"), confirm_password = document.getElementById("pwd2");

			function validatePassword(){
				if(password.value != confirm_password.value) {
					confirm_password.setCustomValidity("Mật khẩu không trùng khớp");
				} else {
					confirm_password.setCustomValidity('');
				}
			}
			password.onchange = validatePassword;
			confirm_password.onkeyup = validatePassword;
		</script>
<?php
}

Tương tự đoạn code trên cho ta được 1 short [dangky]

Sau khi thao tác xong ta vào trang tạo trang tên Thành Viên

bỏ 2 short vào nhé

Ok xong rồi nhé

ah còn chút css nữa là đẹp liền

/*trang đang nhặp*/
.entry-content {
    display: flex;
}
.login {
    width: 49%;
    padding: 10px;
}

Xem kết quả và thử luôn chức năng nhé.

Chúc bạn thành công !

Cre: flatsome.xyz

Posted in Flatsome
Write a comment