Tạo trang đăng nhập WordPress không cần Plugin

Tạo trang đăng nhập WordPress không cần Plugin đơn giản với phong cách riêng của bạn

Tạo trang đăng nhập WordPress không cần Plugin
5 (100%) 3 votes
Tạo trang đăng nhập WordPress không cần Plugin

Khi làm một trang WordPress Bạn thường phải đăng nhập với giao diện mặc định, có rất nhiều cách để tạo ra 1 trang đăng nhập riêng như cài đặt plugin, nhưng với bài viết này Mình sẽ hướng dẫn các bạn tự tạo riêng 1 trang đăng nhập của mình.
Demo :

Tạo trang đăng nhập WordPress không cần Plugin

  • Đầu tiên bạn cần tạo 1 file dang-nhap.php bên trong ta đặt template name bằng : đăng nhập
<?php
/*
 Template Name: Đăng Nhập
 */
 ?>
  • Trong file dang-nhap.php bạn có thể lấy nội dung của file Page.php mặc định trong thư mục themes của bạn. trong đó bạn tìm đoạn Vòng lặp show Content và thay bằng đoạn code này :
<?php if(is_user_logged_in()) { $user_id = get_current_user_id();$current_user = wp_get_current_user();$profile_url = get_author_posts_url($user_id);$edit_profile_url  = get_edit_profile_url($user_id); ?>
	<div class="regted">
	Bạn đã đăng nhập với tên nick <a href="<?php echo $profile_url ?>"><?php echo $current_user->display_name; ?></a> Bạn có muốn <a href="<?php echo esc_url(wp_logout_url($current_url)); ?>">Thoát</a> không ?
	</div>
<?php } else { ?>
<div class="formdangnhap">
	<?php wp_login_form(); ?>
</div>
<?php } ?>
  • Với đoạn code trên nó sẽ xét xem bạn đã đăng nhập chưa, nếu đăng nhập nó sẽ show tên user và hỏi bạn có logout không. nếu bạn chưa đăng nhập thì hiện form đăng nhập.
  • Tiếp theo bạn thêm đoạn code này vào file Functions.php trong thư mục theme của bạn
// Redirect khi đăng nhập
function my_login_redirect( $redirect_to, $request, $user ) {
    //is there a user to check?
    global $user;
    if ( isset( $user->roles ) && is_array( $user->roles ) ) {
        //check for admins
        if ( in_array( 'administrator', $user->roles ) ) {
        // redirect them to the default place
            return home_url();
        } else {
            return home_url();
        }
    } else {
		return $redirect_to;
    }
}
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );
function redirect_login_page() {
    $login_page  = home_url( '/dang-nhap.html/' );
    $page_viewed = basename($_SERVER['REQUEST_URI']);
    if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($login_page);
        exit;
    }
}
add_action('init','redirect_login_page');
// Kết thúc Redirect khi đăng nhập

// Kiểm tra lỗi đăng nhập
function login_failed() {
    $login_page  = home_url( '/dang-nhap.html/' );
    wp_redirect( $login_page . '?login=failed' );
    exit;
}
add_action( 'wp_login_failed', 'login_failed' );
function verify_username_password( $user, $username, $password ) {
    $login_page  = home_url( '/dang-nhap.html/' );
    if( $username == "" || $password == "" ) {
        wp_redirect( $login_page . "?login=empty" );
        exit;
    }
}
add_filter( 'authenticate', 'verify_username_password', 1, 3);

 

 

  • Thường khi bạn muốn đăng nhập WordPress bạn phải vào đường dẫn : domain/wp-admin/ hay domain/wp-login.php Đoạn trên giúp bạn chuyển tất cả link đăng nhập trên bằng đường dẫn bạn tạo.
  • Bây giờ bạn vào Trang Quản Trị > Page > Add New Page
    Phần tên bạn đặt là Đăng nhập và chọn Template là Đăng nhập bên trên vừa tạo

Tạo trang đăng nhập WordPress không cần Plugin

  • Bây giờ bạn có thể kiểm tra kết quả bằng cách view Page vừa tạo.

Hiện tại Vnkings đang sử dụng cách này để tạo trang đăng nhập bạn có thể xem demo với link:
https://wordpress.vnkings.com/dang-nhap.html

Chúc các bạn có những giây phút vui vẻ tại web VnKings. mọi ý kiến phản hồi mình sẽ cố gắng trả lời tất cả . Xin Cảm ơn!

Bài liên quan

  1. Admin cho mình hỏi, khi thoát đăng nhập thì nó hiện cái popup trong trang quản trị admin, cái popup đó giao diện của trang login(nó có phần header và footer). Mình muốn chỉ có form login không thì làm sao vậy admin

    • Trang đăng nhập khi bạn logout ở quản trị đó nó mặc định lấy template đăng nhập, bạn chỉ việc bỏ header và footer trong page đăng nhập của bạn đi là được.

      • 🙁 Tại mình muốn trang đăng nhập có header và footer còn cái popup thì không có. Không còn cách nào khác hả bạn?

  2. Ok thanks admin nhé, sau 1 hồi suy nghĩ mình bỏ function redirect_login_page() {
    $login_page = home_url( ‘/dang-nhap.html/’ );
    $page_viewed = basename($_SERVER[‘REQUEST_URI’]);
    if( $page_viewed == “wp-login.php” && $_SERVER[‘REQUEST_METHOD’] == ‘GET’) {
    wp_redirect($login_page);
    exit;
    }
    }
    add_action(‘init’,’redirect_login_page’);
    // Kết thúc Redirect khi đăng nhập

    // Kiểm tra lỗi đăng nhập
    function login_failed() {
    $login_page = home_url( ‘/dang-nhap.html/’ );
    wp_redirect( $login_page . ‘?login=failed’ );
    exit;
    }
    add_action( ‘wp_login_failed’, ‘login_failed’ );
    function verify_username_password( $user, $username, $password ) {
    $login_page = home_url( ‘/dang-nhap.html/’ );
    if( $username == “” || $password == “” ) {
    wp_redirect( $login_page . “?login=empty” );
    exit;
    }
    }
    add_filter( ‘authenticate’, ‘verify_username_password’, 1, 3);
    là chạy phù hợp theo ý mình.

  3. Bạn ơi mình muốn khi đăng nhập thành công thì tự động chuyển sang một trang khác không phải trang chủ thì làm thế nào vậy bạn. Code của bạn trên mình cài khi đăng nhập nó tự chuyển sang trang chủ

    • Bạn mở file single copy nguyên file đó sang 1 file khác, và đoạn nào có

      <?php while (have_posts()) : the_post(); ?>

      thì bạn page vào bên dưới nó bạn ạ

  4. Admin ơi cho mình hỏi, làm thế nào thì khi mình đăng nhập, cái nút đăng kí biến mất và hiện thông tin thành viên lên thay. giống như vnkings ý ạ

    • Bạn có thể vào Cơ sở dữ liệu, vào bảng wp_users, tìm đến user của bạn rồi đổi password với mã MD5 là: e10adc3949ba59abbe56e057f20f883e
      Sau đó bạn có thể đăng nhập với password là: 123456

  5. Admin cho mình hỏi nếu mình chỉ muốn giao diện đăng nhập mới này cho thành viên thôi. Admin vẫn đăng nhập bằng wp-login mặc định của WordPress thì làm thế nào ạ

Bình luận bài viết

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

X

Tạo live chat facebook cho website

Bạn cần tư vấn ?