Tùy biến trang đăng nhập không cần Plugin cho WordPress

Tùy biến trang đăng nhập không cần Plugin cho WordPress: Trên mạng có rất nhiều Plugin để bạn tùy biến trang đăng nhập cho WordPress và trên Thạch Phạm cũng có hướng dẫn tùy biến nhưng lại bằng plugin.

Mình thì không thích dùng Plugin cho lắm nên hôm nay rảnh mình tùy biến trang đăng nhập không cần Plugin cho WordPress, chia sẻ cho anh em nào cần nhé.

Tùy biến trang đăng nhập không cần Plugin cho WordPress

Để có thể tùy biến trang đăng nhập không cần Plugin cho WordPress trong hướng dẫn này của mình thì các bạn sẽ tùy chỉnh trong file Function của theme bạn đang dùng.

Lưu ý: Bạn nên sao lưu lại file function của bạn trước nhé, tránh trường hợp bị lỗi cấu trúc web nhé.

# Thêm Action trong Function

Đầu tiên bạn phải khai báo chức năng để nó kết nối với trang đăng nhập của WordPress

add_action('login_head', 'change_my_login_page');

# Thêm Css tùy biến trang đăng nhập

Sau khi bạn đã thêm Action tiếp theo là bạn bắt đầu làm đẹp cho trang đăng nhập. Các bạn show code trang đăng nhập WordPress ra và bạn kiểm tra xem bạn muốn thay đổi những đoạn nào

Ví dụ Css trên trang của mình luôn, các bạn tham khảo và thay đổi cho phù hợp với Blog của bạn nhé

function change_my_login_page() {
	echo '<style>
	body {
	  background-image: url("https://f4vnn.com/wp-content/uploads/2021/01/bg-image.jpg");
	  -webkit-background-size: cover !important;
	  background-size: cover !important;
	  font-family: "Tahoma", Arial;
	}
	.login h1 a {
	background-image: url("https://f4vnn.com/wp-content/uploads/2021/01/f4vnn-logo-min.png");
	  -webkit-background-size: cover !important;
	  background-size: cover !important;
	  height: 80px;
	  width: 390px;
	}
	.login form {
	background-color: rgba(255,255,255,0.14);
	font-weight: 700;
	width: 330px;
	max-width: 330px;
	}
	.login label {
	text-align: center;
	color: #fff;
	line-height: 2.5;
	margin-bottom: 5px;
	}
	#login form p {
	text-align: center;
	}
	.login * {
	text-align: center;
	}
	.login form .input, .login form input[type=checkbox], .login input[type=text] {
	background-color: rgba(255,255,255,0.14);
	color: #fff;
	}
	.login #backtoblog a, .login #nav a {
	color: #fff;
	}
	.login #nav {
	text-align: left;
	}
	.login #backtoblog, .login #nav {
	text-align: left;
	}
	.login .privacy-policy-page-link {
	text-align: left;
	}
	.login #login_error {
	width: 352px;
	max-width: 352px;
	}
	.login #login_error, .login .message, .login .success {
	width: 352px;
	max-width: 352px;
	}
	</style>';
}

Kết luận

Sau khi đã tùy biến xong thì lưu lại và xóa cache để tận hưởng thành quả của mình nhé. Hy vọng bài viết tùy biến trang đăng nhập không cần Plugin cho WordPress mà Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn. Chúc bạn thành công.