Hướng dẫn

Hướng dẫn chi tiết cách tùy chỉnh trang Đăng Nhập WordPress

Đã đăng trên bởi VietEditor
13
Th10

Giao diện trang đăng nhập mặc định của WordPress (/wp-login.php) tuy đơn giản nhưng đôi khi lại gây lúng túng cho người không phải wp developer chuyên nghiệp. Không tuỳ chỉnh trang đăng nhập thiếu đi sự thu hút và nhận diện thương hiệu. Để khắc phục điều này, bạn có thể sử dụng các filter hooks và action hook cung cấp bởi WordPress để thay đổi tên miền, logo và kiểu dáng trang đăng nhập một cách dễ dàng.

1. Thay đổi Tên Miền Trang Đăng Nhập

Sử dụng filter_hook login_headerurl để thay đổi URL hiển thị trên thanh tiêu đề của trang đăng nhập.

Ví dụ:

add_filter( 'login_headerurl', 'custom_login_header_url' );

function custom_login_header_url( $url ) {
    return 'https://www.vietplugin.com'; // Thay đổi URL mong muốn
}

Giải thích:

  • add_filter: Hàm dùng để gắn một callback function vào một filter hook cụ thể.
  • login_headerurl: Tên của filter hook dùng để thay đổi URL tiêu đề trang đăng nhập.
  • custom_login_header_url: Tên của callback function được thực thi khi filter hook được kích hoạt.
  • return: Trả về URL mới cho thanh tiêu đề trang đăng nhập.

Lưu ý: Thay đổi https://www.vietplugin.com bằng URL mong muốn của bạn.

2. Thay đổi Tiêu Đề Trang Đăng Nhập

Sử dụng filter_hook login_headertitle để thay đổi tiêu đề hiển thị trên thanh tiêu đề của trang đăng nhập.

Ví dụ:

add_filter( 'login_headertitle', 'custom_login_header_title' );

function custom_login_header_title( $title ) {
    return 'Tiêu đề trang đăng nhập mới'; // Thay đổi tiêu đề mong muốn
}

Giải thích:

  • add_filter: Hàm dùng để gắn một callback function vào một filter hook cụ thể.
  • login_headertitle: Tên của filter hook dùng để thay đổi tiêu đề trang đăng nhập.
  • custom_login_header_title: Tên của callback function được thực thi khi filter hook được kích hoạt.
  • return: Trả về tiêu đề mới cho thanh tiêu đề trang đăng nhập.

Lưu ý: Thay đổi Tiêu đề trang đăng nhập mới bằng tiêu đề mong muốn của bạn.

3. Thay đổi Logo Trang Đăng Nhập

Sử dụng action hook login_enqueue_scripts để thêm logo mới vào trang đăng nhập.

Ví dụ:

add_action( 'login_enqueue_scripts', 'custom_login_logo' );

function custom_login_logo() {
    ?>
    <style type="text/css">
        #login h1 a {
            background-image: url('https://www.vietplugin.com/logo.png'); /* URL logo */
            background-size: contain;
            width: 150px; /* Chiều rộng logo */
            height: 150px; /* Chiều cao logo */
        }
    </style>
    <?php
}

Giải thích:

  • add_action: Hàm dùng để gắn một callback function vào một action hook cụ thể.
  • login_enqueue_scripts: Tên của action hook được kích hoạt khi trang đăng nhập tải xong.
  • custom_login_logo: Tên của callback function được thực thi khi action hook được kích hoạt.
  • style: Thêm code CSS để thay đổi logo trang đăng nhập.
  • #login h1 a: Chọn phần tử HTML hiển thị logo.
  • background-image: Thay đổi URL logo bằng URL logo của bạn.
  • background-size: Điều chỉnh kích thước logo.
  • width: Chiều rộng logo.
  • height: Chiều cao logo.

Lưu ý: Thay đổi https://www.vietplugin.com/logo.png bằng URL logo của bạn và điều chỉnh kích thước logo theo ý muốn.

4. Thay đổi Kiểu Dáng Trang Đăng Nhập

Ngoài việc thay đổi logo, bạn có thể sử dụng code CSS để thay đổi màu sắc, font chữ, bố cục và các yếu tố khác trên trang đăng nhập vào đoạn mã css trong action “login_enqueue_scripts” trên. Dưới đây là một số ví dụ:

Thay đổi màu nền:

body.login {
    background-color: #F0F0F0; /* Màu nền mới */
}

Thay đổi màu hay font chữ cho trang đăng nhập:

.login #wp-login p, .login #nav a {
    color: #333; /* Màu font chữ mới */
}
.login #wp-login p, .login #nav a {
    font-family: 'Arial', sans-serif; /* Font chữ mới */
}

Lưu ý:

  • Bạn có thể sử dụng các công cụ kiểm tra trình duyệt web để xem trước giao diện trang đăng nhập và điều chỉnh code CSS cho phù hợp.
  • Nên sử dụng CSS selector chính xác để tránh ảnh hưởng đến các phần tử khác trên trang web.

Với việc sử dụng các filter_hooks và action hook được cung cấp bởi WordPress, bạn có thể dễ dàng thay đổi tên miền, logo, kiểu dáng và các yếu tố khác trên trang đăng nhập để phù hợp với thương hiệu và sở thích của mình. Hy vọng bài viết này đã cung cấp cho bạn những hướng dẫn chi tiết và hữu ích.

VietEditor