Tạo trang login riêng cho website WordPress

Trong bài viết này mình đang sử dụng theme TWENTY TWENTY mặc định của WordPress để demo trang login riêng cho website wordpress. Nếu bạn đang sử dụng theme khác thì cần thay đổi cho phù hợp với theme.

Trang login này sẽ kiểm tra tài khoản đăng nhập bằng hàm kiểm tra user của wordpress, và sẽ hướng dẫn bạn tạo trên menu thêm item là Login / Logout(nếu đã đăng nhập)

Tạo một template mới cho theme

Tạo file có tên: template-custom-login.php trong folder TWENTYTWENTY.

Tiếp theo hãy code như sau:

<?php
/* 
* Template Name: Custom Login Form
*/
?>

<?php
if ( !is_user_logged_in() ) {
    if( empty($_GET['redirect_to']) ){
        wp_safe_redirect( home_url() . "/custom-login?login=notyet&redirect_to=" . urlencode( home_url() ) ); exit;
    } else {
            get_header();
            ?>

            <main id="site-content" role="main">
                <div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">

                    <div class="entry-content">

                        <?php
                            include_once "custom-login.php";
                        ?>

                    </div><!-- .entry-content -->

                    </div><!-- .post-inner -->

            </main><!-- #site-content -->

            <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

            <?php get_footer(); ?>

<?php } ?>
<?php } else { ?>
    <?php 
        wp_redirect( home_url( ) );
    ?>
<?php }  ?>

Bạn hãy để ý dòng code include_once “custom-login.php” (dòng 21), dùng để import code từ file khác vào. File đó có tên là custom-login.php, cho nên bạn hãy tạo một file có tên như vậy.

Tạo tiếp file custom-login.php cũng trong thư mục theme Twenty Twenty.

<div class="tab_container_login">
    <div id="tab1_login" class="tab_content_login">        
        <h3>Bạn đã có tài khoản?</h3>
        
        <?php
        if (isset($_GET['login']) && $_GET['login'] == 'notyet') {
            ?>
            <div id="login-error" class="border-5px login" style="background-color: #f2dede;border:1px solid #ebccd1;color:#a94442;padding:10px;margin-bottom: 20px">
                <p style="margin:0;">Bạn cần phải đăng nhập !</p>
            </div>
        <?php
        }
        if (isset($_GET['login']) && $_GET['login'] == 'failed') {
            ?>
            <div id="login-error" class="border-5px" style="background-color: #f2dede;border:1px solid #ebccd1;color: #a94442;padding:10px;margin-bottom: 20px">
                <p style="margin:0;">Thất bại: username hoặc password không đúng. Vui lòng thử lại !</p>
            </div>
        <?php
        }
        if (isset($_GET['login']) && $_GET['login'] == 'token_error') { ?>
            <div id="login-error" class="border-5px" style="background-color: #dff0d8;border:1px solid #d6e9c6; color:#468847; padding:10px;margin-bottom: 20px">
                <p style="margin:0;">Session hết hạn. Vui lòng thử lại !</p>
            </div>
        <?php
        }
        ?>
        <form method="post" action="<?php bloginfo('url') ?>/wp-login.php" class="wp-user-form">
            <div class="username">
                <label for="user_login"><?php _e('Username'); ?>: </label>
                <input type="text" name="log" value="<?php echo $_REQUEST['log'] ?>" />
            </div>
            <div class="password">
                <label for="user_pass"><?php _e('Password'); ?>: </label>
                <input type="password" name="pwd" value="" size="20" id="user_pass" />
            </div>
            <div class="login_fields">
                <?php do_action('login_form'); ?>
                <input type="submit" name="user-submit" value="<?php _e('Login'); ?>" tabindex="14" class="user-submit login-button border-5px" />
                <input type="hidden" name="redirect_to" value="<?php echo $_GET['redirect_to']; ?>" />
                <input type="hidden" name="user-cookie" value="1" />
                <input type="hidden" name="custom_login" value="1" />
                <input type="hidden" name="custom_token_login" value="<?php echo wp_create_nonce( 'custom_nonce' ) ?>">
            </div>
        </form>
    </div>
</div>

Sửa “&&” thành “&&” nhé.

file custom-login.php chính là khung sườn của form login. Để ý bạn sẽ thấy tag <form> và 2 tag <input> để nhập username và password.

Kiểm tra giao diện login

Như vậy là bạn đã sử lý xong phần giao diện để hiện form. Để chắc chắn bạn hãy test xem như sau:

Vào trong trang admin, tạo một Page mới và đặt tên giống mình “Custom login”, nó có slug là “custom-login”, nhớ đặt tên giống mình nhé.

Nếu đặt tên khác bạn hãy sửa lại code cho phù hợp.

Tiếp theo hãy chọn Template là Custom Login Form, chính là template bạn đã tạo ở trên.

Nếu bạn không thấy tức là wp chưa nhận được template của bạn, hãy kiểm tra lại.

Như vậy là bạn đã tạo xong phần giao diện login, bây giờ hãy tạo hàm để sử lý login khi người dùng đăng nhập.

Xử lý login

Mở file functions.php và tiếp tục code.

Function custom_startSession

add_action('init', 'custom_startSession', 1);
function custom_startSession() {
    if(!session_id()) {
        session_start();
    }
}

Function custom_startSession dùng để khởi tạo session nếu session_id không tồn tại.

Function custom_login

Vẫn là trong file functions.php nhé.

add_action( 'init', 'custom_login' );
function custom_login()
{
	if( !isset($_REQUEST['custom_login']) )
		return;

	$username = (isset($_POST['log']) ? $_POST['log'] : "");
	$username = sanitize_user( $username );
	$password = (isset( $_POST['pwd']) ? $_POST['pwd'] : "" );
	$password = sanitize_text_field( $password );

	$redirect_to = (isset($_REQUEST["redirect_to"]) ? $_REQUEST["redirect_to"] : "");

	// Kiểm tra token login
	if (isset($_POST['custom_login'])) {
		if (!isset($_POST['custom_token_login']) || !wp_verify_nonce($_POST['custom_token_login'], 'custom_nonce')) {
			wp_safe_redirect( home_url() . "/custom-login?login=token_error&redirect_to=" . urlencode($redirect_to) );
			exit;
		}
	}
	
	$exits_user = custom_get_exist_user($user_name);
	if($exits_user){
		wp_signon( array(), true );
	}else{
		wp_safe_redirect( home_url() . "/custom-login?login=failed&redirect_to=" . urlencode($redirect_to) );
	}
}

Function custom_login là quan trọng nhất, phần chính để xử lý chức năng login.

Nếu username và password không chính xác sẽ có thông báo không chính xác. Và sẽ có phần redirect về trang trước đó để người dùng thuận tiện hơn khi sử dụng website.

Function custom_get_exist_user

function này dùng để kiểm tra xem username nhập vào có tồn tại hay không. Được sử dụng bên trong function custom_login.

function custom_get_exist_user($user_name)
{
	global $wpdb;
	$count = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $wpdb->users WHERE user_login = %s", $user_name));
	if($count == 1){
		return true; 
	}else{
		return false; 
	}
}

Function custom_logout

Được dùng để xử ký xoá hết session khi người dùng logout khỏi tài khoản và sẽ được trở về trang home.

add_action("wp_logout", "custom_logout");
function custom_logout(){
	wp_clear_auth_cookie();
	session_start();
	session_destroy();
    wp_safe_redirect( home_url( '/custom-login?login=notyet&redirect_to=' . urlencode(home_url()) ) );
}

Tạo menu login – logout

Hãy xem thêm tại đây: https://huynhthaihung.com/lap-trinh-php/wordpress/them-button-log-in-log-out-vao-menu-cho-users-trong-wordpress.html

Bạn cần tạo 2 button LOGIN khi người chưa đăng nhập và LOGOUT nếu người dùng đã đăng nhập.

Tiếp tục code trong functions.php của theme.

add_filter( 'wp_nav_menu_items', function( $items, $args ) {

	// Only used on main menu
	if ( 'primary' != $args->theme_location ) {
		return $items;
	}
	// Add custom item
	$items .= '<li class="custom-login-logout-link menu-button menu-item last">';
		// Log-out link
		if ( is_user_logged_in() ) {
			$text            = 'Logout';
			$logout_redirect = home_url( '/' ); // Change logout redirect URl here
			$items .= '<a href="'. wp_logout_url( $logout_redirect ) .'" title="'. esc_attr( $text ) .'" class="wpex-logout"><span class="link-inner">'. strip_tags( $text ) .'</span></a>';
		}
		// Log-in link
		else {
			$text      = 'Login';
			$login_url = home_url() . "/custom-login";
			$items .= '<a href="'. esc_url( $login_url ) .'" title="'. esc_attr( $text ) .'"><span class="link-inner">'. strip_tags( $text ) .'</span></a>';
		}
	$items .= '</li>';

	// Return nav $items
	return $items;
}, 20, 2 );

Hãy ra ngoài trang chủ bạn sẽ thấy xuất hiện login – logout trên thanh menu, hãy css background color để thành một button theo ý mình nhé.

Function custom_nonce_time

Dùng để cài thời gian tối đa cho một phiên đăng nhập, nếu vượt qua cần load lại trang.

add_filter( 'nonce_life', 'custom_nonce_time' );
function custom_nonce_time() {
	return 900; // 15 phút
}

Như vậy là hoàn tất, hãy kiểm tra thành quả của mình.

chúc bạn thành công !

Xem thêm: