Cách tùy chỉnh logo trang đăng nhập WordPress?

Hôm nay freehosting sẽ đưa các bạn đến một kiến thức hơi sâu 1 tí. Đó là tuỳ chỉnh các trang đăng nhập WordPress sao cho cá nhân hoá?

1. Tùy chỉnh đăng nhập WordPress trong chủ đề của bạn

Điều đầu tiên việc cần làm là mở thư mục chủ đề của bạn và tạo một thư mục mới trong thư mục gốc được gọi là login. Và chúng ta sẽ sử dụng thư mục này để chứa các hình ảnh và bảng định kiểu CSS trong suốt bài viết.

Tiếp theo, mở tệp chủ đề functions.php và chỉnh sửa.

2. Thay đổi Logo login

Một trong những thay đổi đơn giản nhất mà bạn có thể thực hiện đối với màn hình đăng nhập là thay đổi Login WordPress mặc định và thay đổi nó sao cho phù hợp với giao diện tổng thể trang web của bạn.

Điều đầu tiên cần làm là lưu hình ảnh logo của bạn trong thư mục Login đã tạo ở phần 1 bài viết. Kích thước mặc định cho hình ảnh này là 80 pixel x 80 pixel. Chỉ cần lưu hình ảnh biểu trưng của bạn dưới dạng logo.png vào thư mục đăng nhập bạn đã tạo. Sau đó, ở cuối tệp functions.php của bạn, hãy thêm mã này.

 
function my_loginlogo() {
  echo '<style type="text/css">
    h1 a {
      background-image: url(' . get_template_directory_uri() . '/login/logo.png) !important;
    }
  </style>';
}
add_action('login_head', 'my_loginlogo');

Sau khi thêm mã này, bạn sẽ thấy biểu tượng vừa setup sẽ xuất hiện trên trang, phía trên biểu mẫu đăng nhập.

 Chuyển logo WordPress mặc định phía trên biểu mẫu đăng nhập

Theo mặc định, hình ảnh biểu trưng này vẫn liên kết đến “http://wordpress.org”. Do đó chúng ta cần thêm một vài dòng mã vào cuối tệp functions.php của mình.

function my_loginURL() {
    return 'https://www.elegantthemes.com';
}
add_filter('login_headerurl', 'my_loginURL');

Các bạn nhớ thay đổi thành url website của các bạn nhé!

Ngoài ra khi người dùng di chuột hình ảnh thì nó sẽ có một đoạn chú giải cho logo này. Để sửa chú giải hãy thêm đoạn mã này.

function my_loginURLtext() {
    return 'Elegant Themes';
}
add_filter('login_headertitle', 'my_loginURLtext');

Các bạn nhớ thay đổi tên thành tên website của các bạn nhé!

Thêm thẻ tiêu đề sẽ thay đổi giá trị khi di chuột

Thêm thẻ tiêu đề sẽ thay đổi giá trị khi di chuột

3. Chuyển hướng người dùng sau khi đăng nhập

Theo mặc định, người dùng được chuyển hướng đến quản trị viên WordPress sau khi họ đăng nhập. Nhưng nếu bạn có một trang web có đăng ký mở hoặc một khu vực đặc biệt mà bạn muốn khách hàng được chuyển hướng đến, thì đây có thể không phải là hành vi bạn muốn. Sử dụng bộ lọc login_redirect , bạn có thể chuyển hướng người dùng đến bất kỳ đâu trên trang web của bạn sau khi họ đăng nhập.

function my_loginredrect( $redirect_to, $request, $user ) {
  if ( isset( $user->roles ) && is_array( $user->roles ) ) {
    if( in_array('administrator', $user->roles)) {
      return admin_url();
    } else {
      return site_url();
    }
  } else {
      return site_url();
  }
}
 add_filter('login_redirect', 'my_loginredrect', 10, 3);

 


Leave a Reply