Có phải bạn đang muốn cá nhân hóa trang đăng nhập của WordPress để nó phù hợp với website hơn?
Nếu bạn đang điều hành một website thành viên WordPress hoặc một cửa hàng trực tuyến , trang đăng nhập sẽ được nhiều người ghé thăm. Việc cá nhân hóa trang này cho phép bạn cung cấp trải nghiệm người dùng tốt hơn.
Trong hướng dẫn này, chúng tôi sẽ trình bày nhiều cách khác nhau để tạo ra trang đăng nhập WordPress mang dấu ấn cá nhân. Bạn cũng có thể áp dụng hướng dẫn này cho trang đăng nhập của WooCommerce.
Đây là những gì bạn sẽ học được từ hướng dẫn này.
- Tại sao phải tạo dấu ấn riêng cho trang đăng nhập WordPress
- Một vài ví dụ thiết kế trang đăng nhập WordPress
- Tạo trang đăng nhập trên front-end trong WordPress
- Tạo trang đăng nhập WordPress bằng Theme My Login
- Tạo trang đăng nhập WordPress mang dấu ấn riêng bằng WPForms
- Tự thiết kế form đăng nhập cho WordPress.
- Thay đổi logo WordPress trên trang đăng nhập
- Thay đổi logo WordPress và URL đăng nhập bằng plugin
- Thay đổi logo WordPress và URL đăng nhập mà không cần plugin (mã nguồn)
Tại sao phải tạo dấu ấn riêng cho trang đăng nhập WordPress?
WordPress đi kèm với một hệ thống quản lý người dùng mạnh mẽ. Theo mặc định, trang đăng nhập chỉ hiển thị thương hiệu và logo của WordPress. Điều này không có vấn đề gì lớn nếu bạn đang điều hành blog nhỏ hoặc bạn là người duy nhất có quyền admin.
Tuy nhiên, nếu website của bạn cho phép người dùng đăng ký và đăng nhập, thì trang đăng nhập mang phong cách riêng sẽ mang lại trải nghiệm người dùng tốt hơn.
Sử dụng logo và thiết kế của riêng bạn khiến người dùng cảm thấy tin tưởng website của bạn hơn thay vì màn hình đăng nhập mặc định của WordPress.
Bên cạnh đó, màn hình đăng nhập mặc định chỉ bao gồm một form đăng nhập nhàm chán. Bằng cách tạo một trang đăng nhập mang phong cách riêng, bạn có thể sử dụng nó để quảng bá các trang khác hoặc chạy chương trình khuyến mãi.
Chúng ta hãy cùng xem một số thiết kế trang đăng nhập WordPress đã được cá nhân hóa.
Một vài thiết kế trang đăng nhập WordPress đẹp và nổi bật
Chủ sở hữu website có thể mang phong cách riêng vào trang đăng nhập WordPress bằng các kỹ thuật khác nhau.
Một số người thiết kế trang đăng nhập giống với theme và màu sắc của website của họ. Số khác lại sửa trang đăng nhập mặc định theo hướng sử dụng hình nền và dải màu sắc riêng, đồng thời chèn logo của họ vào đó.
1. WPForms
WPForms là plugin contact form cho WordPress tốt nhất trên thị trường. Thật trùng hợp, plugin của họ cũng đi kèm một addon để tạo các form đăng nhập và đăng ký WordPress đẹp mắt.
Trang đăng nhập của WPForms sử dụng bố cục hai cột. Cột bên trái chứa form đăng nhập và cột bên phải được sử dụng để làm nổi bật tin tức, khuyến mãi và chứa thêm các nút call to action. Trong ví dụ trên, WPForms đang sử dụng trang đăng nhập để chia sẻ báo cáo hàng năm của mình. Trang đăng nhập này sử dụng hình nền minh họa, thiết kế mang tính thương hiệu và màu sắc để tạo ra trải nghiệm đăng nhập độc đáo.
2. Rock My Wedding
Website của Rock My Wedding sử dụng phương thức popup để hiển thị form đăng nhập và đăng ký . Ưu điểm của việc sử dụng popup là người dùng có thể đăng nhập mà không cần rời khỏi trang, mang lại trải nghiệm người dùng nhanh hơn.
3. Jacquelynne Steves
Jacquelynne Steeves là một website thủ công mỹ nghệ, nơi tác giả đăng các nội dung về trang trí nhà cửa, làm mền, hoa văn, thêu,… Trang đăng nhập của họ sử dụng hình nền mang phong cách riêng phù hợp với chủ đề website với form đăng nhập ở bên phải.
4. Church Motion Graphics
Trang đăng nhập của công ty thiết kế đồ họa này sử dụng hình nền đầy màu sắc mang hơi hướng ngành nghề kinh doanh của họ. Trang này sử dụng cùng phần header và footer với website chính, cùng với form đăng nhập khá đơn giản trên nền tối màu.
5. MITSLoan Management Review
Website của MITSLoan Management Review sử dụng thiết kế màn hình đăng nhập mặc định của WordPress, sử dụng CSS để ghi đè logo của họ lên logo có sẵn của WordPress.
Tạo trang đăng nhập trên front-end WordPress
Có một số plugin WordPress mà bạn có thể sử dụng để tạo trang đăng nhập trên front-end của WordPress. Chúng tôi sẽ trình bày hai plugin khác nhau, bạn có thể chọn một plugin phù hợp nhất với mình.
Video hướng dẫn
Tạo trang đăng nhập WordPress bằng Theme My Login
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Theme My Login . Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress .
Sau khi kích hoạt, Theme My Login tự động tạo địa chỉ URL cho các hành động đăng nhập, đăng xuất, đăng ký, quên mật khẩu và đặt lại mật khẩu, các URL này sẽ là các trang mang giao diện của riêng bạn.
Bạn có thể chỉnh sửa các URL đăng nhập WordPress này bằng cách truy cập trang Theme My Login » General, sau đó cuộn xuống phần Slugs để sửa đổi các URL này.
Theme My Login cũng cho phép bạn sử dụng shortcode để tạo ra các trang đăng nhập và đăng ký mang phong cách riêng. Bạn có thể chỉ cần tạo một page cho mỗi hành động nêu trên và sau đó điền slug của trang đó vào phần thiết lập để plugin có thể tìm và chuyển hướng người dùng khi họ truy cập vào slug đó.
Hãy bắt đầu thử nghiệm điều này với trang đăng nhập.
Hãy truy cập vào Page » Add New để tạo một trang WordPress mới. Bạn cần đặt tiêu đề cho trang của mình và sau đó nhập shortcode “[theme-my-login]” vào vùng nội dung.
Bây giờ bạn có thể bấm Publish thử xem nó hoạt động trên thực tế trông như thế nào.
Lặp lại quy trình để tạo các trang khác bằng cách sử dụng các shortcode sau.
[theme-my-login action=”register”] cho form đăng ký.
[theme-my-login action=”lostpassword”] cho trang bị mất mật khẩu.
[theme-my-login action=”resetpass”] cho trang đặt lại mật khẩu.
Tạo trang đăng nhập WordPress mang dấu ấn riêng bằng WPForms
WPForms là plugin tạo form WordPress tốt nhất trên thị trường hiện nay. WPForms cho phép bạn dễ dàng tạo các form đăng nhập và đăng ký mang phong cách riêng cho website của mình.
WPForms là một plugin WordPress premium và bạn sẽ cần mua gói Pro của họ để có thể sử dụng addon User Registration.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPForms . Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .
Sau khi kích hoạt, bạn cần truy cập trang WPForms » Settings để nhập khóa cấp phép của mình. Bạn có thể tìm thấy thông tin này trong tài khoản của mình trên website WPForms.
Sau khi nhập khóa cấp phép, bạn sẽ có thể cài đặt các tiện ích bổ sung. Hãy tiếp tục truy cập trang WPForms » Addons và tìm addon có tên User Registration Addon.
Tiếp theo, bấm vào nút Install Addon để tải và kích hoạt addon. Bây giờ bạn đã sẵn sàng để tạo các form đăng nhập mang phong cách riêng của riêng mình.
Hãy truy cập WPForms » Add New và cuộn xuống template User Login Form. Bạn cần nhấp vào nút Create a User Login Form để tiếp tục.
WPForms sẽ load User Login Form cùng với các field của nó. Bạn có thể click vào từng field để thêm mô tả hoặc chèn thêm text xung quanh chúng.
Bạn cũng có thể thay đổi các cài đặt khác, ví dụ: nút Submit có thể thay đổi thành Đăng nhập.
Bạn cũng có thể quyết định điều gì sẽ xảy ra sau khi người dùng đăng nhập thành công. Truy cập Settings » Confirmation và chọn một hành động sẵn có để thiết lập hành vi này.
Bạn có thể chuyển hướng người dùng đến URL khác, chuyển hướng họ đến trang chủ hoặc hiển thị thông báo rằng họ hiện đã đăng nhập.
Khi bạn đã hài lòng với các cài đặt, hãy nhấp vào nút Save ở góc trên cùng bên phải của màn hình để đóng trình tạo form.
Chèn form đăng nhập vào WordPress
WPForms giúp bạn dễ dàng chèn form đăng nhập vào bất kỳ bài viết hoặc page nào trong WordPress.
Chỉ cần chỉnh sửa trang mà bạn muốn thêm form đăng nhập hoặc tạo một form mới. Trên màn hình chỉnh sửa trang, hãy thêm block WPForms vào vùng nội dung của bạn.
Tiếp theo, chọn form đăng nhập bạn đã tạo trước đó và khối WPForms sẽ tự động load nó vào phần nội dung.
Bây giờ bạn có thể tiếp tục chỉnh sửa nội dung hoặc xuất bản các thay đổi của mình.
Tự thiết kế form đăng nhập cho WordPress.
Theo mặc định, trang chứa form đăng nhập WordPress mang dấu ấn riêng của bạn sẽ sử dụng cùng template và style với theme bạn đang dùng, nghĩa là nó sẽ có menu điều hướng, header, footer, sidebar widget tương tự giao diện website của bạn.
Nếu bạn muốn thiết kế một bộ giao diện mới hoàn toàn cho trang đăng nhập, bạn có thể sử dụng các plugin page builder cho WordPress.
Bằng cách này, bạn có thể tự bố cục trang theo ý mình và sau đó chèn thêm widget login form của Theme My Login hoặc WPForms.
Trong ảnh chụp màn hình bên dưới, chúng tôi đã sử dụng plugin Beaver Builder, bố trí hình nền toàn màn hình và nội dung dạng hai cột. Ở cột đầu tiên là một đoạn văn bản và một nút bấm Register. Ở cột còn lại, chúng tôi chèn widget của WPForms vào.
Lợi ích của Beaver Builder là quá trình thiết kế có thể kéo và thả 100%.
Lưu ý: Vì bạn đã đăng nhập, nên cả hai plugin Theme My Login và WPForms có thể không hiển thị bản live preview của form đăng nhập.
Nếu bạn không thích sử dụng plugin page builder trên WordPress, bạn có thể sử dụng custom CSS để trang trí cho form và trang đăng nhập. Bên cạnh đó, bạn cũng có thể sử dụng plugin CSS Hero để dễ dàng chèn thêm CSS.
Thay đổi logo WordPress trên trang đăng nhập
Không phải lúc nào bạn cũng phải tạo ra trang đăng nhập hoàn toàn khác biệt với mặc định. Trên thực tế, rất nhiều website chỉ thay thế logo và url logo của WordPress trong khi vẫn sử dụng giao diện trang đăng nhập sẵn có.
Nếu bạn chỉ muốn thay thế logo WordPress bằng logo của mình, bạn có thể dễ dàng làm điều đó với một plugin WordPress hoặc vài dòng code đơn giản. Chúng tôi sẽ trình bày cả hai để bạn bạn có thể chọn lấy một phương pháp phù hợp nhất với mình.
Thay đổi logo WordPress và URL đăng nhập bằng plugin
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Colorlib Login Customizer. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .
Khi kích hoạt, plugin sẽ thêm một mục menu mới có tên Login Customizer vào sidebar của bảng điều khiển WordPress admin dashboard, nhấp vào nó sẽ khởi chạy trình login customizer.
Bạn sẽ thấy màn hình đăng nhập mặc định ở bên phải, các tùy chọn cho phép chỉnh sửa chúng ở cột bên trái.
Để thay logo WordPress bằng logo của bạn, hãy nhấp vào Logo options bên trái. Bạn sẽ có các lựa chọn ẩn logo WordPress, thay bằng logo của riêng bạn, thay thế địa chỉ URL khi click vào logo và tiêu đề của logo.
Plugin này cũng cho phép bạn thay đổi hoàn toàn giao diện trang đăng nhập WordPress, bạn có thể thêm cột, hình nền, thay đổi màu của form,…
Về cơ bản, bạn có thể thay đổi giao diện trang đăng nhập WordPress mặc định mà không cần đổi sang địa chỉ URL khác.
Sau khi hoàn tất, bạn cần nhấp vào nút Publish để lưu lại các thay đổi. Giờ bạn có thể truy cập lại trang đăng nhập để xem trên thực tế nó sẽ hoạt động như thế nào.
Thay đổi logo WordPress và URL đăng nhập mà không cần plugin (mã nguồn)
Phương pháp này cho phép bạn thay thế logo WordPress trên màn hình đăng nhập bằng cách thủ công mà không cần sử dụng plugin.
Trước tiên, bạn cần upload logo của mình lên thư viện của WordPress. Hãy truy cập Media » Add New và tiến hành upload file logo của bạn.
Sau đó, nhấp vào Edit bên cạnh hình ảnh, thao tác này sẽ mở ra trình chỉnh sửa, cho phép bạn sao chép địa chỉ URL của file. Hãy lưu địa chỉ này lại để có thể sử dụng cho bước tiếp theo.
Tiếp theo, bạn cần thêm đoạn mã sau vào file functions.php của theme hoặc một site-specific plugin.
function wpb_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(https://path/to/your/custom-logo.png);
height:100px;
width:300px;
background-size: 300px 100px;
background-repeat: no-repeat;
padding-bottom: 10px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );
Đừng quên thay thế phần http://path/to/your/custom-logo.png bằng địa chỉ URL từ bước trước đó. Bạn cũng có thể điều chỉnh các thuộc tính CSS khác để phù hợp với logo của mình.
Bây giờ bạn có thể truy cập trang đăng nhập WordPress để xem đoạn mã có hoạt động đúng như ý muốn hay không.
Đoạn mã này chỉ có nhiệm vụ thay thế logo WordPress bằng logo của bạn mà không thực hiện việc thay đổi link của nó.
Để thay đổi địa chỉ mà logo trỏ đến, bạn chèn thêm đoạn mã sau vào file functions.php của theme hoặc một site-specific plugin. Đoạn mã này có thể nằm ngay sau đoạn mã mà bạn đã thêm ở bước trước đó.
function wpb_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );
function wpb_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );
Đừng quên thay thế Your Site Name and Info bằng thông tin về website của bạn. Logo trên trang đăng nhập của bạn bây giờ sẽ trỏ đến trang chủ của website.
Chúng tôi hy vọng bài viết này đã giúp bạn biết được các cách khác nhau để tạo trang đăng nhập WordPress cho website của mình. Bạn cũng có thể muốn xem hướng dẫn bảo mật WordPress của chúng tôi để biết thêm các mẹo cải thiện bảo mật cho trang đăng nhập WordPress.
Nếu thích bài viết này, bạn vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.