Tạo trang đăng nhập hoàn toàn mới cho wordpress

Cập nhật lần cuối 04/12/2014 by trong WordPress vào 04/12/2014 có 7393 Views

Như trong bài viết Tùy biến trang đăng nhập wordpress: login_headerurl and login_headertitle mình đã chỉ ra cách để thay đổi logo, link tại trang đăng nhập mặc định của wordpress.

Đến bài này. Một phong cách hoàn toàn mới. Mình sẽ chỉ ra cách để các bạn tạo ra 1 trang login hoàn toàn mới. Để phù hợp với website của bạn ^^

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

Nhìn hình đã kích thích chưa bạn ^^. Bắt đầu nhé

Tạo template page login

1. Các bạn tạo file  page-login.php với nội dung như sau

<?php 
/*
 * Template Name: Login Page
 */?>
<?php get_header();?>
<?php while (have_posts()):the_post();?>
 <div class="content_main login">
 <div class="theme_gallery about_us">
 <div class="theme_gallery_title">
 <h1><?php the_title();?></h1>
 </div>
 <div class="category_description"><?php the_content(); ?> </div>
 <div class="login-form">
 </div>
 </div>
 </div>
 <!-- End gallery -->
<?php endwhile;?>
<?php get_footer();?> 

2. Tạo page login trong admin

bạn vào admin-> thêm page mới như trong hình

 

The Login Form

Thêm đoạn code sau vào nội dung file page-login.php vừa bạn tạo. Vào chỗ nào bạn muốn hiển thị form

$args = array( 
 'redirect' => home_url(), 
 'id_username' => 'user', 
 'id_password' => 'pass', 
 ) 
 ;?> 
 <?php wp_login_form( $args ); ?> 

Validation

1. Redirect về trang login chúng ta tạo.

Thêm đoạn code sau vào file functions.php trong theme của bạn để khi user vào /wp-admin hay /wp-login sẽ chuyển đến trang /login chúng ta tạo

//Function login page
function redirect_login_page() {
$login_page = home_url( '/login/' );
$page_viewed = basename($_SERVER['REQUEST_URI']);

if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
wp_redirect($login_page);
exit;
}
}
add_action('init','redirect_login_page'); 

2. báo lỗi khi đăng nhập không thành công hoặc đăng xuất

Thêm đoạn code này vào file functions.php trong theme của bạn

//Login Failed
function login_failed() {
$login_page = home_url( '/login/' );
wp_redirect( $login_page . '?login=failed' );
exit;
}
add_action( 'wp_login_failed', 'login_failed' );
//Login failed pass or user
function verify_username_password( $user, $username, $password ) {
$login_page = home_url( '/login/' );
if( $username == "" || $password == "" ) {
wp_redirect( $login_page . "?login=empty" );
exit;
}
}
add_filter( 'authenticate', 'verify_username_password', 1, 3);
//Log Out
function logout_page() {
$login_page = home_url( '/login/' );
wp_redirect( $login_page . "?login=false" );
exit;
}
add_action('wp_logout','logout_page');

 

3. Thêm đoạn này vào chỗ bạn muốn hiển thị lỗi khi đăng nhập ko thành công (Trong trang page-login.php)

$login = (isset($_GET['login']) ) ? $_GET['login'] : 0;
 if ( $login === "failed" ) { 
 echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>'; 
 } elseif ( $login === "empty" ) { 
 echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>'; 
 } elseif ( $login === "false" ) { 
 echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>'; 
 }

Style CSS

Sau khi hoàn thành bạn style cho nó một chút. sẽ có kết quả như sau

 

Hoàn thành

1. File page-login.php

<?php 
/*
 * Template Name: Login Page
 */?>
<?php get_header();?>
<?php while (have_posts()):the_post();?>
  		<div class="content_main login">
  			<div class="theme_gallery about_us">
  				<div class="theme_gallery_title">
  					<h1><?php the_title();?></h1>
  				</div>
  				<div class="category_description"><?php the_content(); ?> </div>
  				<div class="login-form"> 
  				 
  				    <?php  
  				    $login  = (isset($_GET['login']) ) ? $_GET['login'] : 0;
  				    if ( $login === "failed" ) {  
					    echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';  
					} elseif ( $login === "empty" ) {  
					    echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';  
					} elseif ( $login === "false" ) {  
					    echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>';  
					}
				    $args = array(  
				        'redirect' => home_url(),   
				        'id_username' => 'user',  
				        'id_password' => 'pass',  
				       )   
				    ;?>  
				    <?php wp_login_form( $args ); ?>  
				 </div>
  			</div>
  		</div>
  		<!-- End gallery -->
<?php endwhile;?>
<?php get_footer();?>  		

 

2. Code thêm vào file functions.php

//Function login page
function redirect_login_page() { 
 $login_page = home_url( '/login/' ); 
 $page_viewed = basename($_SERVER['REQUEST_URI']); 
 
 if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { 
 wp_redirect($login_page); 
 exit; 
 } 
} 
add_action('init','redirect_login_page'); 
//Login Failed
function login_failed() { 
 $login_page = home_url( '/login/' ); 
 wp_redirect( $login_page . '?login=failed' ); 
 exit; 
} 
add_action( 'wp_login_failed', 'login_failed' ); 
//Login failed pass or user
function verify_username_password( $user, $username, $password ) { 
 $login_page = home_url( '/login/' ); 
 if( $username == "" || $password == "" ) { 
 wp_redirect( $login_page . "?login=empty" ); 
 exit; 
 } 
} 
add_filter( 'authenticate', 'verify_username_password', 1, 3); 
//Log Out
function logout_page() { 
 $login_page = home_url( '/login/' ); 
 wp_redirect( $login_page . "?login=false" ); 
 exit; 
} 
add_action('wp_logout','logout_page');

Chúc các bạn thành công ^^

Tham khảo: http://www.hongkiat.com/blog/wordpress-custom-loginpage/

4.7/5 - (4 votes)
  • Bình luận
Sản phẩm nổi bật của Toản
x