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

Cập nhật: 18/06/2019

Nếu bạn thấy trang đăng nhập WordPress quá nhàm chán, bạn có thể tùy chỉnh nó với sự trợ giúp của nhiều plugin, mà không cần biết chút kiến thức code nào.

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

themevi-tuy-chinh-dang-nhap-wp6-min

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

themevi-tuy-chinh-dang-nhap-wp1-min

themevi-tuy-chinh-dang-nhap-wp2-min

 

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

Đây là bảng điều khiển của plugin

  • 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

themevi-tuy-chinh-dang-nhap-wp3-min

Đánh dấu vào Enable và bấm Save changes để bật plugin.

themevi-tuy-chinh-dang-nhap-wp4-min

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

Bấm vào BACKGROUND DESIGN để thay đổi hình nền trang đăng nhập nhé.

Bấm Upload để tải hình nền, đánh dấu Cover of stretch và Save changes. Nhớ chọn ảnh có chiều rộng và cao lớn hơn màn hình đăng nhập để ảnh hiển thị tốt nhất.

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

themevi-tuy-chinh-dang-nhap-wp5-min

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 nhé.

* 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 😀

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

Cho phép bạn thiết lập font cho toàn bộ thành phần trên trang đăng nhậ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

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

Bước 7. Thiết lập mạng xã hội

Bạn có thể thêm các biểu tượng mạng xã hội. Ở đây các phần thiết lập cũng đơn giản. Bạn đọc chắc tự hiểu được nên mình sẽ không viết thêm.