Chuyên mục
Wordpress

Form đăng nhập không dùng plugin trong WordPress

Tạo 1 Form đăng nhập không dùng plugin trong Wordpress sẽ giảm thiểu nhiều CSS và Java cho website của bạn. Việc này có lợi khi kiểm tra điểm số trên Google Pagespeed Insights.

Tạo 1 Form đăng nhập không dùng plugin trong WordPress sẽ giảm thiểu nhiều CSS và Java cho website của bạn. Việc này có lợi khi kiểm tra điểm số trên Google Pagespeed Insights.

Xem thêm: Form đăng ký tài khoản không dùng plugin

Form đăng nhập không dùng plugin trong WordPress
Form đăng nhập không dùng plugin trong WordPress

Tạo Form đăng nhập không dùng plugin

  • Tôi đặt phần này trong /[MY_THEME]/template_parts để tiện cho việc tạo ra nhiều trang đăng nhập khác nhau.
  • Sử dụng __(‘text’, ‘language_domain’) để tạo form đăng nhập không dùng plugin đa ngôn ngữ.

File /[MY_THEME]/template_parts/login_form.php

<?php
$remember = true; //mặc định: check "Nhớ mật khẩu"

if (isset($_POST['user_Login'])){
    global $login_errors;
    $username = $_POST['useremail'];  
    $password = $_POST['password'];  
    $remember = false;
    
    if(isset($_POST['rememberme']))
        $remember = boolval($_POST['rememberme']); 
        
    if (is_wp_error( $login_errors ))
    { 
        foreach ( $login_errors->get_error_messages() as $error )
        {
            if(!isset($signInError))
                $signInError = '';
             $signInError.='<p>'.$error.'</p>';
        }
        if(isset($signInError))
            $signInError ='<p class="title">'.__('ERROR(s)', 'twentytwenty').'</p>'.$signInError;
    } 
    
}

?>
<h1><?php echo __('Login', 'twentytwenty'); ?></h1>
<?php if(isset($signInError)){echo '<div class="error-dialog show">'.$signInError.'</div>';}?>

<form action="" method="post" name="user_LoginForm">
    <label><?php echo __('Email address', 'twentytwenty'); ?> <span class="error">*</span></label>
    <input type="text" name="useremail" class="text" placeholder="<?php echo __('Enter Your Email', 'twentytwenty'); ?>" value="<?php echo (isset($username)) ? $username : '' ?>" required /> <br />
    <label><?php echo __('Password', 'twentytwenty'); ?> <span class="error">*</span></label>
    <input type="password" name="password" class="text" placeholder="<?php echo __('Enter Your password', 'twentytwenty'); ?>" required /> <br />
    <input type="submit" name="user_Login" value="<?php echo __('SignIn','twentytwenty'); ?>" /> 
    <input type="checkbox" value="true" name="rememberme" id="rememberme" <?php echo (isset($remember) && $remember === true) ? 'checked="checked"' : '' ?> /> <label for="rememberme"><?php echo __('Remember me', 'twentytwenty'); ?></label>
</form>

Hàm kiểm tra đăng nhập

Được đặt trong functions.php của giao diện WordPress và được thực thi tại hook “template_redirect”. Việc này tránh được lỗi “cannot modify header information – headers already sent by …” bởi có dùng wp_redirect() hoặc wp_safe_redirect().

Xem thêm hàm wp_signon()

Thêm hàm sau vào file /[MY_THEME]/functions.php

<?php
add_action('template_redirect', 'vnlink_check_login');
function vnlink_check_login(){
    global $wp;
    $myurl = trailingslashit(site_url( $wp->request, 'login' ));
    
    if(isset($_POST['user_Login']) && $myurl == wp_login_url()){    // chỉ thực hiện khi nút "user_Login" được nhấn và
                                                                    // và chỉ cho phép tại trang đăng nhập
        global $login_errors;                                       
        $login_errors = new WP_Error;
        $username = $_POST['useremail'];  
        $password = $_POST['password'];  
        $remember = false;
        if(isset($_POST['rememberme']))
            $remember = boolval($_POST['rememberme']); 
        if(empty( $username ) || empty($password))
        {
            $login_errors->add('field', __('Required form field is missing!', 'twentytwenty'));
        }
        $userdata = array(
                    'user_login'        =>  $username,
                    'user_password'     =>  $password,
                    'remember'          => $remember
                    );
        $user_verify = wp_signon( $userdata, true ); 
        if ( is_wp_error($user_verify) )   
        {  
            $error_code = array_key_first( $user_verify->errors );
            $error_message = $user_verify->errors[$error_code][0];
            $login_errors->add('field', $error_message);
        } else{
            $redirect_url = '/my-account/';                         // trang mặc định sau khi đăng nhập thành công
                if(isset($_GET['redirect_to']) && strlen($_GET['redirect_to']) > 0)
                    $redirect_url = $_GET['redirect_to'];
                
                wp_safe_redirect($redirect_url);
                exit;
            
        }
    }
}

Tạo trang đăng nhập không dùng plugin

Mọi thứ đã sẵn sàng! Bây giờ, chúng ta chỉ cần nhúng template_parts ở trên vào trang đăng nhập là xong.

File /[MY_THEME]/templates/login_page.php

<?php
/**
 * Template Name: Đăng nhập
 * Template Post Type: post, page
 *
 */
if (! defined('ABSPATH')) {
    exit;
}

if ( is_user_logged_in()) {
    $redirect_url = '/my-account/';
    if(isset($_GET['redirect_to']))
        $redirect_url = $_GET['redirect_to'];
    wp_safe_redirect($redirect_url);
    exit;
}
get_header();

?>
<div class="container">
    <div class="page-content login">
<?php

    get_template_part( '/template-parts/login','form' );

?>
    </div>
</div>
<?php
get_footer();

Tất nhiên, bạn cũng có thể tự tạo một Form đăng nhập không dùng plugin tốt hơn thế này. Đây chỉ là một đoạn code tham khảo, hy vọng sẽ giúp các bạn xây xựng website của mình tốt hơn!

Trả lời