Cách Thêm Trang Đăng Nhập và Tiện Ích Front-End vào WordPress

Mục lục

Bạn có muốn thêm trang đăng nhập và tiện ích vào WordPress không?

Trang đăng nhập mặc định của WordPress không cung cấp trải nghiệm người dùng tốt nhất và có thể gây nhầm lẫn cho người dùng của bạn. Thêm trang đăng nhập front-end cho phép người dùng của bạn đăng nhập trực tiếp từ front-end của website.

Trong bài viết này, WPBeginner Việt Nam sẽ chỉ cho bạn cách dễ dàng thêm trang đăng nhập và tiện ích vào WordPress.

Cách thêm trang đăng nhập front-end và tiện ích trong WordPress (3 cách)

Tại sao và khi nào bạn cần đăng nhập giao diện người dùng trong WordPress?

Theo mặc định, trang đăng nhập WordPress sẽ hiển thị thương hiệu WordPress và thường không khớp với thiết kế của website WordPress hiện tại của bạn.

Cách này áp dụng cho các blog và website WordPress nhỏ.

Trang đăng nhập WordPress mặc định

Tuy nhiên, nếu bạn có website thành viên, cửa hàng trực tuyến hoặc website khác nơi người dùng có thể đăng ký và đăng nhập, thì việc thêm trang đăng nhập và tiện ích ở giao diện người dùng sẽ mang lại trải nghiệm tốt hơn cho người dùng.

Bạn thậm chí có thể custom trang này theo thương hiệu của mình hoặc thêm form đăng nhập đơn giản vào sidebar WordPress.

Nói như vậy, chúng ta hãy xem cách dễ dàng thêm trang đăng nhập front-end và tiện ích đăng nhập vào WordPress. Đối với hướng dẫn này, WPBeginner Việt Nam sẽ chỉ cho bạn 3 cách dễ nhất để thực hiện việc này và bạn có thể sử dụng các link bên dưới để chuyển đến phương pháp bạn chọn:

Video hướng dẫn

Đăng ký WPBeginner

Nếu bạn thích hướng dẫn bằng văn bản thì hãy tiếp tục đọc.

Phương pháp 1: Thêm Trang đăng nhập và Tiện ích Front-End trong WordPress bằng WPForms

Biểu mẫu WP là plugin form liên hệ WordPress tốt nhất trên thị trường, được hơn 6 triệu website sử dụng. Nó cho phép bạn dễ dàng tạo trang đăng nhập front-end custom và tiện ích đăng nhập trên website của mình.

Đầu tiên, bạn cần phải cài đặt và kích hoạt Biểu mẫu WP plugin. Để biết hướng dẫn chi tiết, vui lòng xem hướng dẫn dành cho người mới bắt đầu về cách cài đặt plugin WordPress.

Ghi chú: WPForms cũng có một phiên bản miễn phíTuy nhiên, bạn sẽ cần phiên bản cao cấp của plugin để mở khóa tiện ích Đăng ký người dùng.

Sau khi kích hoạt, hãy truy cập WPForms » Settings từ sidebar quản trị WordPress để nhập khóa cấp phép của bạn.

Bạn có thể lấy khóa này từ tài khoản của mình trên website WPForms.

Nhập code bản quyền WPForms

Sau khi bạn đã làm xong điều đó, hãy chuyển đến WPForms » Tiện ích bổ sung từ dashboard WordPress để tìm Tiện ích bổ sung Đăng ký người dùng.

Tiếp theo, nhấp vào nút ‘Cài đặt Addon’ để download và kích hoạt nó trên website của bạn.

Cài đặt addon form đăng ký và đăng nhập người dùng

Sau khi kích hoạt addon Đăng ký người dùng, hãy chuyển đến WPForms » Thêm mới màn hình từ sidebar quản trị để khởi chạy trình xây dựng form.

Từ đây, hãy bắt đầu bằng cách nhập tên cho form mà bạn sắp tạo. Sau đó, chỉ cần chọn mẫu ‘Biểu mẫu đăng nhập người dùng’ để bắt đầu tạo form đăng nhập người dùng của bạn.

Chọn mẫu form đăng nhập người dùng

Thao tác này sẽ khởi chạy mẫu trong trình tạo form, tại đó bạn sẽ thấy bản xem trước form ở bên phải và một cột các trường có sẵn ở bên trái.

Bây giờ, chỉ cần kéo và thả các trường từ cột bên trái để tạo form đăng nhập của bạn. Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách tạo trang đăng nhập custom cho WordPress.

Khi bạn đã hài lòng với cài đặt của mình, chỉ cần nhấp vào nút ‘Lưu’ để lưu lại thay đổi.

Biểu mẫu đăng nhập WPForms

Thêm form đăng nhập vào trang/bài viết

Bây giờ, để thêm form đăng nhập vào trang hoặc bài viết, hãy mở trang/bài viết bạn chọn trong trình chỉnh sửa block WordPress từ khu vực quản trị.

Khi vào đó, hãy nhấp vào nút ‘+’ để mở menu block và thêm block WPForms.

Thêm form đăng nhập

Sau đó, chọn form đăng nhập mà bạn đã tạo từ dropdown menu trong chính block đó.

Cuối cùng, nhấp vào nút ‘Xuất bản’ hoặc ‘Cập nhật’ để lưu cài đặt của bạn.

Thêm Form Đăng Nhập Vào Thanh Bên Của Website

Nếu bạn muốn thêm form đăng nhập vào sidebar của website, hãy truy cập Giao diện » Tiện ích trang từ dashboard WordPress.

Tại đây, nhấp vào nút ‘+’ ở góc trên bên trái của màn hình để mở menu chặn.

Từ đây, bạn cần tìm và thêm block WPForms vào sidebar.

Thêm block WPForms vào sidebar

Sau khi thực hiện xong, hãy chọn form đăng nhập từ dropdown menu trong chính block đó.

Cuối cùng, nhấp vào nút ‘Cập nhật’ để lưu cài đặt của bạn. Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách thêm form đăng nhập vào sidebar WordPress của bạn.

Bây giờ, bạn có thể truy cập trang WordPress của mình để xem form đăng nhập ở sidebar.

Hiển thị tiện ích đăng nhập WPForms

Thêm Form Đăng Nhập vào Trình Chỉnh Sửa Trang Web Đầy Đủ

Nếu bạn đang sử dụng theme theo block, thì bạn sẽ không thể thêm thông tin đăng nhập vào sidebar của website bằng phương pháp trên.

Để thêm form đăng nhập vào FSE, hãy truy cập Xuất hiện » Biên tập viên trang từ dashboard WordPress.

Thao tác này sẽ khởi chạy FSE, tại đây bạn phải nhấp vào nút ‘+’ để mở menu block.

Từ đây, hãy xác định vị trí và thêm block WPForms vào bất kỳ vị trí nào bạn thích trên website của mình.

Thêm block WPForms vào FSE

Sau đó, chọn form đăng nhập mà bạn đã tạo từ dropdown menu trong chính block đó.

Cuối cùng, nhấp vào nút ‘Lưu’ để lưu cài đặt của bạn.

Mẹo thưởng: Để custom thêm form đăng nhập, bạn có thể xem hướng dẫn của WPBeginner Việt Nam về cách định kiểu cho form WordPress.

Phương pháp 2: Thêm trang đăng nhập Front-End vào WordPress bằng SeedProd

Hạt giống là page builder kéo và thả WordPress tốt nhất trên thị trường, được hơn 1 triệu website sử dụng.

Nó cho phép bạn tạo một trang đăng nhập hoàn toàn custom, có thể phù hợp với thiết kế của website hiện tại của bạn hoặc có thể là một trang độc đáo.

Ví dụ về trang đăng nhập SeedProd

Công cụ này rất tối ưu với người mới bắt đầu và có rất nhiều mẫu trang đăng nhập được thiết kế chuyên nghiệp mà bạn có thể sử dụng để xây dựng trang đăng nhập của mình.

Đầu tiên, bạn cần phải cài đặt và kích hoạt Hạt giống plugin. Để biết chi tiết, hãy xem hướng dẫn từng bước của WPBeginner Việt Nam về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy truy cập SeedProd » Trang đích màn hình từ sidebar quản trị WordPress và chọn option ‘Trang đăng nhập’ bằng cách nhấp vào nút ‘Thiết lập Trang đăng nhập’.

Thiết lập trang đăng nhập

Thao tác này sẽ chuyển hướng bạn đến màn hình ‘Mẫu’, nơi bạn có thể chọn mẫu và sử dụng trình tạo kéo và thả để custom trang.

Bạn thậm chí có thể thiết kế một trang đăng nhập hoàn toàn custom từ đầu bằng cách sử dụng một mẫu trống.

Mẫu trang đăng nhập SeedProd

Khi chọn mẫu bạn muốn, bạn sẽ được yêu cầu nhập Tên trang. Sau đó, SeedProd sẽ sử dụng tên trang làm URL cho landing page form đăng nhập của bạn.

Sau khi thực hiện xong, hãy nhấp vào nút ‘Lưu và Bắt đầu Chỉnh sửa Trang’ để tiếp tục.

Nhập thông tin trang đăng nhập

Thao tác này sẽ khởi chạy trình tạo kéo và thả của SeedProd, tại đó bạn sẽ thấy bản xem trước trang đăng nhập ở bên phải với các trường có sẵn ở bên trái.

Từ đây, bạn có thể thêm bất kỳ block nào vào trang bằng cách kéo nó từ menu bên trái và đặt ở bất cứ đâu bạn thích.

Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách tạo trang đăng nhập WordPress custom.

Trang đăng nhập trong SeedProd

Sau khi hoàn tất thiết kế trang, đừng quên nhấp vào nút ‘Xuất bản’ trong dropdown menu ở trên cùng để lưu cài đặt của bạn.

Phương pháp 3: Thêm Trang Đăng nhập và Tiện ích Front-End trong WordPress Với Chủ đề My Login

Nếu bạn muốn thêm một trang đăng nhập front-end rất đơn giản vào website của mình, thì bạn có thể sử dụng miễn phí Chủ đề Đăng nhập của tôi plugin.

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

Sau khi kích hoạt, plugin sẽ tự động tạo các trang để đăng nhập, đăng xuất, quên mật khẩu và đăng ký.

Bạn có thể điều hướng đến Chủ đề Đăng nhập của tôi » Chung từ menu quản trị và xem cài đặt plugin.

Đầu tiên, bạn có thể thiết lập loại đăng nhập. Cài đặt ‘Mặc định’ là an toàn nhất vì nó yêu cầu email và mật khẩu để đăng nhập.

Chủ đề Cài đặt đăng nhập của tôi

Tiếp theo, bạn có thể chọn cài đặt Đăng ký. Chúng tôi giữ nguyên cài đặt mặc định ở đây vì chúng yêu cầu cả email và mật khẩu để đăng nhập.

Bạn cũng có thể đánh dấu vào ô ‘Mật khẩu’ để cho phép người dùng tự tạo mật khẩu và ô ‘Tự động đăng nhập’ để tự động đăng nhập người dùng sau khi họ đăng ký.

Chủ đề Cài đặt đăng ký Đăng nhập của tôi

Sau đó, bạn có thể thay đổi URL đăng nhập và đăng ký trong phần cài đặt ‘Slugs’.

Những điều này tự động tạo ra chuyển hướng. Vì vậy, URL đăng nhập chuẩn “yoursite.com/wp-admin” sẽ chuyển hướng đến “yoursite.com/login”.

Chủ đề Cài đặt slug URL đăng nhập của tôi

Bạn có thể giữ nguyên các URL này hoặc thay đổi chúng.

Sau khi thực hiện xong các thay đổi, hãy nhớ nhấp vào nút ‘Lưu thay đổi’.

Lưu theme Cài đặt đăng nhập của tôi

Bạn không thể thêm nhiều chức năng nâng cao hơn trừ khi bạn nâng cấp để sử dụng tiện ích mở rộng cao cấp của họ.

Tuy nhiên, đây vẫn là giải pháp tốt cho người dùng có ngân sách hạn chế nhưng muốn tạo một trang đăng nhập đơn giản.

Thêm Form Đăng nhập vào Trang/Bài viết

Bây giờ, để thêm form đăng nhập được tạo bởi Theme My Login, hãy mở một trang/bài đăng trong trình chỉnh sửa block WordPress.

Từ đây, nhấp vào nút ‘+’ để mở menu block và thêm block Mã ngắn vào trang.

Sau đó, thêm đoạn shortcode sau vào block:

[theme-my-login]

Thêm theme shortcode đăng nhập của tôi

Cuối cùng, nhấp vào nút ‘Cập nhật’ hoặc ‘Xuất bản’ để lưu cài đặt của bạn.

Bây giờ, hãy truy cập website của bạn để xem form đăng nhập.

Xem trước trang đăng nhập

Thêm form đăng nhập vào khu vực tiện ích

Bạn cũng có thể thêm form đăng nhập vào khu vực tiện ích WordPress của mình bằng cách sử dụng block Theme My Login.

Chỉ cần điều hướng đến Giao diện » Tiện ích trang và mở menu block bằng cách nhấp vào nút ‘+’.

Từ đây, bạn phải tìm và thêm block Theme My Login vào vùng tiện ích mà bạn chọn.

Thêm block Theme My Login vào vùng tiện ích

Sau đó, chọn form mà bạn muốn thêm từ dropdown menu trong chính block đó.

Cuối cùng, nhấp vào nút ‘Cập nhật’ để lưu cài đặt của bạn. Bây giờ, hãy truy cập trang WordPress của bạn để xem form đăng nhập trong khu vực tiện ích.

Chủ đề Khối đăng nhập của tôi xem trước trong sidebar

Phần thưởng: Thêm CAPTCHA vào Biểu mẫu đăng nhập WordPress

Sau khi đã thêm form đăng nhập custom, bạn nên thêm CAPTCHA vào đó vì trang này thường là mục tiêu của tin tặc và kẻ gửi thư rác.

Thêm CAPTCHA có thể chặn spambot và bảo mật website của bạn. Bạn có thể dễ dàng thực hiện việc này bằng Biểu mẫu WP.

Trang web WPForms

Sau khi kích hoạt plugin, chỉ cần truy cập WPForms » Settings từ dashboard WordPress và chuyển sang tab ‘CAPTCHA’.

Sau đó, chọn option ‘reCAPTCHA’ làm loại CAPTCHA của bạn.

Chọn loại CAPTCHA trong WPForms

Khi bạn làm điều đó, bạn phải ghé thăm Trang web Google reCAPTCHA để tạo khóa website và khóa bí mật. Các khóa này sẽ giúp tích hợp reCAPTCHA vào website WordPress của bạn.

Sau khi thêm các khóa này, bạn chỉ cần chỉnh sửa form WordPress mà bạn đã tạo trước đó và chuyển sang tab ‘Cài đặt’.

Sau đó, chọn option ‘Bảo vệ và bảo mật thư rác’ và bật công tắc ‘Bật Google v3 reCAPTCHA’. Tiếp theo, nhấp vào nút ‘Lưu’ để lưu cài đặt của bạn.

Bật reCAPTCHA trong form

Bây giờ bạn đã thêm thành công CAPTCHA vào form đăng nhập WordPress của mình và bảo mật hoàn toàn. Để biết hướng dẫn chi tiết hơn, bạn có thể xem hướng dẫn của WPBeginner Việt Nam về cách thêm CAPTCHA vào form đăng nhập và đăng ký WordPress.

Chúng tôi hy vọng bài viết này giúp bạn thêm trang đăng nhập front-end và tiện ích vào WordPress. Bạn cũng có thể muốn xem các lựa chọn chuyên gia của WPBeginner Việt Nam về các plugin thành viên tốt nhất cho WordPress và hướng dẫn cuối cùng của WPBeginner Việt Nam để cải thiện tốc độ và hiệu suất website của bạn.

Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh YouTube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên TwitterFacebook.

5/5 - (86 bình chọn)
Facebook
Twitter
LinkedIn
Telegram
Email
Đội Ngũ Biên Tập
WordPress

Đánh giá Sucuri – Sucuri đã giúp WPBeginner Việt Nam chặn 450.000 cuộc tấn công WordPress trong 3 tháng như thế nào

Bất cứ khi nào WPBeginner Việt Nam được hỏi về các mẹo bảo mật WordPress, hai trong số các recommend hàng đầu của WPBeginner Việt Nam là có được giải pháp backup WordPress tốt và bắt đầu sử dụng tường lửa website Sucuri. Tại WPBeginner, WPBeginner Việt Nam đã thử

Đọc tiếp »
WordPress

Cách quản lý tốt hơn các cập nhật WordPress tự động

Chúng tôi quản lý nhiều website WordPress và hiểu rằng việc cập nhật chúng là điều cần thiết để đảm bảo tính bảo mật, hiệu suất và tính ổn định của chúng. Nhưng việc quản lý các bản cập nhật đó theo cách thủ công có thể tốn thời gian

Đọc tiếp »