Cách tùy chỉnh trang đăng nhập WordPress (Hướng dẫn cơ bản)

Có phải bạn muốn tạo một trang đăng nhập WordPress riêng cho trang web của bạn?

Nếu bạn quản lý một trang web WordPress hoặc một cửa hàng trực tuyến, khi đó nhiều khách hàng của bạn sẽ thường thấy trang đăng nhập đầu tiên. Việc tinh chỉnh lại trang đăng nhập WordPress mặc định cho phép bạn cung cấp trải nghiệm người dùng tốt hơn cho khách hàng của bạn.

Trong bài hướng dẫn này, chúng tôi sẽ chỉ cho bạn những cách khác nhau để tạo ra một trang đăng nhập WordPress theo ý của bạn. Bạn cũng có thể sử dụng hướng dẫn này để tạo ra một trang đăng nhập cho WooCommerce rất tốt.

Dưới đây là những gì bạn sẽ học được từ hướng dẫn này.

Tại sao cần tuỳ chỉnh 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ẽ. Điều này cho phép người dùng tạo tài khoản trên các cửa hàng thương mại điện tử, các trang web, hoặc trên một blog.

Theo mặc định, trang đăng nhập cho thấy thương hiệu và logo WordPress. Điều này là tốt nếu bạn đang chạy một blog nhỏ, hoặc bạn là người duy nhất có quyền truy cập admin.ess.

Tuy nhiên, nếu trang web của bạn cho phép người dùng đăng ký và đăng nhập, khi đó một trang đăng nhập WordPress được tuỳ chỉnh sẽ cho người dùng có trải nghiệm tốt hơn.

Sử dụng logo và thiết kế riêng của bạn làm cho khách hàng của bạn cảm thấy quen thuộc hơn. Trong khi chuyển hướng họ tới màn hình đăng nhập WordPress mặc định trông không có gì giống như đó là trang web của bạn và có thể trông đáng ngờ cho khách hàng của bạn.

Cuối cùng, màn hình đăng nhập mặc định không chứa bất cứ điều gì ngoài biểu mẫu đăng nhập. Bằng cách tạo một trang đăng nhập tùy chỉnh, bạn có thể sử dụng nó để giới thiệu các trang khác hoặc chương trình khuyến mãi đặc biệt.

Chúng ta hãy xem xét một số ví dụ về thiết kế trang đăng nhập WordPress.

Ví dụ thiết kế trang đăng nhập WordPress.

Chủ sở hữu trang web có thể tùy chỉnh trang đăng nhập bằng với các phong cách và kỹ thuật khác nhau.

Một số người tạo ra một trang đăng nhập mà sử dụng chủ đề và màu sắc trang web của chính họ. Những người khác, thay đổi trang đăng nhập mặc định bằng cách thêm một phông nền, tùy chỉnh màu sắc và biểu tượng riêng của họ.

1. WPForms

WPForms là loại hình Plugin WordPress tốt nhất trên thị trường. Thật trùng hợp, plugin của họ bao gồm một add-on để tạo được hình thức đẹp cho trang đăng nhập và đăng ký WordPress, mà chúng tôi sẽ cho bạn thấy sau này trong bài viết.

Trang đăng nhập của họ sử dụng một cách bố trí hai cột. Cột bên trái chứa biểu mẫu đăng nhập và cột bên phải được sử dụng để hiển thị chương trình khuyến mãi nổi bật và các tác vụ khác. Trong ví dụ trên, họ đang sử dụng trang đăng nhập để chia sẻ báo cáo thường niên của họ. Nó sử dụng thương hiệu riềng, ảnh minh hoạ nền, và màu sắc để tạo ra một trải nghiệm đăng nhập độc đáo.

2. Rock My Wedding

Website nhạc rock My Wedding sử dụng một phương thức popup để đăng nhập hiển thị và mẫu đăng ký. Ưu điểm của việc sử dụng một popup là người dùng có thể đăng nhập mà không cần rời khỏi trang. Nó tiết kiệm thời gian hơn việc tải một trang mới và cung cấp trải nghiệm người dùng nhanh hơn.

3. Jacquelynne Steves

Jacquelynne Steeves là một trang web nghệ thuật và hàng thủ công nơi các tác giả xuất bản nội dung về trang trí nhà, làm mền, mô hình, thêu ren, và nhiều thứ hơn nữa. Trang đăng nhập của họ sử dụng một hình nền phù hợp với chủ đề trang web của họ và biểu mẫu đăng nhập ở bên phải.

4. Church Motion Graphics

Trang đăng nhập của công ty này đồ họa được thiết kế chuyển động sử dụng một nền đầy màu sắc phản ánh những công việc mà doanh nghiệp của họ làm. Nó sử dụng cùng một tiêu và các menu điều hướng trên màn hình đăng nhập với trang web. Biểu mẫu đăng nhập chính khá là đơn giản chỉ với một nền tối.

5. MITSLoan Management Review

Website MITSLoan Management Review sử dụng màn hình đăng nhập mặc định của WordPress. Họ chỉ sử dụng tùy chỉnh CSS để có logo riêng của mình để thay cho logo WordPress.

Cách tạo một trang đăng nhập dạng Front-End trong WordPress

Có một số plugin WordPress mà bạn có thể sử dụng để tạo ra một đăng nhập dạng front-end trong WordPress. Chúng tôi sẽ cho bạn thấy hai plugin khác nhau, và bạn có thể chọn giữa chúng để phù hợp nhất với bạn.

Cách tạo trang đăng nhập WordPres sử dụng Theme My Login

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt các plugin Theme My Login. Để biết chi tiết, hãy xem các bước hướng dẫn của chúng tôi về cách cài đặt một plugin WordPress.

Sau khi kích hoạt, Theme My Login tự động tạo URL cho tùy chỉnh đăng nhập, đăng xuất, đăng ký, quên mật khẩu, và các tác vụ đặt lại mật khẩu của bạn.

Bạn có thể tùy chỉnh các URL bằng cách truy cập trang Theme My Login » General. Cuộn xuống phần ‘Slugs’ để sửa các URL được các plugin sử dụng cho tác vụ đăng nhập.

Theme My Login cũng cho phép bạn sử dụng shortcodes để tạo các tùy chỉnh trang khi đăng nhập và đăng ký. Bạn chỉ có thể tạo một trang cho mỗi hành động và sau đó thêm trang Slug mới, để các plugin có thể tìm và chuyển hướng đúng.

Hãy bắt đầu với trang đăng nhập.

Đầu tiên vào Page » Add New để tạo một trang WordPress mới. Bạn cần soạn thảo tiêu đề cho trang của bạn và sau đó nhập shortcode “[theme-my-login]” ở sau dòng tiêu đề.

Bây giờ bạn có thể xuất bản trang của bạn và hãy xem nó trước để thấy trang đăng nhập của bạn sẽ hoạt động ra sao.

Lặp lại quá trình để tạo ra các trang khác bằng cách sử dụng các shortcodes sau.

[theme-my-login action=”register”] cho trang đăng ký.

[theme-my-login action=”lostpassword”] cho trang quên mật khẩu.

[theme-my-login action=”resetpass”] sử dụng nó ở trang thiết lập lại mật khẩu.

Cách tạo trang đăng nhập WordPress tuỳ chỉnh sử dụng WPForms

WPForms là plugin tốt nhất cho WordPress builder trên thị trường. Nó cho phép bạn dễ dàng tạo ra trang đăng nhập và các hình thức đăng ký cho trang web của bạn.

WPForms là một plugin WordPress cao cấp, và bạn sẽ cần ít nhất bản cao cấp để truy cập add-on này. Người dùng WPBeginner thể được giảm giá 50% bằng cách sử dụng mã coupon WPForms của chúng tôi: SAVE50

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPForms. Để biết chi tiết, hãy xem các bước hướng dẫn về cách cài đặt một plugin WordPress dưới đây.

Sau khi kích hoạt, bạn cần phải truy cập WPForms » Settings để nhập key bản quyền của bạn. Bạn có thể tìm thấy thông tin này trong tài khoản của bạn trên trang web WPForms.

Sau khi nhập key bản quyền, bạn sẽ có thể cài đặt add-ons. Vào WPForms » Addons và chọn vị trí đăng ký tài khoản Addon.

Tiếp theo, nhấn vào nút Install Addon để tải về và kích hoạt các addon. Bây giờ bạn đã sẵn sàng để tạo các tùy chỉnh cho đăng nhập của riêng bạn.

Đầu tiên vào WPForms » Add New và di chuyển xuống đến ‘User Login Form’ template. Bạn bấm vào ‘Create a User Login Form’ để tiếp tục.

WPForms sẽ tải User Login Form với các mục bắt buộc. Bạn có thể click vào các lĩnh vực để thêm mô tả hoặc nhập văn bản của riêng bạn.

Bạn cũng có thể thay đổi các thiết lập khác. Ví dụ, nó sẽ tự động thêm vào nút ‘Submit’ . Bạn có thể click vào nó và thay đổi để tạo nút đăng nhập khác.

Bạn cũng có thể quyết định những gì sẽ xảy ra khi người dùng đăng nhập thành công. Đến tab Settings » Confirmation và chọn một tác vụ tương ứng.

Bạn có thể chuyển hướng người dùng đến bất kỳ URL nào khác, chuyển hướng họ đến trang chủ, hoặc đơn giản là chỉ cho họ một thông điệp rằng họ đã đăng nhập.

Một khi bạn đã hài lòng với các thiết lập, nhấn vào nút Save ở góc trên bên phải của màn hình và đóng phần dành cho nhà phát triển.

Thêm phần đăng nhập được bạn tuỳ chỉnh vào một trang WordPress

WPForms làm cho việc thêm các tùy chỉnh đăng nhập của bạn trên bất kỳ bài hoặc trang WordPress nào  rất dễ dàng.

Chỉ cần chỉnh sửa trang web mà bạn muốn thêm phần đăng nhập vào hoặc tạo một trang mới. Ở trang chỉnh sửa, thêm khối WPForms vào khu vực nội dung của bạn.

Tiếp theo, chọn mẫu đăng nhập mà bạn đã tạo trước đó và WPForms sẽ tự động tải nó vào bên trong khu vực nội dung.

Bạn có thể tiếp tục chỉnh sửa trang mẫu đăng nhập, hoặc lưu lại và xuất bản những thay đổi của bạn.

Chỉnh sửa trang đăng nhập WordPress của bạn theo mẫu đã thiết kế

Theo mặc định, trang đăng nhập WordPress của bạn sẽ sử dụng mẫu trang và chủ đề của bạn. Nó sẽ có các menu chuyển hướng, header, footer, và widget sidebar theo chủ đề đó.

Nếu bạn muốn thiết kế toàn bộ một cái gì đó từ đầu, bạn có thể sử dụng một plugin cho WordPress builder.

Với một trang plugin builder, bạn có thể tạo một bố cục trang tùy thích và sau đó thêm các mẫu đăng nhập được cung cấp bởi Theme My Login hoặc WPForms.

Trong hình dưới đây, chúng tôi sử dụng plugin Beaver Builder khá phổ biến. Chúng tôi sử dụng một hình ảnh nền trên một bố cục toàn màn hình và sau đó bổ sung thêm hai cột. Trong cột một chúng tôi đã thêm một số văn bản và một nút bấm. Trong cột còn lại, chúng tôi đã thêm mẫu đăng nhập WPForms.

Lợi ích của Beaver Builder là nó sử dụng 100% thao tác kéo và thả.

Chú ý: Vì bạn đã đăng nhập trước đó, nên cả Theme My Login và plugin  WPForms sẽ không hiển thị bản xem trước của mẫu đăng nhập. Plugin WPForms có một tùy chọn để bạn có thể tắt chức năng này trong các thiết lập.

Nếu trang plugin WordPress builder không phải là của bạn, khi đó bạn có thể sử dụng tùy chỉnh CSS để thay đổi các giao diện và trang đăng nhập riêng của mình. Ngoài ra, bạn cũng có thể sử dụng plugin CSS Hero để thêm các giao diện CSS dễ dàng.

Không phải lúc nào bạn cũng phải tạo ra một trang đăng nhập WordPress hoàn chỉnh cho trang web của bạn. Trong thực tế, rất nhiều trang web chỉ cần thay thế logo WordPress và Url trong khi vẫn sử dụng trang đăng nhập mặc định.

Nếu bạn muốn thay thế logo WordPress trên màn hình đăng nhập với logo riêng của bạn, bạn có thể dễ dàng thực hiện bằng một plugin WordPress hoặc bằng cách thêm mã code chỉnh sửa vào. Chúng tôi sẽ cho bạn thấy cả hai phương pháp này là phù hợp nhất với bạn.

Thay đổi logo đăng nhập WordPress và URL sử dụ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 chi tiết, hãy xem các bước hướng dẫn của chúng tôi về cách cài đặt một plugin WordPress.

Sau khi kích hoạt, các plugin bổ sung thêm một mục mới có tên ‘Login Customizer’ để quản lý WordPress sidebar. Nhấp chuột vào nó sẽ khởi chạy việc chỉnh sửa phần đăng nhập.

Các tùy chỉnh sẽ thay đổi màn hình đăng nhập WordPress mặc định của bạn với các tùy chọn hiển thị ở bên trái và có giao diện như phía bên phải.

Để thay thế logo WordPress, nhấp vào tab ‘Logo options’ ở bên phải. Ở đây bạn có thể ẩn logo  WordPress, tải biểu tượng của bạn lên, thay đổi logo và văn bản URL.

Plugin cũng cho phép bạn tuỳ chỉnh hoàn toàn trang đăng nhập WordPress mặc định. Bạn có thể thêm các cột, hình nền, thay đổi màu sắc phần đăng nhập, và nhiều hơn nữa.

Về cơ bản, bạn có thể tạo một trang đăng nhập WordPress mà không thay đổi URL mặc định của trang đăng nhập WordPress.

Một khi bạn đã hoàn tất, chỉ cần nhấp vào nút xuất bản để lưu những thay đổi của bạn. Bây giờ bạn có thể truy cập vào trang đăng nhập WordPress để xem mẫu đăng nhập của bạn hoạt động thế nào.

Thay đổi Logo đăng nhập WordPress và URL mà không cần Plugin (Code)

Phương pháp này cho phép bạn tự thay thế logo WordPress trên màn hình đăng nhập thành biểu tượng của riêng bạn.

Trước tiên, bạn cần phải tải biểu tượng của bạn vào thư viện đa phương tiện. Vào Media » Add New và tải biểu tượng của bạn lên.

Sau khi bạn đã tải hình ảnh lên, nhấp chuột vào ‘Edit’ bên cạnh. Việc này sẽ mở trang chỉnh sửa đa phương tiện nơi bạn sao chép địa URL tập tin và dán text đó vào một mục trống trên máy tính của bạn.

Tiếp theo, bạn cần phải thêm đoạn mã sau vào file functions.php ở mục Theme của bạn hoặc thêm vào site-specific plugin.

1
2
3
4

5
6
7
8
9
10
11
12
13

function wpb_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image:
url(http://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ế URL của hình nền bằng URL tệp bạn đã sao chép 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 hình ảnh logo của bạn.

Bây giờ bạn có thể truy cập trang đăng nhập WordPress để xem logo của bạn hoạt động.

Code này chỉ thay thế logo WordPress. Nó không thay đổi liên kết logo dẫn đến trang web WordPress.org.

Hãy thay đổi điều này.

Chỉ cần thêm đoạn code vào file functions.php hoặc vào site-specific plugin. Bạn có thể thêm đoạn code phía dưới đấy ngay trước đoạn code bạn vừa thêm phía trên.

1
2
3
4
5
6
7
8
9
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’ với tên trang web của bạn. Logo của bạn trên màn hình đăng nhập bây giờ sẽ trỏ đến trang chủ của bạn.

Đó là tất cả. Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu các cách khác nhau để tạo trang đăng nhập WordPress riêng cho trang web của bạn. 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 các mẹo về cải thiện bảo mật đăng nhập WordPress của bạn.

Nếu bạn thích bài viêt này, hãy đăng ký kênh YouTube của chúng tôi để xem những video mới nhất. Bạn cũng có thể theo dõi chúng tôi trên Twitter and Facebook.

Leave a Reply

Your email address will not be published. Required fields are marked *

+