Một ngày đẹp trời, bạn đăng nhập vào trang quản trị website và thấy chán nản vì giao diện quá xấu và đơn điệu. Bạn quyết định phải thay đổi nó. Hôm nay Miootech sẽ hướng dẫn bạn theo 1 cách vô cùng đơn giản ^^

Để có thể thay đổi giao diện trang đăng nhập Flatsome không cần Plugin thì các bạn sẽ cần phải tùy chỉnh trong file Function của theme bạn đang dùng.

Lưu ý: Bạn nên copy lại file function hiện tại ra 1 chỗ khác để sao lưu nhé, tránh trường hợp bị lỗi cấu trúc web thì có thể backup lại được.

Bước 1: 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. Mở file functions.php lên và thêm vào đoạn code sau:

add_action('login_head', 'change_my_login_page');

Bước 2: 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. Chèn tiếp đoạn code sau vào functions.php nhé

function change_my_login_page() {
echo '<style>
body {
background-image: url("//flatsomea-z.com/wp-content/uploads/2021/08/1610534235_Tong-hop-100-Background-dep-nhat.jpg");
-webkit-background-size: cover !important;
background-size: cover !important;
font-family: "Tahoma", Arial;
}
.login h1 a {
background-image: url("//flatsomea-z.com/wp-content/uploads/2021/08/logoflatsomeaz01.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>';
}

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 thôi nào. Nếu code có vấn đề hay bạn có thêm đóng góp nào thì bình luận để cùng giải đáp nhé ^^