Cách thay đổi màn hình đăng nhập WordPress Admin (CMS)

(NTCServices) – Qua quá trình thiết kế website cho khách hàng, phát triển và vận hành hệ thống website WordPress, một số khách hàng có thắc mắc đường dẫn vào admin khó nhớ, giao diện đăng nhập thì chưa đẹp và đơn giản quá.

 

Nhân dịp vừa khai trương văn phòng mới tại Quận Tân Bình (TP.HCM) được 1 tháng, NTCServices giới thiệu bài hướng dẫn để cộng đồng coder, blogger và các nhà quản trị web có thể tối ưu hệ thống đăng nhập backend của mình trên WordPress:

1. THAY ĐỔI ĐƯỜNG DẪN ĐĂNG NHẬP ADMIN

Thông thường, để đăng nhập Admin trong WordPress (còn gọi là CMS), chúng ta thường vào http://webcuaban.vn/wp-admin hoặc  http://webcuaban.vn/wp-login.php. Nhưng nếu bạn thiết kế website công ty thì khách hàng, đối tác có thể thắc mắc đường dẫn này khó nhớ. Chỉ cần một đoạn code cực kỳ đơn giản như sau, bạn có thể thay đổi đường dẫn đăng nhập admin tùy ý theo sở thích, nhu cầu của khách hàng:

Cách làm: Bạn mở file .htaccess thêm vào trên cùng như sau

RewriteRule ^ntcs$ http://webcuaban.vn/wp-login.php [NC,L]

Trong đó, bạn thay ntcs bằng đường link website của mình vào. Quá đơn giản phải không? Làm ngay và luôn đi các bạn.

2. THAY ĐỔI ĐƯỜNG DẪN LOGO ADMIN

Khi vào trang đăng nhập CMS, nếu vô tình click vào logo WordPress thì nó sẽ nhảy ngay vào http://wordpress.org. Nếu bạn quản lý dự án thiết kế website cho khách hàng thì điều này là không nên. Chúng ta có thể thay đổi đường dẫn này dễ dàng, tại sao không cập nhật nó?

Cách làm: Bạn mở file function.php, nếu bạn đang sử dụng Child Theme thì nên sửa file này trong thư mục của Child vì mỗi khi bạn update phiên bản mới của theme thì file function.php trên theme gốc rất dễ bị chép đè và mất đi chỉnh sửa bên dưới của bạn.

// Thay doi duong dan logo Admin
function wpc_url_login(){
return "http://webcuaban.vn/"; // duong dan vao website cua ban
}
add_filter('login_headerurl', 'wpc_url_login');

Save lại và nhấn Ctrl-F5 để xem sự thay đổi nhé!

3. THAY ĐỔI LOGO, HÌNH NỀN ĐĂNG NHẬP ADMIN WORDPRESS

Tương tự, bạn chèn đoạn code này vào function.php để thay thế logo trong trang đăng nhập. Có thể hiểu, đoạn code này dùng để thêm vào 1 file css cho trang đăng nhập. Bạn tạo một file css mới với tên tùy thích (ở đây NTCServices đặt là login.css), ngang hàng với style.css trong theme của bạn. Không nên chèn trực tiếp vào style.css vì file này load cho tất cả các trang, sẽ làm load web chậm hơn. Nhớ sửa đường dẫn file css của bạn lại nhé.

// Thay doi logo admin wordpress
function login_css() {
wp_enqueue_style( 'login_css', get_template_directory_uri() . '/login.css' ); // duong dan den file css moi
}
add_action('login_head', 'login_css');

Tiếp theo bạn copy và paste đoạn code css sau vào file login.css vừa tạo khi nãy, nhớ thay đổi đường dẫn đến logo của bạn. Lưu ý kích thước logo mặc định cần là 312×67 pixel các bạn nha. Nếu logo của bạn không trùng với kích thước này thì bạn phải điều chỉnh thêm padding, margin trong css để cho vị trí logo đặt vào sao cho đẹp nhất.

#login h1 a {
background: url("<a href="http://webcuaban.vn/wp-content/themes/ntcservices/images/logo.png">images/logo.png</a>") no-repeat !important;
}

Nếu bạn muốn thay đổi màu nền hay hình nền trang đăng nhập thì có thể thêm đoạn css bên dưới vào login.css, ví dụ trên trang Blog cá nhân của mình như sau

body.login {background:#008800}

Tương tự, khi bạn thay đổi màu nền và hình nền thì có lẽ màu của các text không còn phù hợp nữa, bạn thêm code css sau để sửa lại các text bên dưới trang đăng nhập, các bạn có thể tùy biến lại màu sắc sao cho đẹp nhất nhé. Code của mình như sau:

.login #nav a, .login #backtoblog a {color:#fff!important;text-shadow:none;text-decoration:none}
.login #nav a:hover, .login #backtoblog a:hover {color:#ccc!important;

Chỉ cần lên Google Search từ khóa background thì các bạn đã có sẵn một thư viện đồ sộ rồi, có thể thay đổi tùy ý nhé.

3. SỬ DỤNG PLUGIN

Theo mình thì với sự điều chỉnh code như trên khá nhanh và đơn giản nên không nhất thiết phải xài thêm plugin để làm gì. Tuy nhiên, NTCServices cũng xin cung cấp thêm cho các bạn một số plugin miễn phí cho các bạn mới nhập môn hoặc… lười.

Mình chỉ xin liệt kê thôi nhé, các bạn có thể vào trang download plugin để xem thêm chi tiết về các plugin này:

• Memphis Custom Login
• Admin Customization

2 plugin trên khá phù hợp với các phiên bản WordPress mới hiện nay. Các bạn có thể cài đặt và sử dụng nhé!

Các bạn cứ code thử, nếu cần hỏi thêm gì thì cứ comment bên dưới nhé. Nhớ like, chia sẻ bài viết và giới thiệu Công ty TNHH Dịch vụ – Tư vấn – Truyền thông Quốc Gia (NTCServices) với mọi người nhé!

Tường Châu