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ó 522 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 ^^

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/

Tạo trang đăng nhập hoàn toàn mới cho wordpress
5 (100%) 1 vote
  • Bình luận
Có thể bạn quan tâm
x