Cách Thay Đổi Giao Diện Đăng Nhập WordPress


Bạn có muốn Thay Đổi Giao Diện Đăng Nhập WordPress cho trang web của bạn không?

Nếu bạn đang quản trị một trang web thành viên WordPress hoặc một  trang thương mại điện tử để bán hàng, thì chắc chắn nhiều người dùng của bạn sẽ thường xuyên sử dụng trang đăng nhập. Tùy chỉnh 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.

Trong hướng dẫn này, Mình sẽ chỉ cho bạn nhiều cách khác nhau để thay đổi và tạo trang đăng nhập WordPress theo đúng ý của bạn muốn. Bạn cũng có thể sử dụng hướng dẫn này để thay đổi trang đăng nhập WooCommerce.

Tại sao phải Thay Đổi Giao Diện Đă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ực tiếp trên cửa hàng Thương mại điện tử , trang web thành viên hoặc trên blog.

Theo mặc định, trang đăng nhập hiển thị thương hiệu và logo WordPress. Nếu bạn quản trị một blog nhỏ hoặc là người duy nhất có quyền truy cập quản trị viên thì điều này không đáng bận tâm.

Giao diện đăng nhập WordPress mặc định
Giao diện đăng nhập WordPress mặc định

Tuy nhiên, nếu trang web của bạn cho phép người dùng đăng ký và đăng nhập, thì trang đăng nhập được thiết kế chuyên nghiệp và đẹp mắt 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 được sự uy tín và cảm giác tin tưởng vào thương hiệu của bạn hơn. Mặt khác, giao diện đăng nhập WordPress mặc định nhìn khá củ chuối :D, thiếu chuyên nghiệp, kém chất lượng và cảm giác không an tâm khi sử dụng.

Hơn nữa, giao diện đăng nhập mặc định không chứa bất kỳ thứ gì ngoài biểu mẫu đăng nhập. Bằng cách thay đổi giao diện trang đăng nhập, bạn có thể sử dụng nó để quảng bá các trang khác hoặc các chương trình khuyến mãi đặc biệt.

Hãy xem một số ví dụ về một số giao diện đăng nhập WordPress được thiết kế lại một cách chỉnh chu:

Ví Dụ Về Giao Diện Đăng Nhập WordPress Đã Được Thay Đổi

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

Một số thay đổi trang đăng nhập theo chủ đề và màu sắc của trang web của họ. Những người khác sửa đổi trang đăng nhập mặc định bằng cách thêm hình nền, màu sắc thương hiệu và Logo.

1. WPForms

WPForms
WPForms

WPForms là plugin biểu mẫu liên hệ WordPress tốt nhất trên thị trường. Thật trùng hợp, plugin của họ cũng bao gồm một tiện ích bổ sung để tạo các Form đăng nhập và đăng ký WordPress đẹp mắt, mình sẽ giới thiệu cho bạn ở phần sau của bài viết này.

Trang đăng nhập của họ sử dụng bố cục 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 để làm nổi bật các khuyến mại và lời kêu gọi hành động khác.

Trong ví dụ trên, họ đang sử dụng trang đăng nhập để chia sẻ báo cáo hàng năm của mình. Bằng cách sử dụng hình ảnh, hình nền minh họa và màu sắc thương hiệu họ đã tạo ra trải nghiệm đăng nhập độc đáo và thú vị.

2. Rock My Wedding

Trang đăng nhập Rock My Wedding
Trang đăng nhập Rock My Wedding

Trang web của Rock My Wedding sử dụng phương thức Pop-up để hiển thị biểu mẫu đăng nhập và đăng ký .

Ưu điểm của việc sử dụng cửa sổ Pop-up là người dùng có thể đăng nhập mà không cần rời khỏi trang. Nó giúp họ không tốn thời gian tải trang mới và mang lại trải nghiệm người dùng nhanh hơn.

3. Jacquelynne Steves

Trang đăng nhập Jacquelynne Steves
Trang đăng nhập Jacquelynne Steves

Jacquelynneosystemves là một trang web nghệ thuật và thủ công, nơi tác giả đăng nội dung về trang trí nhà cửa, làm mền, hoa văn, thêu, v.v.

Trang đăng nhập của họ sử dụng hình nền phù hợp với chủ đề trang web của họ với biểu mẫu đăng nhập ở bên phải. Đơn giản nhưng hiệu quả.

4. Church Motion Graphics

Church Motion Graphics
Trang đăng nhập Church Motion Graphics

Trang đăng nhập của công ty thiết kế đồ họa chuyển động này sử dụng nền đầy màu sắc phản ánh hoạt động kinh doanh của họ.

Nó sử dụng cùng các menu đầu trang, chân trang và điều hướng của trang web trên màn hình đăng nhập. Hình thức đăng nhập khá đơn giản với màu nền hơi tối.

5. MITSLoan Management Review

Trang đăng nhập của MITSLoan
Trang đăng nhập của MITSLoan

Trang web MITSLoan sử dụng giao diện đăng nhập với bố cục mặc định. Đồng thời tuỳ chỉnh lại với CSS và logo riêng để ẩn thương hiệu WordPress.

Vậy là bạn đã hình dung ra được một giao diện đăng nhập mang đặc trưng riêng của từng thương hiệu như thê nào rồi, bạn đã sẵn sàng tìm hiểu cách thay đổi trang đăng nhập WordPress cho chính website của bạn chưa?

Thay đổi giao diện đăng nhập WordPress bằng Theme My Login

Theme My Login là một plugin miễn phí thay đổi trang đăng nhập của bạn để phù hợp với Werbsite của bạn.

Nó không tùy biến được nhiều, nhưng nó sẽ thay thế trang đăng nhập mặc định mang màu sắc của thương hiệu và trông chuyên nghiệp hơn một chút.

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

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

Bạn có thể tùy chỉnh các URL đăng nhập WordPress này bằng cách truy cập Trang Theme My Login » Chung . Cuộn xuống phần ‘Slugs’ để sửa đổi các URL này theo ý muốn của bạn.

Sửa đổi URL đăng nhập mặc định của Theme My Login
Sửa đổi URL đăng nhập mặc định của Theme My Login

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

Mình sẽ làm thử với trang đăng nhập.

Đi tới Trang » Thêm Mới để tạo một trang WordPress mới. Tiếp theo, bạn cần đặt tiêu đề cho trang của mình và sau đó nhập Shortcode sau “[theme-my-login]” bên trong vùng nội dung.

Thêm shortcode
Thêm shortcode

Bây giờ bạn có thể xuất bản trang vừa tạo và thử xem trang đăng nhập bạn vừa tạo nhìn như thế nào.

Trang đăng nhập vừa được thay đổi
Trang đăng nhập vừa được thay đổi

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 trang đăng ký.
  • [theme-my-login action="lostpassword"]cho trang bị mất mật khẩu.
  • [theme-my-login action="resetpass"] sử dụng mã này cho trang đặt lại mật khẩu.

Thay đổi giao diện đăng nhập WordPress bằng WPForms

WPForms là plugin tạo biểu mẫu WordPress tốt nhất trên thị trường. Nó cho phép bạn dễ dàng tạo các biểu mẫu đăng nhập và đăng ký tùy ý cho trang web của bạn.

WPForms là một plugin WordPress cao cấp và bạn phải cần gói PRO thì mới có thể sử dụng các tính năng cao cấp, bao gồm tính năng chỉnh sửa giao diện trang đăng nhập. Hiện WPVie Shop đang có phiên bản WPFroms cao cấp nhất, được kích hoạt sẵn giá chỉ 99.000đ.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPForms . Nếu chưa biết cách cài, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress .

Sau khi kích hoạt, truy cập trang WPForms » Addons và xác định vị trí Addon đăng ký người dùng.

Cài đặt tiện ích mở rộng
Cài đặt tiện ích mở rộng

Tiếp theo, nhấp 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 và thay đổi giao diện đăng nhập theo ý của bạn.

Đi tới WPForms » Thêm trang mới và cuộn xuống phần ‘Biểu mẫu đăng nhập người dùng’. Nhấp vào nút ‘Tạo Biểu mẫu Đăng nhập Người dùng‘ để tiếp tục.

Tạo Biểu mẫu Đăng nhập Người dùng
Tạo Biểu mẫu Đăng nhập Người dùng

WPForms sẽ tải Biểu mẫu đăng nhập người dùng với các trường bắt buộc. Bạn có thể nhấp vào các trường để thêm mô tả hoặc tên gọi,.. theo ý muốn.

Trình tạo form đăng nhập
Trình tạo form đăng nhập

Bạn cũng có thể thay đổi các cài đặt khác.

Ví dụ: Mặc định, nút của form sẽ có tiêu đề là ‘Gửi‘. Bạn có thể nhấp vào và sau đó thay đổi nó thành Đăng nhập.

Cài đặt biểu mẫu
Cài đặt biểu mẫu

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. Đi tới tab Cài đặt » Xác nhận và chọn một hành động.

Chuyển hướng người dùng đã đăng nhập
Chuyển hướng người dùng đã đăng nhập

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

Khi bạn đã hài lòng với cài đặt biểu mẫu, hãy nhấp vào nút Lưu ở góc trên cùng bên phải của màn hình và đóng trình tạo biểu mẫu.

Thêm biểu mẫu đăng nhập mới của bạn vào trang WordPress

WPForms giúp bạn dễ dàng thêm biểu mẫu đăng nhập tùy chỉnh của mình trên bất kỳ bài đăng hoặc trang WordPress nào.

Chỉ cần chỉnh sửa trang mà bạn muốn thêm biểu mẫu đăng nhập hoặc tạo một trang mới. Sau đó, trên màn hình chỉnh sửa trang, hãy thêm block WPForms vào vùng nội dung mà bạn muốn.

Thêm Block WPForms vào bài đăng
Thêm Block WPForms vào bài đăng

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

Bản xem trước biểu mẫu đăng nhập
Bản xem trước biểu mẫu đăng nhập

Sau đó, bạn có thể tiếp tục chỉnh sửa trang biểu mẫu đăng nhập hoặc Lưuxuất Bản các thay đổi của mình.

Thay Đổi LOGO và URL Đăng Nhập WordPress Không Cần Plugin

Không phải lúc nào bạn cũng cần thay đổi hoàn toàn giao diện trang đăng nhập WordPress. Trên thực tế, rất nhiều trang web chỉ thay thế LogoLink đăng nhập WordPress là vừa đủ với nhu cầu của họ rồi.

Phương pháp này cho phép bạn thay thế logo WordPress mặc định trong giao diện đăng nhập bằng Logo của riêng bạn .

Trước tiên, bạn cần tải Logo của bạn lên thư viện Media.

Khi bạn đã tải lên hình ảnh, hãy nhấp vào liên kết ‘Chỉnh sửa‘ bên cạnh nó. Thao tác này sẽ mở trang phương tiện chỉnh sửa, nơi bạn cần sao chép URL của tệp và lưu lại ở bất cứ đâu bạn cảm thấy tiện để tý nữa sẽ cần dùng đến.

Tiếp theo, bạn cần thêm đoạn Code sau vào tệp functions.php của theme.

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(Link Của Logo bạn vừa lưu);
        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 mình đã tô đậm Link Của Logo bạn vừa lưu bằng URL Logo của 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 theo ý muốn.

Bây giờ bạn có thể truy cập trang đăng nhập WordPress để xem Logo của bạn trông như thế nào và cứ thoải mái tinh chỉnh cho tới khi vừa ý.

Trang đăng nhập WordPress với logo tùy chỉnh
Trang đăng nhập WordPress với Logo riêng

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

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

Chỉ cần thêm Code sau vào tệp functions.php lúc đầu. Bạn có thể thêm Code này ngay bên dưới Code bạn đã thêm 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 'Tên Website Của Bạn';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

Đừng quên thay thế Tên Website Của Bạn bằng tên trang web của bạn. Logo tùy chỉnh trong giao diện đăng nhập của bạn bây giờ sẽ trỏ đến trang chủ Website của bạn.

Vậy là xong. Mình hy vọng bài viết này đã giúp bạn tìm hiểu các cách khác nhau để thay đổi giao diện trang đăng nhập WordPress 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 mình để biết các mẹo về cải thiện bảo mật đăng nhập WordPress hoặc xem danh sách các Plugins Cần thiết cho WordPress của mình.

Mình là quản trị viên của WPVie. Hy vọng với những kiến thức bổ ích mà WPVie truyền tải sẽ giúp cho các bạn có thể tự tạo nên cho mình một Cửa hàng online, một Blog cá nhân hay thậm chí một Website cho doanh nghiệp của bạn.

Viết một bình luận