Hầu như bất kỳ ai khi xây dựng một Website trên nền tảng Wordpress đều muốn tuỳ chỉnh giao diện trang đăng nhập Wordpress sao cho chuyên nghiệp hơn. Không ai muốn để trang đăng nhập mặc định của Wordpress với logo Wordpress đơn điệu. Việc tuỳ chỉnh giao diện trang đăng nhập không chỉ tăng tính thẩm mỹ, chuyên nghiệp mà còn tạo dấu ấn cá nhân của riêng bạn trước hàng triệu Website cùng nền tảng Wordpress.
Thực tế, việc tuỳ chỉnh giao diện đăng nhập Wordpress đã có hàng trăm plugin giúp bạn làm điều đó, tuy nhiên các plugin này có thể khiến tốc độ tải trang web bị chậm đi hay thậm chí tạo xung đột các plugin khác cũng như không hoàn toàn phù hợp với các theme mà bạn đang sử dụng.
Trong bài này, Clickbank Vietnam xin hướng dẫn bạn cách tuỳ chỉnh giao diện trang đăng nhập Wordpress mà không cần cài đặt bất kỳ một plugin nào, không cần viết thêm bất kỳ một dòng Javascript nào và đặc biệt sử dụng cho bất kỳ theme Wordpress nào mà bạn đang sử dụng. Các tuỳ chỉnh trên đơn giản chỉ là thay đổi một số thông số CSS trên một số file trên mã nguồn Wordpress của bạn.
Bài này được viết áp dụng với mã nguồn mở Wordpress phiên bản 3.8.
Lưu ý: Các bạn nên nhớ backup lại những file dưới đây trước khi thực hiện, nhằm phòng khi có những sai sót xảy ra nhé.
Đầu tiên, cần xác định là bạn sẽ phải làm việc với các file css sau đây:
wp-admin.min.css (Bạn sẽ tìm thấy file này theo trong thư mục wp-admin của bạn theo đường dẫn wp-admin/css/admin.min.css)
colors.css (File này cũng nằm trong thư mục wp-admin theo đường dẫn wp-admin/css/colors.css)
Mục lục
Tuỳ chỉnh Logo cho trang đăng nhập Wordpress
Đầu tiên, chúng ta sẽ tuỳ chỉnh logo của Website thay cho logo mặc định. Ở Wordspress 3.8 kích thước mặc định cho logo là 80x80px. Kích thước này khiến cho một số Plugin chèn Logo vào trang đăng nhập như Add Logo to Admin bị biến dạng hoặc không hiển thị đầy đủ nếu kích thước logo của bạn lớn hơn so với kích thước mặc định 80x80px. Tuy nhiên, với một số thay đổi thông số CSS ở file wp-admin.min.css, bạn có thể dễ dàng đặt lại kích thước cho logo.
Đầu tiên, bạn mở file wp-admin.min.css và edit nó (bạn có thể dùng các trình quản lý file trên host hoặc thông qua FTP).
Chỉnh kích thước logo mặc định:
Tại file này, bạn nhấn tổ hợp phím Ctr+F để tìm kiếm đoạn:
.login h1 a{
/* background-image:url(../images/w-logo-blue.png?ver=20131202);
*//* background-image:none,url(../images/wordpress-logo.svg?ver=20131107);
*/background-size:80px 80px;
background-position:center top;
background-repeat:no-repeat;
color:#999;height:80px;
font-size:20px;
font-weight:400;
line-height:1.3em;
margin:0 auto 25px;
padding:0;
text-decoration:none;
width:80px;
text-indent:-9999px;
outline:0;overflow:hidden;display:block}
Tuỳ chỉnh lại kích thước logo sao cho phù hợp với kích thước logo của bạn.
Thay logo mặc định Wordpress thành logo của bạn:
Cũng trong đoạn css trên, bạn chỉnh dòng:
*//* background-image:none,url(../images/wordpress-logo.svg?ver=20131107);
thành
*//* background-image:url(URL-logo-của-bạn);
Vậy là chúng ta đã chỉnh sửa thành công logo và kích thước logo mặc định của Wordpress 3.8.
Chỉnh sửa hình nền và màu sắc form trang đăng nhập Wordpress:
Mặc định hình nền trang đăng nhập và form đăng nhập của Wordpress có màu xám trắng. Nếu bạn muốn thay màu của hình nền bằng một ảnh nền giống như Clickbank Vietnam, bạn cần làm việc đó với file colors.css đã nhắc đến ở trên.
Chỉnh màu sắc form đăng nhập:
Bạn tìm đoạn code css:
.login form{background:#fff;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.13);box-shadow:0 1px 3px rgba(0,0,0,.13)}
Bạn thay mã màu của riêng bạn, nếu muốn đổi thành màu đỏ giống Clickbank Vietnam, bạn thay đoạn trên thành:
.login form{background:#B22222;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.13);box-shadow:0 1px 3px rgba(0,0,0,.13)}
Thay ảnh nền cho trang đăng nhập:
Cũng trong file colors.css, bạn tìm dòng:
body.login{background:#f1f1f1}
.login #nav a,
Bạn thay tham số backround thành màu khác hoặc bằng 1 ảnh nền của riêng bạn:
body.login{background:url(URL-image-của-bạn)}
.login #nav a,
Thay đổi màu sắc chữ Username, Password và Remember Me:
Trong file colors.css, bạn tìm dòng:
.login #backtoblog a{text-decoration:none;color:#999}
Tương tự, bạn chỉ cần thay mã màu css thành màu bạn muốn. Nếu bạn muốn thành màu giống Clickbank Vietnam, thay đoạn trên thành:
.login #backtoblog a{text-decoration:none;color:#fff}
Vậy là đã xong, bạn đã tuỳ chỉnh giao diện trang đăng nhập Wordpress của mình thành công. Trông nó chuyên nghiệp hơn hản phải không nào? Bằng cách này, bạn không hề dùng bất kỳ plugin nào và điều đó cũng đồng nghĩa làm website của bạn tải nhanh hơn.
Sử dụng plugin Erident Custom Login and Dashboard để tùy chỉnh trang đăng nhập WordPress:
Theo đánh giá của Clickbank Vietnam, đây là một plugin giúp bạn tùy chỉnh trang đăng nhập WordPress một cách dễ dàng, và đặc biệt là nó thích hợp với cả WordPress 4.1. Cùng chiêm ngường trang đăng nhập WordPress sau khi sử dụng plugin Erident Custom Login and Dashboard. Thật là tuyệt vời ông mặt trời phải không nào? ^^
