Hướng Dẫn Thay Đổi Giao Diện Đăng Nhập WordPress Một Cách Đơn Giản

By Tường Châu Tin tức, Truyền thông, Tư vấn giao diện WordPress, thiết kế web, thiết kế website, Tường Châu, WordPress 0 Comments

(hoanhtao3d.vnervices) – 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á.

Đang xem: Thay đổi giao diện đăng nhập wordpress

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, hoanhtao3d.vnervices 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 ^hoanhtao3d.vn$ http://webcuaban.vn/wp-login.php

Trong đó, bạn thay hoanhtao3d.vn 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.

*

Giao diện đăng nhập Admin của WordPress chuẩ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 Adminfunction 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é!

*

Giao diện đăng nhập Admin của WordPress được cập nhật theo thương hiệu hoanhtao3d.vnervices

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 hoanhtao3d.vnervices đặ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é.

Xem thêm: Tech World: Autocad 2007 Full crack Win 7 32Bit, How To Install Auto Cad 2007 In Windows7,8,8

// Thay doi logo admin wordpressfunction 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(“images/logo.png”) 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é.

Xem thêm: Edraw Max Pro 10 – Edraw Max crack V10

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, hoanhtao3d.vnervices 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.

Memphis Custom LoginAdmin 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é!

Xem thêm bài viết thuộc chuyên mục: Đăng nhập

Khuyễn Mãi Hot