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

Bạn có muốn tạo một trang đăng nhập WordPress tùy chỉnh cho trang web của bạn?


Nếu bạn điều hành một trang web thành viên WordPress hoặc một cửa hàng trực tuyến, thì nhiều người dùng của bạn sẽ thường thấy trang đăng nhập. Tùy chỉnh trang đăng nhập mặc định của WordPress 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 cuối cùng này, chúng tôi sẽ chỉ cho bạn các cách khác nhau để tạo trang đăng nhập WordPress tùy chỉnh. Bạn cũng có thể sử dụng hướng dẫn này để tạo trang đăng nhập WooC Commerce tùy chỉnh..

Cách dễ dàng tạo trang đăng nhập WordPress tùy chỉnh cho trang web của bạn

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

    Tại sao tạo trang đăng nhập WordPress tùy chỉnh?

    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ử, trang web thành viên hoặc trên blog.

    Theo mặc định, trang đăng nhập hiển thị nhãn hiệu và logo WordPress. Điều này 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 quản trị viên.

    Màn hình đăng nhập mặc định của WordPress

    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 tùy chỉnh cung cấp 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 làm cho người dùng của bạn cảm thấy như ở nhà. Trong khi đó, việc chuyển hướng chúng đến màn hình đăng nhập mặc định của WordPress trông không giống trang web của bạn có thể gây nghi ngờ cho người dù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ứ thứ gì ngoài 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ó để quảng bá các trang khác hoặc các chương trình khuyến mãi đặc biệt.

    Điều đó đang được nói, hãy để một cái nhìn về một số ví dụ về thiết kế trang đăng nhập WordPress tùy chỉnh.

    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 WordPress bằng các phong cách và kỹ thuật khác nhau.

    Một số tạo ra một trang đăng nhập tùy chỉnh sử dụng chủ đề và màu sắc 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 nền tùy chỉnh, màu sắc và logo của riêng họ vào đó.

    1. WPForms

    WPForms

    WPForms là plugin hình thức 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 mẫu đăng ký và đăng ký WordPress đẹp mắt, chúng tôi sẽ giới thiệu cho bạn sau trong bài viết này.

    Trang đăng nhập tùy chỉnh 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 chương trình khuyến mãi và các hành động kêu gọi khác. Trong ví dụ trên, họ sử dụng trang đăng nhập để chia sẻ báo cáo thường niên. Nó sử dụng nhãn hiệu tùy chỉnh, hình minh họa nền và màu sắc thương hiệu để tạo trải nghiệm đăng nhập độc đáo.

    2. Đám cưới của tôi

    Rock My Wedding

    Trang web Rock My Wedding bằng cách sử dụng một phương thức bật lên để hiển thị mẫu đăng nhập và đăng ký. Ưu điểm của việc sử dụng cửa sổ bật lên là người dùng có thể đăng nhập mà không cần rời khỏi trang. Nó lưu chúng từ tải trang mới và cung cấp trải nghiệm người dùng nhanh hơn.

    3. Jacquelynne Steves

    Jacquelynne Steves

    Jacquelynne Steeves là một trang web nghệ thuật và thủ công nơi tác giả xuất bản 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 ảnh nền tùy chỉnh phù hợp với chủ đề trang web của họ với biểu mẫu đăng nhập ở bên phải.

    4. Đồ họa chuyển động nhà thờ

    Đồ họa chuyển động nhà thờ

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

    5. Đánh giá quản lý MITSLoan

    Đánh giá quản lý MITSLoan

    Trang web MITSLoan Management Review sử dụng màn hình đăng nhập mặc định của WordPress. Nó sử dụng CSS tùy chỉnh với logo riêng của họ để ẩn nhãn hiệu WordPress.

    Tạo trang đăng nhập tùy chỉnh Front-End trong WordPress

    Có một số plugin WordPress mà bạn có thể sử dụng để tạo trang đăng nhập tùy chỉnh mặt trước trong WordPress. Chúng tôi sẽ chỉ cho bạn hai plugin khác nhau và bạn có thể chọn một plugin phù hợp nhất với mình.

    Tạo trang đăng nhập WordPress bằng chủ đề Đăng nhập của tôi

    Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Theme My Đăng nhập. Để 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, Theme My Đăng nhập sẽ tự động tạo URL để đăng nhập tùy chỉnh, đăng xuất, đăng ký, quên mật khẩu và đặt lại hành động mật khẩu.

    Bạn có thể tùy chỉnh các URL đăng nhập WordPress này bằng cách truy cập Chủ đề Đăng nhập của tôi »Chung trang. Cuộn xuống phần ‘Slugs, để sửa đổi các URL này được plugin sử dụng cho các hành động đăng nhập.

    Chủ đề Trang đăng nhập của tôi

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

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

    Đi qua Trang »Thêm mới để 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 đoạn mã ngắn sau [chủ đề của tôi-đăng nhập] bên trong khu vực nội dung.

    Thêm mã ngắn

    Bây giờ bạn có thể xuất bản trang của mình và xem trước nó để xem trang đăng nhập tùy chỉnh của bạn hoạt động.

    Trang đăng nhập WordPress tùy chỉnh

    Lặp lại quy trình để tạo các trang khác bằng cách sử dụng các mã ngắn sau.

    [theme-my-login action = Đăng ký Đăng ký] cho mẫu đăng ký.

    [theme-my-login action = Mất bị mất mật khẩu] cho trang mật khẩu bị mất.

    [theme-my-đăng nhập hành động = Đặt lại mật khẩu] sử dụng nó trên trang mật khẩu đặt lại.

    Tạo trang đăng nhập WordPress tùy chỉnh bằng WPForms

    WPForms là plugin xây dựng 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 chỉnh 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 là gói pro của họ để truy cập tiện ích đăng ký người dùng. Người dùng WPBeginner có thể được giảm giá 50% bằng cách sử dụng mã phiếu giảm giá WPForms của chúng tôi: TIẾT KIỆM 50

    Đ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.

    Khi kích hoạt, bạn cần truy cập WPForms »Cài đặt trang để nhập khóa giấy phép 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.

    Giấy phép WPForms

    Sau khi nhập mã cấp phép, bạn sẽ có thể cài đặt các tiện ích bổ sung. Đi trước và thăm WPForms »Addon trang và định vị Addon đăng ký người dùng.

    Cài đặt addon đăng ký người dùng

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

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

    Tạo mẫu đăng nhập

    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 văn bản của riêng bạn xung quanh chúng.

    Trình xây dựng mẫu WPForms

    Bạn cũng có thể thay đổi các cài đặt khác. Ví dụ, nó tự động thêm ‘Gửi cảm ứng làm tiêu đề nút. Bạn có thể nhấp vào nó và sau đó thay đổi nó thành Đăng nhập.

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

    Bạn cũng có thể quyết định điều gì xảy ra khi người dùng đăng nhập thành công. Cài đặt »Xác nhận tab và chọn một hành động.

    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 khác, chuyển hướng họ đến trang chủ hoặc chỉ cần hiển thị cho họ một thông báo mà họ hiện đang đăng nhập.

    Khi bạn hài lòng với cài đặt biểu mẫu, 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 tùy chỉnh của bạn vào trang WordPress

    WPForms giúp dễ dàng thêm hình thức đăng nhập tùy chỉnh của bạn 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 hình thức mới. Trên màn hình chỉnh sửa trang, thêm khối WPForms vào khu vực nội dung của bạn.

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

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

    Xem trước mẫu đăng nhập

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

    Tùy chỉnh thiết kế trang đăng nhập WordPress của bạn

    Theo mặc định, trang biểu mẫu đăng nhập WordPress tùy chỉnh của bạn sẽ sử dụng mẫu và kiểu trang chủ đề của bạn. Nó sẽ có các menu điều hướng chủ đề, các tiêu đề, chân trang và các tiện ích thanh bên của bạn.

    Nếu bạn muốn chiếm toàn bộ toàn bộ trang và thiết kế một cái gì đó từ đầu, thì bạn có thể sử dụng plugin xây dựng trang WordPress.

    Với plugin xây dựng trang, bạn có thể tạo bố cục trang tùy chỉnh và sau đó thêm tiện ích biểu mẫu đăng nhập được cung cấp bởi Theme My Đăng nhập 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 phổ biến. Chúng tôi đã sử dụng một hình ảnh nền trên bố cục toàn màn hình và sau đó thêm hai cột. Trong một cột, chúng tôi đã thêm một số văn bản và một nút. Trong cột khác, chúng tôi đã thêm tiện ích WPForms.

    Tạo trang đăng nhập tùy chỉnh bằng cách sử dụng plugin xây dựng trang

    Lợi ích của Beaver Builder là giải pháp kéo và thả 100%.

    Ghi chú: Vì bạn đã đăng nhập, cả plugin Theme My Đăng nhập và WPForms có thể không hiển thị bản xem trước trực tiếp của biểu mẫu đăng nhập. Plugin WPForms có một tùy chọn trong đó bạn có thể tắt tùy chọn này trong cài đặt biểu mẫu.

    Nếu các plugin xây dựng trang WordPress không phải là thứ của bạn, thì bạn có thể sử dụng CSS tùy chỉnh để tạo kiểu cho biểu mẫu và chính trang đăng nhập. Ngoài ra, bạn cũng có thể sử dụng plugin CSS Hero để dễ dàng thêm các kiểu CSS tùy chỉnh.

    Thay đổi Logo và URL đăng nhập WordPress

    Bạn không cần phải luôn luôn tạo một trang đăng nhập WordPress hoàn toàn tùy chỉnh cho trang web của mình. Trên thực tế, rất nhiều trang web chỉ thay thế logo WordPress và url logo 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 bằng logo của riêng bạn, thì bạn có thể dễ dàng thực hiện bằng cách sử dụng plugin WordPress hoặc bằng cách thêm mã tùy chỉnh. Chúng tôi sẽ chỉ cho bạn cả hai phương pháp bạn có thể sử dụng một phương pháp phù hợp nhất với bạn.

    Thay đổi Logo và URL đăng nhập WordPress bằng cách sử dụng Plugin

    Điều đầu tiên bạn cần làm là cài đặt và kích hoạt Trình tùy chỉnh đăng nhập Colorlib. cắm vào. Để 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, plugin sẽ thêm một mục menu mới có nhãn Đăng nhập Tùy biến Đăng nhập vào thanh bên quản trị viên WordPress. Nhấp vào nó sẽ khởi chạy tùy biến đăng nhập.

    Đăng nhập tùy biến

    Tùy biến đăng nhập sẽ tải màn hình đăng nhập WordPress mặc định của bạn với các tùy chọn tùy chỉnh ở bên trái và xem trước trực tiếp ở bên phải.

    Để thay thế logo WordPress bằng logo của riêng bạn, hãy nhấp vào tab options Tùy chọn Logo tab bên phải. Từ đây bạn có thể ẩn logo WordPress, tải lên logo tùy chỉnh của riêng bạn, thay đổi URL logo và văn bản.

    Tải logo tùy chỉnh lên trang đăng nhập

    Plugin cũng cho phép bạn tùy chỉnh hoàn toàn trang đăng nhập mặc định của WordPress. Bạn có thể thêm cột, hình nền, thay đổi màu của mẫu đăng nhập và hơn thế nữa.

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

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

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

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

    Phương pháp này cho phép bạn thay thế thủ công logo WordPress trên màn hình đăng nhập bằng logo tùy chỉnh của riêng bạn.

    Đầu tiên, bạn cần tải logo tùy chỉnh lên thư viện phương tiện. Đi đến Phương tiện »Thêm mới trang và tải lên logo tùy chỉnh của bạn.

    Khi bạn đã tải lên hình ảnh, nhấp vào liên kết ‘Chỉnh sửa trực tiếp bên cạnh nó. Điều này sẽ mở trang chỉnh sửa phương tiện mà bạn cần sao chép URL tệp và dán nó vào một tệp văn bản trống trên máy tính của bạn.

    Tiếp theo, bạn cần thêm đoạn mã sau vào tệp chủ đề của bạn..

    hàm wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    hình nền: url (http: //path/to/your/custom-logo.png);
    chiều cao: 100px;
    chiều rộng: 300px;
    kích thước nền: 300px 100px;
    lặp lại nền: không lặp lại;
    đệm dưới cùng: 10px;
    }

    <?php}
    add_action (‘login_enqueue_scripts’, ‘wpb_login_logo’);

    Đừng quên thay thế URL 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 tùy chỉnh của bạn.

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

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

    Mã 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 đoạn mã sau vào tập tin chủ đề của bạn có chức năng hoặc một plugin dành riêng cho trang web. Bạn có thể thêm mã này ngay bên dưới mã bạn đã thêm trước đó.

    hàm wpb_login_logo_url () {
    trở về nhà_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    hàm wpb_login_logo_url_title () {
    trả về ‘Tên và thông tin trang web của bạn’;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

    Donith quên thay thế Name Tên trang web của bạn và Thông tin với tên trang web của bạn. Logo tùy chỉnh trên màn hình đăng nhập của bạn 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 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 cuối cùng 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.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me