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

codeloginpage-wploginform-headerfooter

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: https://pastebin.com/usUHiKaZ
  • Toàn bộ nội dung file functions.php: https://pastebin.com/Z73rufks

Nguồn: Tự code trang đăng nhập cho WordPress | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Godaddy khuyến mãi domain .COM chỉ còn $0,99 cuối năm
WordPress Helpers – Tối ưu cho WordPress với 50 tính năng
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme