Tuỳ biến trang login theo ý thích trong wordpress

Bạn thường xuyên làm việc với website wordpress, có lẽ một ngày nào đó bạn sẽ thấy nhàm chán với giao diện trang login mặc định của nó. Hoặc bạn đang thiết kế website cho khách hàng, chẳng lẽ lúc bàn giao để nguyên trang login mặc định thì nhìn tầm thường quá, không có đặc tính thương hiệu riêng gì cả. Đây là trang login mặc định của wordpress.

Có lẽ bạn cần thay đổi giao diện trang login chút xíu, để nó chuyên nghiệp hơn, và cũng để có bản sắc riêng hơn. Có rất nhiều plugin giúp bạn thay đổi trang login cho đẹp mắt hơn. Nhưng trong trường hợp này, dùng plugin nó sẽ làm tốn thêm chút tài nguyên của website và rối rắm cho trang quản trị hơn. Do đó, trong bài viết này, mình sẽ hướng dẫn các bạn tuỳ biến trang login theo ý thích bằng code và css nhé.

Tuỳ biến trang login theo ý thích

Đây là trang login mình đã custom lại theo ý mình. Trong trang login này, mình đã thay đổi hình nền trang, thay logo, chỉnh background form đăng nhập trong suốt. Đồng thời, theo mặc định thì logo sẽ trỏ về website wordpress khi nhấp vào. Do đó mình cũng sẽ chỉ cách bạn thay đổi liên kết này trỏ về trang web của bạn. Khẳng định thương hiệu tuyệt đối luôn phải không nào?

Đầu tiên, bạn tạo giúp mình thư mục có tên login vào thư mục child theme. Trong thư mục login mình để vào 3 file background.jpg, custom_login.css và logo.png.

Sau đó, bạn mở custom_login.css lên và dán đoạn css này vào rồi lưu lại.

/* Change login page style by Ken Than */.login h1 a {
background-image: url(logo.png);
width: 213px;
height: aoto;
background-size: 213px auto;
}

.login label {
color: #fff;
display: block;
margin-bottom: 1em;
font-weight: bold;

}
.login form {
background: rgba(48, 66, 88, 0.3) ;
}

.login form .input {
font-weight: normal;
}

.login #backtoblog a, .login #nav a {
color: #fff;
}

.wp-core-ui .button-primary {
background: #4da28f;
}

Tiếp theo, ta cần gán CSS này cho trang login bằng cách vào file function.php của Child theme và thêm đoạn code sau:

add_filter('login_headerurl', 'custom_login_url');
function custom_login_css() {
wp_enqueue_style('login-styles', get_theme_root_uri() . '/flatsome-child/login/custom_login.css');
}
add_action('login_enqueue_scripts', 'custom_login_css');

Lưu ý thay flatsome-child trong đường dẫn /flatsome-child/login/custom_login.css thành tên chính xác của giao diện bạn đang sử dụng nhé.

Tiếp theo, chúng ta cần thay đổi liên kết trỏ về wordpress của logo thành liên kết website của chúng ta. Bạn thêm tiếp đoạn code sau vào file function.php nhé.

function custom_login_url() {
return 'https://hocwordpress.vn';
}

Nhớ thay đường dẫn thành đường dẫn website của bạn.

Lưu lại file function.php này là xong.

Tổng kết

Trên đây là cách đơn giản nhất để bạn tuỳ biến trang login theo ý thích mà không cần phải dùng tới plugin làm rối rắm thêm trang quản trị của bạn. Nếu có trục trặc gì cứ hồn nhiên hỏi mình nhé. Chúc các bạn thành công!