Trang đăng nhập mặc định của WordPress (wp-login.php) tuy hoạt động tốt nhưng lại khá đơn điệu và không thể hiện được bản sắc thương hiệu của bạn. Việc thiết kế trang đăng nhập cho WordPress không chỉ giúp tạo ra một trang đăng nhập đẹp mắt, chuyên nghiệp mà còn nâng cao trải nghiệm cho người dùng, đặc biệt là trên các website có thành viên hoặc khách hàng.
Bài viết này sẽ hướng dẫn bạn chi tiết từng bước để “lột xác” hoàn toàn trang đăng nhập, từ việc thay đổi logo đăng nhập cho đến tùy chỉnh màu nền, URL và nhiều hơn thế nữa chỉ với vài đoạn code đơn giản.
Tại sao bạn nên tùy chỉnh trang đăng nhập WordPress?
Trước khi đi vào phần kỹ thuật, hãy cùng xem những lợi ích mà một trang đăng nhập được cá nhân hóa mang lại:
- Tăng cường nhận diện thương hiệu: Thay thế logo WordPress bằng logo của bạn là cách khẳng định thương hiệu mạnh mẽ nhất.
- Tạo sự chuyên nghiệp và tin cậy: Một trang đăng nhập được thiết kế riêng biệt cho thấy sự đầu tư và chỉn chu, tạo ấn tượng tốt với khách hàng và đối tác.
- Cải thiện trải nghiệm người dùng (UX): Bạn có thể tùy chỉnh các yếu tố để giúp người dùng đăng nhập thuận tiện hơn, ví dụ như chuyển hướng họ đến một trang cụ thể sau khi đăng nhập.
Hướng dẫn tùy chỉnh trang đăng nhập WordPress bằng Code
Phương pháp này phù hợp cho những ai muốn toàn quyền kiểm soát và không muốn cài đặt thêm plugin. Chúng ta sẽ can thiệp trực tiếp vào file functions.php và CSS của theme.
Bước 1: Chuẩn bị file và cấu trúc
Đầu tiên, bạn cần tạo một cấu trúc để chứa các tùy chỉnh, giúp việc quản lý dễ dàng hơn.
- Trong thư mục theme bạn đang sử dụng (ví dụ:
wp-content/themes/ten-theme-cua-ban), hãy tạo một thư mục mới tên làlogin. - Bên trong thư mục
login, tạo một file CSS tên làlogin-style.cssvà đặt file logo của bạn vào đây (ví dụ:logo.png).
Tiếp theo, mở file functions.php của theme và thêm đoạn mã sau để WordPress có thể nhận diện và tải file login-style.css của bạn:
function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-style.css">';
}
add_action('login_head', 'custom_login_css');
Bước 2: Thay đổi logo WordPress thành logo của bạn
Đây là bước quan trọng nhất để thay đổi nhận diện. Mở file login-style.css và thêm đoạn mã sau:
.login h1 a {
background-image: url('logo.png'); /* Đường dẫn tương đối đến file logo của bạn */
background-size: 280px 65px; /* Điều chỉnh kích thước logo cho phù hợp */
width: 280px;
height: 65px;
margin-bottom: 20px;
}
Lưu ý: Hãy thay đổi background-size, width, và height để phù hợp với kích thước thực tế của logo bạn.
Bước 3: Thay đổi nền của trang đăng nhập
Để trang đăng nhập thêm phần sinh động, bạn có thể đổi màu nền hoặc sử dụng hình nền. Thêm đoạn CSS sau vào file login-style.css:
body.login {
background: #f0f2f5; /* Thay bằng màu nền bạn muốn */
}
/* Hoặc sử dụng hình nền */
/*
body.login {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
*/
Kết quả sau khi đổi màu nền:
Bước 4: Thay đổi URL và tiêu đề của logo
Mặc định, khi nhấp vào logo trên trang đăng nhập, bạn sẽ được chuyển đến wordpress.org. Để thay đổi nó thành trang chủ của bạn, hãy thêm đoạn mã sau vào file functions.php:
// Thay đổi URL của logo
function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
// Thay đổi tiêu đề (thuộc tính title) của logo
function my_login_logo_url_title() {
return get_bloginfo('name'); // Lấy tên website của bạn
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
Bước 5: Các tùy chỉnh nâng cao khác
Tự động chọn “Ghi nhớ đăng nhập” (Remember Me)
Nếu bạn thường xuyên đăng nhập và muốn tiết kiệm thời gian, đoạn mã này sẽ tự động tích vào ô “Remember Me”. Thêm vào file functions.php:
function login_checked_remember_me() {
add_filter( 'login_footer', function() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
});
}
add_action( 'init', 'login_checked_remember_me' );
Thay đổi URL chuyển hướng sau khi đăng nhập
Mặc định, mọi người dùng sau khi đăng nhập sẽ được chuyển đến trang quản trị (/wp-admin). Bạn có thể thay đổi điều này, ví dụ: chuyển hướng các thành viên (subscriber) về trang chủ và chỉ admin mới vào trang quản trị. Thêm vào functions.php:
function my_login_redirect( $redirect_to, $request, $user ) {
// Kiểm tra xem người dùng có tồn tại không
if ( isset( $user->roles ) && is_array( $user->roles ) ) {
// Nếu là Quản trị viên (administrator)
if ( in_array( 'administrator', $user->roles ) ) {
// Chuyển hướng về trang quản trị mặc định
return $redirect_to;
} else {
// Với các vai trò khác, chuyển hướng về trang chủ
return home_url();
}
} else {
return $redirect_to;
}
}
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );
FAQ – Câu hỏi thường gặp
1. Làm cách nào để tùy chỉnh cả form đăng nhập (màu sắc, bo góc)?
Bạn có thể thêm các đoạn CSS vào file login-style.css để tùy chỉnh form. Ví dụ:
#loginform {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
2. Tôi có thể dùng plugin thay vì code không?
Chắc chắn rồi! Nếu bạn không quen với việc sửa code, các plugin như LoginPress hoặc Custom Login Page Customizer là những lựa chọn tuyệt vời, cung cấp giao diện kéo-thả trực quan.
3. Đoạn mã của tôi không hoạt động, tôi phải làm gì?
Hãy kiểm tra lại các bước sau: xóa cache trình duyệt và website, đảm bảo bạn đã dán code vào đúng file (functions.php, login-style.css), và kiểm tra xem có lỗi cú pháp nào không (thiếu dấu ; hoặc }).
Với những hướng dẫn trên, hy vọng bạn có thể tự tay tạo cho mình một trang đăng nhập chuyên nghiệp và đậm dấu ấn thương hiệu. Việc thiết kế website không chỉ dừng lại ở giao diện người dùng mà còn ở những chi tiết nhỏ như trang đăng nhập.
Nếu cần hỗ trợ chuyên sâu, đừng ngần ngại liên hệ với chúng tôi tại đây! Chúc bạn thành công!
