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
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino hosting
- iNet
- Nước ngoài thì Vultr
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/
- Bình luận
