Tùy Biến Giao Diện Đăng Nhập Mặc Định WordPress

À há, chúng ta lại được gặp nhau rồi, rất và rất nhiều bạn đang sử dụng website wordpress để thiết kế website. Cũng như theo mặc định thì url trang quản trị sẽ có địa chỉ là: http://tenmien/wp-admin (khi truy cập vào nó sẽ nhảy qua url: http://tenmien/wp-login.php).

Khi truy cập vào các bạn sẽ thấy 1 form đăng nhập cơ bản nhất mà wordpress đã mặc định sẵn. Rất thô sơ và đơn giản đúng không nào?

Hôm nay, Lê Ngọc Quyền sẽ hướng dẫn các bạn thay đổi vài chi tiết ở trang đăng nhập này nhé, giờ thì chúng ta sẽ từng phần nào.

THAY ĐỔI LOGO WORDPRESS TRONG TRANG ĐĂNG NHẬP

Bước 1: Các bạn vào theo trình tự: Quản trị -> Giao diện -> Sửa giao diện và mở file functions.php

Hoặc các bạn truy cập vào tài khoản FTP -> Giao diện -> Tên Website Của Bạn -> functions.php

Lưu ý: Nên thực hiện tại file functions.php ở child-theme nhé.

Bước 2: Thêm đoạn code sau vào file functions.php mà bạn đã mở:

//Thay đổi logo cho trang đăng nhập
add_action( 'login_enqueue_scripts', 'giuseart_login_enqueue_scripts' );
function giuseart_login_enqueue_scripts(){
echo '<style type="text/css" media="screen">';
echo '#login h1 a
{
background-image:url(/wp-content/uploads/2019/07/logo-giuseart.png);
;';
echo '</style>';
}

Sau khi copy vào bạn nhớ thay đường dẫn /wp-content/uploads/2019/07/logo-bignet.png thành đường dẫn của riêng bạn. Bây giờ bạn có thể ra ngoài và xem thành quả xem sao, có phải nó đã hiển thị logo mới rồi đúng không?
Nhưng mà sao nó xấu vậy nhỉ, các bạn đừng vội nhé, mình sẽ hướng dẫn chi tiết hơn để làm đẹp.

THAY ĐỔI ĐƯỜNG DẪN KHI CLICK VÀO LOGO

Giờ chúng ta mới chỉ thay đổi được logo mặc định của wordpress thôi, còn khi nhập vào vẫn ra trang WordPress.org. Bây giờ hãy làm theo các bước sau đây để thay đổi:

Bước 1: Các bạn tiếp tục mở file functions.php lên (bạn nào mở ra rồi mà chưa tắt thì làm tiếp nhé. :D)

Bước 2: Dán đoạn code sau vào dưới đoạn code chèn logo:

 //Thay đổi url ảnh logo 
add_filter( 'login_headerurl', 'bignet_login_headerurl'); 
function bignet_login_headerurl(){ 
return home_url('/'); 
} 

Lưu ý: ngay đoạn return home_url(‘/’) tức là khi nhấp vào logo nó sẽ ra trang chủ của website đó. Nếu không cần thay đổi url nào khác, các bạn có thể để nguyên.

THAY ĐỔI ĐƯỜNG DẪN TRANG ĐĂNG NHẬP

Như đầu bài viết mình có nói, đường dẫn vào quản trị mặc định là WP-ADMIN (khi truy cập vào nhảy qua WP-LOGIN). Chính vì đây là URL mặc định nên website nào dùng wordpress cũng sẽ như thế. Tránh việc bị người khác phá thì việc thay đổi đường dẫn này cũng mang tính bảo mật cao và an toàn hơn.

Chúng ta tiếp tục copy & paste nào:

Bước 1: Tiếp tục mở file functions.php lên.

Bước 2: Sao chép và dán đoạn dưới đây vào phần dưới cùng của file functions.php

//Thay đổi url đăng nhập wordpress
add_filter( 'login_url', 'bignet_login_url', 10, 2);
function giuseart_login_url( $force_reauth, $redirect ){
$login_url = 'đường_dẫn_trang_login';
if ( !empty($redirect) )
$login_url = add_query_arg( 'redirect_to', urlencode( $redirect ), $login_url );
if ( $force_reauth )
$login_url = add_query_arg( 'reauth', '1', $login_url ) ;
return $login_url ;
}

Lưu ý: Thay đoạn $login_url = ‘đường_dẫn_trang_login’.

STYLE CSS LÀM ĐẸP TRANG ĐĂNG NHẬP

Vì phần style css lại khá lâu và đòi hỏi test rất nhiều lần vì mỗi logo website đều khác nhau. Mình sẽ lấy tham khảo đoạn CSS từ blog giuseart.com của bạn LÊ VĂN THIỆN sử dụng hướng dẫn cho nhanh.

Các bạn copy đoạn dưới đây và dán tiếp vào file functions.php.

//Tùy chỉnh CSS cho trang đăng nhập WordPress
function tp_custom_logo() { ?>
    <style type="text/css">
 .login #login_error{    box-shadow: 0 30px 80px rgba(37, 37, 37, 0.1) !important;    border-radius: 15px !important;}
 .login .message{border-left: 4px solid #ec1f27 !important; border-radius: 15px;box-shadow: 0 30px 80px rgba(37, 37, 37, 0.1) !important;}
 .login #nav a:hover, .login #backtoblog a:hover{color: #eb1f27 !important;}
 .login .button-primary {background: #eb1f27 !important;border-color: #eb1f27 #eb1f27 #eb1f27 !important;box-shadow: 0 1px 0 #eb1f27 !important;border-radius: 20px !important;color: #fff !importanttext-decoration: none;text-shadow: none !important;}
 input[type=checkbox]:checked:before{color: #eb1f27;}
 .login input[type=text]:focus, .login input[type=password]:focus, input[type=email]:focus{    box-shadow: 0 0 2px rgb(255, 255, 255) !important;}
   .login h1 a{    background-size: 115px !important;     height: 115px !important; width: 209px !important; }
#login {width: 450px !important;}
 .login form {box-shadow: 0 30px 80px rgba(37, 37, 37, 0.1) !important;border-radius: 15px;    padding: 40px !important;}.login form .input, .login form input[type=checkbox], .login input[type=text] {background: #f5f5f5;border-radius: 30px;border: none;box-shadow: none;}
 @media only screen and (max-width: 480px) {
  #login {width: 320px !important;}
}
    </style>
<?php }
add_action('login_enqueue_scripts', 'tp_custom_logo');

Sau khi Paste xong nhớ kiểm tra và thay đổi các thông số để phù hợp với website của mọi người.

Như vậy là ở trên mình đã xong bài hướng dẫn thay đổi logo trang quản trị wordpress rồi, nếu bạn chưa thực sự hiểu hãy xem video hướng dẫn để thao tác đúng.

Chúc các bạn thành công, hãy chia sẻ cho nhiều người biết như một phần hỗ trợ kiến thức cho các bạn khác.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *