Để tùy chỉnh giao diện trang đăng nhập wp-login.php của WordPress, bạn có thể thực hiện một số thay đổi như thay đổi logo, màu sắc, thêm CSS tùy chỉnh, hoặc thêm nội dung. Dưới đây là các bước chi tiết kèm theo ví dụ mã để tùy chỉnh trang đăng nhập này.
Mặc định, WordPress hiển thị logo WordPress trên trang đăng nhập. Bạn có thể thay đổi logo này bằng logo của riêng bạn.
login_enqueue_scripts để thêm CSS tùy chỉnh thay đổi logo.login_headerurl để thay đổi đường dẫn của logo.// Thay đổi logo trang đăng nhập
function custom_login_logo() {
?>
<style type="text/css">
body.login div#login h1 a {
background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/custom-logo.png');
background-size: contain;
width: 100%;
height: 84px;
}
</style>
<?php
}
add_action('login_enqueue_scripts', 'custom_login_logo');
// Thay đổi đường dẫn khi nhấp vào logo
function custom_login_logo_url() {
return home_url(); // Đưa về trang chủ khi nhấp vào logo
}
add_filter('login_headerurl', 'custom_login_logo_url');
// Thay đổi thuộc tính title của logo
function custom_login_logo_url_title() {
return 'Trang chủ của tôi';
}
add_filter('login_headertext', 'custom_login_logo_url_title');
Bạn có thể thêm các đoạn CSS tùy chỉnh để thay đổi giao diện tổng thể của trang đăng nhập như màu nền, font chữ, khung đăng nhập…
Sử dụng hook login_enqueue_scripts để thêm file CSS tùy chỉnh của riêng bạn.
// Thêm CSS tùy chỉnh cho trang đăng nhập
function custom_login_css() {
wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/custom-login.css');
}
add_action('login_enqueue_scripts', 'custom_login_css');
custom-login.css, bạn có thể thêm các đoạn CSS như sau:/* Đổi màu nền của trang đăng nhập */
body.login {
background-color: #f4f4f9;
}
/* Thay đổi giao diện form đăng nhập */
body.login #login {
width: 320px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
border-radius: 8px;
}
/* Thay đổi màu nút đăng nhập */
body.login #wp-submit {
background-color: #0073aa;
border-color: #006799;
color: #ffffff;
text-shadow: none;
border-radius: 5px;
}
/* Đổi màu liên kết forgot password */
body.login #nav a {
color: #0073aa;
}
Bạn có thể thay đổi văn bản hiển thị trên trang đăng nhập, chẳng hạn như dòng “Lost your password?” hoặc “Back to blog”.
Sử dụng hook gettext để thay đổi nội dung văn bản.
// Thay đổi văn bản "Lost your password?"
function custom_login_text( $translated_text, $text, $domain ) {
if ( $text == 'Lost your password?' ) {
$translated_text = __( 'Quên mật khẩu?', 'custom-domain' );
}
if ( $text == 'Back to %s' ) {
$translated_text = __( 'Quay lại trang chủ', 'custom-domain' );
}
return $translated_text;
}
add_filter( 'gettext', 'custom_login_text', 10, 3 );
Bạn có thể thêm bất kỳ nội dung HTML nào vào trang đăng nhập, chẳng hạn như thông báo, biểu ngữ, hoặc lời chào.
Sử dụng hook login_message để thêm nội dung tùy chỉnh phía trên form đăng nhập.
// Thêm thông báo tùy chỉnh trên trang đăng nhập
function custom_login_message() {
return '<p class="custom-message">Chào mừng bạn đến với trang quản trị của chúng tôi. Vui lòng đăng nhập để tiếp tục.</p>';
}
add_filter('login_message', 'custom_login_message');
.custom-message {
font-size: 16px;
color: #333;
text-align: center;
margin-bottom: 20px;
}
Bạn có thể thay đổi hoặc xóa phần credit ở footer trang đăng nhập.
Sử dụng hook login_footer để tùy chỉnh footer.
// Thêm nội dung tùy chỉnh vào footer của trang đăng nhập
function custom_login_footer() {
echo '<div style="text-align: center; margin-top: 20px;">© 2024 Công ty của bạn. Tất cả các quyền được bảo lưu.</div>';
}
add_action('login_footer', 'custom_login_footer');
Bạn có thể tùy chỉnh thông báo lỗi hiển thị khi đăng nhập thất bại.
Sử dụng hook login_errors để thay đổi thông báo lỗi.
// Tùy chỉnh thông báo lỗi khi đăng nhập thất bại
function custom_login_error_message() {
return 'Thông tin đăng nhập không chính xác. Vui lòng thử lại.';
}
add_filter('login_errors', 'custom_login_error_message');
Mặc định, khi người dùng nhập sai tên đăng nhập hoặc mật khẩu, WordPress sẽ cung cấp thông tin chi tiết về lỗi (ví dụ: tên đăng nhập hoặc mật khẩu không đúng). Bạn có thể ẩn thông tin này để bảo mật hơn.
// Ẩn thông tin chi tiết về lỗi đăng nhập
function custom_hide_login_errors() {
return 'Thông tin đăng nhập không chính xác.';
}
add_filter('login_errors', 'custom_hide_login_errors');
Tùy chỉnh trang wp-login.php là một cách hay để cá nhân hóa và làm đẹp thêm trang đăng nhập của bạn. Tuy nhiên, bạn nên lưu ý:
Với các đoạn code trên, bạn có thể dễ dàng tùy chỉnh và tạo dấu ấn riêng cho trang đăng nhập WordPress của mình.
Kết luận, việc tùy chỉnh giao diện trang đăng nhập wp-login.php không chỉ giúp tạo dấu ấn thương hiệu riêng cho website mà còn nâng cao trải nghiệm người dùng. Bằng cách thay đổi logo, thêm CSS tùy chỉnh, và cá nhân hóa thông điệp, bạn có thể làm cho trang đăng nhập trở nên chuyên nghiệp và thân thiện hơn. Đồng thời, việc tích hợp các yếu tố bảo mật như ẩn thông báo lỗi cụ thể sẽ giúp bảo vệ website trước các nguy cơ tiềm ẩn. Hãy luôn nhớ sao lưu dữ liệu và sử dụng Child Theme hoặc plugin tùy chỉnh để đảm bảo an toàn khi thực hiện các thay đổi này.
Tôi có thể chấp nhận thất bại, mọi người đều thất bại ở một việc gì đó. Nhưng tôi không chấp nhận việc không cố gắng.
