Tùy chỉnh trang đăng nhập WordPress Admin với plugin Admin Custom Login

Nếu bạn thấy trang đăng nhập wordpress admin quá đơn điệu và nhàm chán, thì bạn có thể chỉnh nó với sự trợ giúp của nhiều plugin.

Trong bài viết sau mình sẽ chia sẻ và hướng dẫn một vài bước đơn giản để tùy chỉnh trang đăng nhập WordPress bằng plugin Admin Custom Login.

Tùy chỉnh trang đăng nhập WordPress Admin với plugin  Admin Custom Login - Giao diện mặc định trang đăng nhập mặc định của wordpress
Giao diện mặc định trang đăng nhập mặc định của wordpress
Tùy chỉnh trang đăng nhập WordPress Admin với plugin  Admin Custom Login - Giao diện trang đăng nhập đã chỉnh sửa bằng plugin admin custom login
Giao diện trang đăng nhập đã chỉnh sửa bằng plugin admin custom login
 
 

Hướng dẫn tùy chỉnh trang đăng nhập WordPress Admin với plugin Admin Custom Login

Bước 1: Cài đặt và kích hoạt plugin Admin Custom Login

Đăng nhập vào trang quản trị WordPress –> Plugin –> Cài mới –> Nhập tên plugin vào “Admin Custom Login” để tìm kiếm –> tới plugin đó nhấn cài đặt –> sau đó nhấn kích hoạt.

Tùy chỉnh trang đăng nhập WordPress Admin với plugin  Admin Custom Login - Cài đặt plugin Admin Custom Login
Cài đặt plugin Admin Custom Login
Tùy chỉnh trang đăng nhập WordPress Admin với plugin  Admin Custom Login - Kích hoạt plugin Admin Custom Login
Kích hoạt plugin Admin Custom Login

Bước 2: Thiết lập

Mở phần cài đặt của plugin ” Admin Custom Login” : nhấn vào AC Login –> Settings.

  • Background Design: Đổi hình nền trang đăng nhập
  • Login Form: thiết lập cho form đăng nhập như đổi nền, đổi màu viền, kiểu viền, độ rộng form, đổ bóng, đổi text Username và Password, chuyển hướng sau khi đăng nhập….
  • Font Setting: thiết lập font, màu chữ, cỡ chữ..
  • Logo Setting: thiết lập logo
  • Social Setting: hiển thị và thiết lập biểu tượng mạng xã hội
  • Google Captcha: bật capchat Google khi đăng nhập
  • Export/Import: Xuất file thiết lập từ web này và thêm vào web khác

Tới phần Admin Custom Login Status đánh dấu vào Enable –> sau đó nhấn Save changes để bật plugin.

Tùy chỉnh trang đăng nhập WordPress Admin với plugin  Admin Custom Login - Vào phần cài đặt của plugin  Admin Custom Login
Vào phần cài đặt của plugin Admin Custom Login

Bước 3: Đổi hình nền WP-Login

Nhấn vào BACKGROUND DESIGN để thay đổi hình nền trang đang nhập –> select Background (để chọn hình, màu hay slide), chọn Static Backgroud Image –> Bấm vào Upload để tải hình lên –> Đánh dấu Cover stretch –> Nhấn Save changes.

Tùy chỉnh trang đăng nhập WordPress Admin với plugin Admin Custom Login - Chọn kiểu background
Chọn kiểu background
Tùy chỉnh trang đăng nhập WordPress Admin với plugin Admin Custom Login - Upload hình lên
Upload hình lên

Khi chọn ảnh có chiều rộng vào chiều cao lớn hơn màn hình đăng nhập để ảnh hiển thị tốt nhất.

Lưu ý: Lúc tải ảnh nền, mặc định nó sẽ chọn kích thước là nhỏ nhất. Khi đó bạn nhớ phải chọn full size, để ảnh không bị vỡ nhé.

Bước 4: Thiết lập form đăng nhập

Bấm vào LOGIN FORM SETTING để thiết lập form đăng nhập –> chọn định đạng — sau đó nhấn Save changes để lưu thiết lập.

  • Login Form Position: Vị trí form. Float Left/Right/Center (Đẩy về bên trái phải hoặc trung tâm). Float with Customization (Đẩy và thiết lập khoảng cách Form so với bên trái và bên trên, nếu sử dụng  kiểu Float này cái này thì sẽ không tự động Responsive trên điện thoại, máy tính bảng).
  • Select Background: Chọn hình nền của Form. Static Background Image (nền ảnh). Static Background Color (nền màu). Background Color (màu của nền).
  • Background Effect: hiệu ứng cho nền. Overlay là hiệu ứng mờ.
  • Border Color: màu viền form
  • Border Style: kiểu viền form. Solid (nét thẳng), dashed (nét đứt), dotted (nét chấm), double (2 đường đôi)
  • Border Thickness: độ dày của viền
  • Enable Form Shadow: bật/tắt đổ bóng cho form
  • Form Shadow Color: màu của bóng
  • Username or Email Field Label Text: Dòng text hiển thị phía trên ô Tài khoản hoặc Email
  • Username or Email Field Placeholder Text: Dòng text nằm trong ô nhập Tài khoản hoặc Email
  • Password Field Label Text: dòng text hiển thị phía trên ô nhập Mật khẩu
  • Password Field Placeholder Text: dòng text nằm trong ô nhập Mật khẩu
  • Log in Button Text: dòng text ở nút Đăng nhập (Log in)
  • Forcefully Redirect: Chuyển hướng người dùng khi truy cập trang đăng nhập WordPress
  • Redirect users after login: Chuyển hướng người dùng sau khi đăng nhập, không làm việc với tài khoản Admin
  • Display note to user above login form: Hiển thị 1 dòng text phía trên form đăng nhập. Message Font Size: cỡ chữ. Message Font Color: màu chữ.
  • Tagline Message Display Below Login Form: hiển thị dòng text phía dưới form đăng nhập
  • Custom CSS: thêm CSS tùy chỉnh, nếu bạn biết CSS rồi thì bạn tự tìm hiểu thêm 
Tùy chỉnh trang đăng nhập WordPress Admin với plugin Admin Custom Login - Thiết lập form đăng nhập 1
Thiết lập form đăng nhập
Tùy chỉnh trang đăng nhập WordPress Admin với plugin Admin Custom Login - Thiết lập form đăng nhập 2
Thiết lập form đăng nhập
Tùy chỉnh trang đăng nhập WordPress Admin với plugin Admin Custom Login - Thiết lập form đăng nhập 3
Thiết lập form đăng nhập
Tùy chỉnh trang đăng nhập WordPress Admin với plugin Admin Custom Login - Thiết lập form đăng nhập 4
Thiết lập form đăng nhập
Tùy chỉnh trang đăng nhập WordPress Admin với plugin Admin Custom Login - Thiết lập form đăng nhập 5
Thiết lập form đăng nhập

Bước 5: Thiết lập Font chữ

Bấm vào LOGIN FORM SETTING để thiết lập form đăng nhập –> chọn định đạng — sau đó nhấn Save changes để lưu thiết lập.

  • Headline Font Color: màu sắc của Headline
  • Input Font Color: màu sắc của dòng text trong các ô nhập thông tin
  • Link Color: màu sắc liên kết
  • Button Color: màu sắc các nút
  • Headline Font Size: cỡ chữ Headline
  • Input Font Size: cỡ chữ text trong ô nhập thông tin
  • Link Font Size/Button Font Size: cỡ chữ liên kết và chữ trong nút
  • Link Shadow: đổ bóng cho liên kết
  • Headline Font Style: chọn kiểu font cho Headline
  • Input/Link/Button: chọn kiểu font cho liên kết, text ở ô nhập thông tin và text ở nút.
  • Input Box Icon: thêm icon cho ô nhập thông tin
  • Icon for user Input Box: thêm icon cho ô nhập tên tài khoản hoặc email
  • Icon for Password Input Box: thêm icon cho ô nhập mật khẩu

Bấm vào LOGO SETTING để thiết lập form đăng nhập –>Upload logo –> chọn show logo –> chọn kích thước logo — sau đó nhấn Save changes để lưu thiết lập.

  • Logo Image: ảnh logo
  • Logo Image width/height: chiều rộng và cao của logo
  • Logo link Url: bấm vào Logo sẽ ra liên kết nào
  • Logo Image Title: Tiêu đề ảnh logo

Chúc Quý khách hàng thành công!

Đăng ký Website mới tại đây >>> Giải pháp website trọn gói Hostify

Thông tin liên hệ tư vấn

Trả lời

Email của bạn sẽ không được hiển thị công khai.