Chức năng đăng nhập WordPress

Bạn đã bao giờ tự hỏi liệu có cách nào để làm cho trang đăng nhập phù hợp với thiết kế trang web của bạn không?

Nếu có, bạn đã đến đúng nơi. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn các phương pháp khác nhau để tùy chỉnh trang đăng nhập của bạn mà không cần bất kỳ plugin nào

Những gì chúng ta đã bao gồm ngày hôm nay?

• Trang đăng nhập mặc định của WordPress
• Tại sao bạn nên tạo một trang đăng nhập tùy chỉnh?
• Tùy chỉnh trang đăng nhập mặc định của WordPress
  • Tùy chỉnh logo trang đăng nhập
  • Vô hiệu hóa Trình chuyển đổi ngôn ngữ trang đăng nhập WordPress
• Tạo một trang đăng nhập tùy chỉnh mới

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

Theo mặc định, bạn có thể truy cập trang đăng nhập WordPress bằng cách thêm /login/, /admin/ hoặc wp-login. php vào cuối URL trang web của bạn

Bạn nhận được màn hình đăng nhập này mỗi khi bạn làm như vậy, phải không?

Như bạn có thể thấy, trang đăng nhập WordPress chứa các yếu tố sau

1. nền mặc định
2. Biểu tượng WordPress
3. Các trường nhập (tên người dùng và mật khẩu)
4. Hộp kiểm Nhớ tôi
5. Nút gửi
6. Liên kết Mất mật khẩu
7. Quay lại liên kết

Điều gì sẽ xảy ra nếu bạn muốn thay thế trang chung này bằng trang tùy chỉnh của mình, giả sử, cho mục đích xây dựng thương hiệu?

Chỉ cần tiếp tục đọc đến cuối blog của chúng tôi. Sẽ có một số bất ngờ cho bạn. 🙂

Tại sao bạn nên tạo một trang đăng nhập tùy chỉnh WordPress?

Đầu tiên và quan trọng nhất, các trang đăng nhập tùy chỉnh mang lại trải nghiệm người dùng tốt hơn nhiều. Nếu bạn đang điều hành một doanh nghiệp nhỏ có ít người dùng đăng nhập vào trang web của mình, bạn hoàn toàn có thể sử dụng trang đăng nhập mặc định của WordPress

Tuy nhiên, hãy tưởng tượng rằng trang web của bạn là một cửa hàng trực tuyến, cho phép khách hàng đăng nhập vào trang web của bạn thông qua một cổng nhàm chán và không có thương hiệu không phải là một lựa chọn tốt

Cách tốt nhất là làm cho trang đăng nhập phù hợp với phong cách trang web của bạn

Một lợi ích khác của việc có trang đăng nhập tùy chỉnh WordPress là tăng cường bảo mật cho trang web của bạn. Bằng cách thay đổi URL đăng nhập WordPress mặc định, những người dùng không mong muốn không thể truy cập trang đăng nhập quản trị của bạn một cách dễ dàng. Điều này giúp tránh các cuộc tấn công không mong muốn trên trang web của bạn

Bây giờ, hãy chuyển sang các phần tiếp theo, nơi chúng tôi sẽ hướng dẫn bạn các bước chi tiết để tạo trang đăng nhập của riêng bạn

Tùy chỉnh trang đăng nhập mặc định của WordPress

Bạn có biết rằng bạn có thể thay thế logo và liên kết trên trang đăng nhập mặc định của WordPress bằng trang của riêng bạn không?

Tùy chỉnh logo trang đăng nhập

Để thay thế logo WordPress, chỉ cần thêm đoạn mã sau vào chức năng của chủ đề (con) của bạn. tập tin php

function ppwp_custom_login_logo() { ?>
    
Thao tác này chỉ giúp bạn thay logo. Khi nhấp vào logo của bạn, bạn vẫn được chuyển hướng đến trang WordPress
Làm cách nào bạn có thể chuyển hướng người dùng đến trang web của mình?
Chỉ là một miếng bánh với đoạn mã sau
function ppwp_custom_login_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'ppwp_custom_login_url' );
function ppwp_login_logo_url_redirect() {
    return 'https://passwordprotectwp.com/';
}
add_filter( 'login_headertitle', 'ppwp_login_logo_url_redirect' );
Đừng quên thay thế URL của trang web bằng tên thật của trang web của bạn. Logo tùy chỉnh trên màn hình đăng nhập của bạn hiện được trỏ đến trang chủ của trang web của bạn
Vô hiệu hóa Trình chuyển đổi ngôn ngữ trang đăng nhập WordPress
wordpress 5. 9 bao gồm một tính năng để người dùng chọn ngôn ngữ khi đăng nhập vào trang web của bạn
Nó rất hữu ích khi bạn đang điều hành một trang web đa ngôn ngữ. Nếu trang web của bạn có sẵn bằng một ngôn ngữ, bạn có thể muốn tắt chức năng đó để đơn giản hóa biểu mẫu đăng nhập của mình
Làm thế nào bạn có thể làm điều đó?
Chỉ cần thêm đoạn mã sau vào chức năng của chủ đề (con) của bạn. php hoặc plugin Code Snippets



add_filter( 'login_display_language_dropdown', '__return_false' );
Tạo một trang đăng nhập tùy chỉnh WordPress mới
Điều gì sẽ xảy ra nếu bạn muốn làm nhiều hơn là chỉ thay đổi logo và liên kết?
WordPress có cho phép bạn tạo trang đăng nhập của riêng mình và thay thế trang mặc định của WordPress bằng trang của bạn không?
Đúng. Bạn hoàn toàn có thể
Chỉ cần làm theo các bước của chúng tôi dưới đây. Xin lưu ý rằng hướng dẫn này yêu cầu một chút kiến ​​thức về mã hóa. Nếu bạn không quen với mã, hãy sử dụng plugin để thay thế
Hãy nhớ sao lưu trang web của bạn trước khi bắt đầu
Bước 1. Tạo một tệp mẫu mới
Để làm điều đó, hãy vào Giao diện > Trình chỉnh sửa tệp chủ đề
Trong phần mẫu-bộ phận, thêm một cái mới. php và đặt tên theo ý muốn của bạn, e. g. trang đăng nhập tùy chỉnh. php
Điều đầu tiên, hãy thêm dòng này vào tệp mẫu tùy chỉnh của bạn
Custom Login Pages */ ?>
Hành động này sẽ làm cho tệp PHP đã tạo của bạn trở thành mẫu trang. Theo đó, bạn sẽ thấy tên mẫu khi chỉnh sửa các trang trong phần phụ trợ
Bước 2. Tùy chỉnh tệp mẫu đã tạo của bạn
Bước tiếp theo là thêm mã PHP để tạo một biểu mẫu đăng nhập hoàn chỉnh
Thêm một hình thức đăng nhập
Custom Login Page
*/
get_header();
if ( ! is_user_logged_in() ) {
    $args = array
        'redirect' => admin_url(), // redirect to admin dashboard.
        'form_id' => 'custom_loginform',
        'label_username' => __( 'Username:' ),
        'label_password' => __( 'Password:' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log Me In' ),
         'remember' => true
    );
wp_login_form( $args );
}
get_footer();
Chuyển hướng đăng nhập wp. php vào trang đăng nhập tùy chỉnh
Bạn đã tạo thành công một trang đăng nhập tùy chỉnh. Tuy nhiên, người dùng vẫn có thể truy cập trực tiếp vào trang đăng nhập mặc định của WordPress bằng cách nhập wp-admin hoặc wp-login. php sau URL trang web của bạn
Để tránh điều này xảy ra, bạn cần chuyển hướng người dùng từ URL đăng nhập mặc định của WordPress sang URL tùy chỉnh của bạn



Để làm điều đó, hãy thêm các mã tùy chỉnh sau vào chức năng của chủ đề (con) của bạn. plugin php hoặc Code Snippets
function redirect_login_page() {
    $login_url  = home_url( '/login' );
    $url = basename($_SERVER['REQUEST_URI']); // get requested URL
    isset( $_REQUEST['redirect_to'] ) ? ( $url   = "wp-login.php" ): 0; // if users ssend request to wp-admin
    if( $url  == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET')  {
        wp_redirect( $login_url );
        exit;
    }
}
add_action('init','redirect_login_page');
Xử lý lỗi đăng nhập
Khi bạn đã hoàn tất việc tạo trang đăng nhập tùy chỉnh, người dùng nhập thông tin đăng nhập chính xác sẽ vào trang tổng quan. Yêu cầu đăng nhập không thành công sẽ được chuyển hướng đến trang mặc định của WordPress
Để xử lý các lần đăng nhập không thành công, hãy thêm đoạn mã sau vào chức năng của chủ đề (con) của bạn. tập tin php
function error_handler() {
    $login_page  = home_url( '/login' );
    global $errors;
    $err_codes = $errors->get_error_codes(); // get WordPress built-in error codes
    $_SESSION["err_codes"] =  $err_codes;
    wp_redirect( $login_page ); // keep users on the same page
    exit;
}
add_filter( 'login_errors', 'error_handler');
Tiếp theo, thêm các mã sau vào custom_login_page. php
$err_codes = isset( $_SESSION["err_codes"] )? $_SESSION["err_codes"] : 0;
    if( $err_codes !== 0 ){
        echo display_error_message(  $err_codes );
}
function display_error_message( $err_code ){
    // Invalid username.
    if ( in_array( 'invalid_username', $err_code ) ) {
        $error = 'ERROR: Invalid username.';
    }
    // Incorrect password.
    if ( in_array( 'incorrect_password', $err_code ) ) {
        $error = 'ERROR: The password you entered is incorrect.';
    }
    // Empty username.
    if ( in_array( 'empty_username', $err_code ) ) {
        $error = 'ERROR: The username field is empty.';
    }
    // Empty password.
    if ( in_array( 'empty_password', $err_code ) ) {
        $error = 'ERROR: The password field is empty.';
    }
    // Empty username and empty password.
    if( in_array( 'empty_username', $err_code )  &&  in_array( 'empty_password', $err_code )){
        $error = 'ERROR: The username and password are empty.';
    }
return $error;
}
Bước 3. Tạo một trang mới và gán mẫu đã tạo cho trang tùy chỉnh
Bây giờ, hãy điều hướng đến phần Trang trong bảng điều khiển quản trị viên của bạn và tạo một trang mới
Trong menu thả xuống Mẫu trong phần Thuộc tính trang, hãy chọn mẫu bạn đã tạo
Lưu trang
Bây giờ bạn đã có trang đăng nhập của riêng mình
Bạn đã tạo thành công trang đăng nhập tùy chỉnh của mình chưa?
Chúng tôi đã hướng dẫn bạn các bước chi tiết để tùy chỉnh trang đăng nhập quản trị của bạn
Bạn có thể thay đổi logo và URL được liên kết trong biểu mẫu đăng nhập mặc định của WordPress
Ngoài ra, bạn có thể tạo trang đăng nhập tùy chỉnh WordPress của riêng mình bằng cách tạo mẫu trang mới. Mặc dù giải pháp thứ 2 ban đầu có vẻ yêu cầu kiến ​​thức về mã hóa, nhưng nó khá dễ dàng với hướng dẫn từng bước rõ ràng của chúng tôi. Vì vậy, đừng lo lắng gì cả
 

			
Đăng nhập hoạt động như thế nào trong WordPress?
			
Đăng nhập vào WordPress
 . Cả hai URL này sẽ đưa bạn đến trang đăng nhập nơi bạn có thể nhập tên người dùng và mật khẩu của mình. Sau khi đăng nhập, bạn sẽ được đưa trực tiếp đến khu vực quản trị hoặc bảng điều khiển của trang web của bạn. add /login/ or /admin/ to the end of your site's URL. Both of these URLs will take you to your login page where you can enter your username and password. Once logged in, you will be taken directly to the admin area, or dashboard, of your site.
		
			
Làm cách nào để đăng nhập WordPress theo chương trình?
			
Xác thực người dùng theo chương trình . 
 
Bạn nhấp vào một liên kết và được đưa đến biểu mẫu xác thực của bên thứ ba
 
Bạn cung cấp địa chỉ email và mật khẩu của bạn,
 
Nhà cung cấp sử dụng thông tin này để xác thực bạn,
 
Giả sử mật khẩu của bạn cho dịch vụ đã nói là hợp lệ, người dùng sẽ được chuyển hướng trở lại WordPress