Trang chủ WordpressWordpress Development Tự code trang đăng nhập cho WordPress

Tự code trang đăng nhập cho WordPress

bởi Thạch Phạm
14 bình luận 5731 views
Khuyến mãi hosting

Trong WordPress đã có một trang đăng nhập chuẩn có sẵn với đường dẫn /wp-login.php, nghĩa là mỗi lần bạn muốn đăng nhập thì phải truy cập vào trang đó. Nhìn chung nó cũng khá tốt khi hỗ trợ một khung đăng nhập, nhưng hình như nó hơi độc lập với nội dung của trang.

Vì một lý do nào đó, bạn không muốn sử dụng trang này để đăng nhập nữa mà muốn dùng một trang riêng với đường dẫn đẹp và dễ nhớ hơn. Nếu bạn cần như vậy, ở bài này mình sẽ hướng dẫn chi tiết cách tự code một trang đăng nhập riêng cho WordPress mà không sử dụng tới trang wp-login.php mặc định để tạo sự chuyên nghiệp.

Bước 1. Tạo một Page để đăng nhập

Do bài này mình sử dụng tính năng Custom Page Template nên việc đầu tiên là bạn phải có sẵn một page do chính bạn tự tạo ra, bạn có thể tự đặt tên bất kỳ và đặt đường dẫn bất kỳ mà mình thích nhé.

codeloginpage-taopage

Nội dung để trống và ấn nút Publish để đó.

Bước 2. Tạo một page template

Bây giờ hãy vào thư mục theme mà bạn đang dùng, tạo một file tên login-page.php với nội dung chính xác như sau:


<?php
/*
 Template Name: Login Page
 */

Tạo xong lưu lại, rồi vào lại page mà bạn đã tạo ở bước 1 và chọn template cho nó là Login Page.

codeloginpage-usetemplate

Bước 3. Code cho trang đăng nhập

Trước tiên bạn cần phải hiểu, để gọi form đăng nhập trong WordPress ra ta có thể sử dụng hàm wp_login_form() có sẵn của nó. Trong hàm này có rất nhiều tham số mà bạn có thể xem tại đây.

Do đó, chúng ta sẽ viết hàm này vào file page-login.php để cho nó hiển thị một cái form đăng nhập. Bạn có thể thử viết đoạn dưới đây vào file đó để xem form đăng nhập có hiển thị không.


wp_login_form();

codeloginpage-wploginform

ta tạm có

codeloginpage-wploginform-preview

Bạn có thể viết thêm hàm get_header() và get_footer() vào đó để nó phù hợp với theme mà bạn đang dùng.

codeloginpage-wploginform-headerfooter

Tuy nhiên, ở bài này mình sẽ không hướng dẫn theo hướng sử dụng CSS của theme đâu nên nếu bạn muốn tiếp tục làm theo hướng dẫn ở bài này, hãy xóa đi hàm get_header() và get_footer() nhé.

Tiếp tục, mình sẽ chỉ bạn cách làm việc với các tham số của hàm wp_login_form() luôn để bạn có thể tùy biến một vài thành phần của nó nhé. Viết thêm code sau ngay bên trên hàm wp_login_form() trong file.


$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' ),
);

Sau đó sửa wp_login_form() thành wp_login_form($args).

Giờ thì ta có

codeloginpage-wploginform-args

Nhìn hơi trống phải không nào, mình biến tấu thêm một khung giới thiệu kế bên nữa cho nó oách. Thay toàn bộ nội dung file page-login.php thành nội dung dưới đây.


<?php
/*
 Template Name: Login Page
 */
?>

<div class="login-area">
	<div class="note">
		<h3>Đăng nhập</h3>
		<p>Hãy sử dụng tài khoản của bạn để đăng nhập vào website. Nếu chưa có tài khoản, <a href="<?php bloginfo('url'); ?>/wp-login.php?action=register">đăng ký tại đây</a>.</p>
	</div>
	<div class="form">
		<?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>
</div>

Giờ thì viết thêm một tí CSS vào trang này nhé, chèn đoạn dưới đây vào ngay trên <div class=”login-area”>.


	<style>
		body {
			background: #2E8D41;
			font-family: Arial, sans-serif;
			font-size: 14px;
			line-height: 1.5em;
		}
		.login-area {
			background: #FFF;
			margin: 100px auto;
			width: 960px;
			padding: 1em;
			overflow: hidden;
		}
		.note {
			float: left;
			margin-right: 20px;
		}
		.form {
			float: right;
			width: 250px;
			text-align: center;
		}
		label {
			display: block;
		}
		input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
			border: 1px solid #DDD;
			-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
			background-color: #FFF;
			color: #333;
			-webkit-transition: .05s border-color ease-in-out;
			transition: .05s border-color ease-in-out;
			padding: 5px 10px;
		}
		input[type=submit] {
				background: #51a818;
				background-image: -webkit-linear-gradient(top, #51a818, #3d8010);
				background-image: -moz-linear-gradient(top, #51a818, #3d8010);
				background-image: -ms-linear-gradient(top, #51a818, #3d8010);
				background-image: -o-linear-gradient(top, #51a818, #3d8010);
				background-image: linear-gradient(to bottom, #51a818, #3d8010);
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				font-family: Arial;
				color: #ffffff;
				padding: 10px 20px 10px 20px;
				border: solid #32a840 2px;
				text-decoration: none;
		}
	</style>

Do đây chỉ là CSS mình viết tạm cho có nên có thể nó hơi xấu, bạn có thể viết tùy theo ý của bạn.

Bước 4. Xác thực đăng nhập

Bây giờ bạn đã có một form đơn giản theo ý mình và bạn vẫn đăng nhập thành công. Nhưng điều gì sẽ xảy ra khi bạn đăng nhập? Nó sẽ chẳng chuyển đi đâu hết mà vẫn ở lại trang đăng nhập nhưng cookie đăng nhập sẽ vẫn được lưu, bằng chứng là sau khi đăng nhập bạn gõ vào trang /wp-admin thì vẫn vào được. Để khắc phục điều này, hãy đặt code này vào file functions.php.

/* Tự động chuyển đến một trang khác sau khi login */
function my_login_redirect( $redirect_to, $request, $user ) {
	//is there a user to check?
	global $user;
	if ( isset( $user->roles ) && is_array( $user->roles ) ) {
		//check for admins
		if ( in_array( 'administrator', $user->roles ) ) {
			// redirect them to the default place
			return admin_url();
		} else {
			return home_url();
		}
	} else {
		return $redirect_to;
	}
}

add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );

Đối với code trên, sau khi admin đăng nhập thành công thì nó sẽ trỏ đến trang quản trị (admin_url()), còn thành viên bình thường nó sẽ trỏ tới trang chủ (home_url()).

Mặt khác, file /wp-login.php vẫn được sử dụng nếu bạn gõ địa chỉ đó nên bây giờ ta sẽ cần thêm một vài đoạn code bỏ vào file functions.php trong theme để cấu hình lại nó.

function redirect_login_page() {
    $login_page  = home_url( '/dang-nhap/' );
    $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');

Hãy đổi lại /dang-nhap/ thành đường dẫn trang đăng nhập của bạn nhé.

Bước 5. Lỗi đăng nhập

Có một vấn đề sau khi làm xong 4 bước trên là nếu đăng nhập bị sau thì nó vẫn “tiễn” về file wp-login.php kèm thông báo lỗi. Đã sửa thì sửa cho trót, đặt thêm code sau vào file functions.php để nó hiển thị thông báo lỗi ở trang đăng nhập của bạn luôn.

/* Kiểm tra lỗi đăng nhập */
function login_failed() {
    $login_page  = home_url( '/dang-nhap/' );
    wp_redirect( $login_page . '?login=failed' );
    exit;
}
add_action( 'wp_login_failed', 'login_failed' );  

function verify_username_password( $user, $username, $password ) {
    $login_page  = home_url( '/dang-nhap/' );
    if( $username == "" || $password == "" ) {
        wp_redirect( $login_page . "?login=empty" );
        exit;
    }
}
add_filter( 'authenticate', 'verify_username_password', 1, 3);

Nhưng nó vẫn chưa có thông báo lỗi để thành viên biết, hãy thêm đoạn code dưới vào file page-login.php ở ngay dưới <div class=”form”>.


		<?php
			$login  = (isset($_GET['login']) ) ? $_GET['login'] : 0;
			if ( $login === "failed" ) {
				echo '<p><strong>ERROR:</strong> Sai username hoặc mật khẩu.</p>';
			} elseif ( $login === "empty" ) {
				echo '<p><strong>ERROR:</strong> Username và mật khẩu không thể bỏ trống.</p>';
			} elseif ( $login === "false" ) {
				echo '<p><strong>ERROR:</strong> Bạn đã thoát ra.</p>';
			}
		?>

codeloginpage-error

Xong rồi đấy, việc tùy biến thêm gì nữa bây giờ là của bạn. 😀

  • Toàn bộ nội dung file page-login.php: http://pastebin.com/usUHiKaZ
  • Toàn bộ nội dung file functions.php: http://pastebin.com/Z73rufks
14 bình luận

Có thể bạn quan tâm

14 bình luận

Nguyen Ngoc Hoan 27/04/2020 - 7:44 Chiều

Ủa anh Thạch Phạm sao bữa nay lại mở mục bình luân cho thành viên vậy nè, không sợ anh em phi vào hỏi lại hết chăm con giờ. hehe. Mà ghé qua cảm ơn bài viết của anh nhé quá hay

Reply
tai tik tok 21/04/2020 - 10:52 Sáng

E hỏi cái chuyển hướng về trang đầu tiên người dùng vào như thế nào a

Reply
Cách tùy biến trang đăng nhập của WordPress – DOCBAO.TV – Đọc báo mới 24h – Đọc báo tin tức online 17/03/2020 - 12:05 Sáng

[…] Nếu như bạn muốn tự xây dựng trang đăng nhập riêng cho WordPress mà không dùng trang /wp-admin mặc định thì có thể tham khảo hướng dẫn này. […]

Reply
HƯỚNG XỬ LÝ FORM BOOKING - Waitingvn Blog 25/10/2019 - 1:14 Chiều

[…] Tạo trang Đăng nhập bằng page template dùng hàm wp_login_form(), hướng dẫn chi tiết […]

Reply
Hai 27/03/2017 - 5:32 Chiều

Cho mình hỏi nếu làm như này thì mình đăng nhập vào ạ? Mình có làm được nhưng khi đăng nhập tài khoản của mình thì lại không được

Reply
Tuấn phạm 29/12/2016 - 5:49 Sáng

Mình có làm thêm 1 trang đăng ký là: http://domain.com/login

giờ mình muốn chuyển link: http://domain.com/wp-login.php?action=register
thành: http://domain.com/login
được ko Thạch.
Vì khi bấm vào 1 số nơi thì nó ra thêm cái ?action=register
phiền bạn giúp dùm.

Reply
Tuấn phạm 29/12/2016 - 5:51 Sáng

1 số nơi ví dụ như: /wp-login.php?action=lostpassword thì nó ra ở chổ register

Reply
quang hệ 31/08/2016 - 10:33 Chiều

cái này có thể thay đường dẫn đăng nhâp như thachpham.com/wp-admin thành dạng như thachpham.com/admin hoặc thachpham.com/dangnhap được không ạ

Reply
diadiemgiamgia.com 09/11/2016 - 9:38 Sáng

Đúng như bạn nói đấy

Reply
Thành 16/08/2016 - 5:59 Chiều

Có trang đăng nhập cho thành viên mà không thấy bài hướng dẫn làm trang đăng ký nhỉ. Mong Thạch làm nốt 🙂

Reply
Trần Đình Đức 22/07/2016 - 7:04 Chiều

Quá hay, cảm ơn Thạch đã chia sẻ. Cách này liệu có còn truy cập được trang /wp-admin không nhỉ?

Reply
Thạch Phạm 23/07/2016 - 4:41 Sáng

Vẫn được bạn nhé. Chỉ là làm cái trang đăng nhập thôi.

Reply
duc 05/11/2016 - 11:22 Chiều

Anh cho em hỏi nếu anh check như trên thì khi em đáng /admin nó vẫn không về trang như mình thiết kế mà anh, có nên thêm thế này check không anh: $pos = strpos($page_viewed, ‘wp-login.php’); Em cảm ơn anh nhiều

Reply
diadiemgiamgia.com 09/11/2016 - 9:40 Sáng

Với cách này thì đăng nhập quản trị hay người dùng đều đăng nhập cùng 1 form bên ngoài front-end

Reply

Để lại một bình luận

* Khi bình luận, bạn đồng ý rằng thông tin bạn nhập vào bao gồm tên, email và địa chỉ IP sẽ được lưu giữ tại website.