Thêm trang đăng nhập front-end WordPress

5 tháng ago, WordPress Plugin, Views

Giới thiệu về Trang Đăng Nhập Front-end WordPress

Trang đăng nhập mặc định của WordPress, thường được truy cập qua wp-login.php, đôi khi không phù hợp với thiết kế chung của website. Việc tạo một trang đăng nhập front-end mang lại nhiều lợi ích, bao gồm: tính thẩm mỹ cao hơn, trải nghiệm người dùng liền mạch hơn, và khả năng tùy chỉnh sâu hơn để phù hợp với thương hiệu của bạn.

Bài viết này sẽ hướng dẫn bạn qua các phương pháp khác nhau để thêm trang đăng nhập front-end vào website WordPress của bạn, từ việc sử dụng plugin đến việc tự code bằng PHP và HTML.

Lợi ích của Trang Đăng Nhập Front-end

Việc sử dụng trang đăng nhập front-end mang lại nhiều lợi ích đáng kể:

Tính thẩm mỹ và nhất quán: Trang đăng nhập hòa nhập với thiết kế tổng thể của website, tạo trải nghiệm người dùng chuyên nghiệp hơn.
Tăng cường bảo mật: Bạn có thể ẩn hoặc đổi đường dẫn mặc định đến trang đăng nhập, giúp giảm nguy cơ tấn công brute-force.
Cải thiện trải nghiệm người dùng: Người dùng không bị chuyển hướng đến một trang đăng nhập riêng biệt, mà có thể đăng nhập ngay trên trang chủ hoặc một trang chuyên dụng khác.

Sử dụng Plugin để Tạo Trang Đăng Nhập Front-end

Đây là cách dễ dàng nhất để thêm trang đăng nhập front-end vào WordPress. Có rất nhiều plugin miễn phí và trả phí có sẵn trên WordPress.org. Một số plugin phổ biến bao gồm:

Theme My Login: Cho phép bạn tạo các trang tùy chỉnh cho đăng nhập, đăng ký, quên mật khẩu và trang hồ sơ.
Ultimate Member: Một plugin mạnh mẽ cho phép bạn tạo trang đăng nhập, đăng ký và hồ sơ người dùng tùy chỉnh.
LoginPress: Cho phép bạn tùy chỉnh giao diện trang đăng nhập mặc định của WordPress.

Hướng dẫn sử dụng Theme My Login

Theme My Login là một plugin miễn phí và mạnh mẽ cho phép bạn tạo các trang tùy chỉnh cho đăng nhập, đăng ký, quên mật khẩu và trang hồ sơ.

Cài đặt và kích hoạt plugin Theme My Login từ kho plugin WordPress.
Sau khi kích hoạt, plugin sẽ tự động tạo các trang cho đăng nhập, đăng ký, quên mật khẩu và hồ sơ.
Bạn có thể tùy chỉnh các trang này bằng cách vào “Pages” trong dashboard WordPress.
Để hiển thị form đăng nhập trên một trang hoặc bài viết bất kỳ, hãy sử dụng shortcode [theme-my-login].
Bạn có thể tùy chỉnh giao diện và chức năng của plugin trong phần “Theme My Login” trong dashboard WordPress.

Tự Code Trang Đăng Nhập Front-end

Nếu bạn muốn kiểm soát hoàn toàn giao diện và chức năng của trang đăng nhập front-end, bạn có thể tự code bằng PHP và HTML. Cách này đòi hỏi kiến thức về lập trình WordPress, nhưng nó cho phép bạn tùy chỉnh mọi thứ theo ý muốn.

Tạo Template Trang Đăng Nhập

Đầu tiên, bạn cần tạo một template trang tùy chỉnh cho trang đăng nhập. Template này sẽ chứa HTML cho form đăng nhập và PHP để xử lý việc đăng nhập.

Tạo một file PHP mới trong thư mục theme của bạn, ví dụ: page-login.php.
Thêm đoạn code sau vào file này:


<?php
/**
 * Template Name: Trang Đăng Nhập
 */

get_header();

if ( is_user_logged_in() ) {
    wp_redirect( home_url() );
    exit;
}

if ( isset( $_POST['login'] ) ) {
    $username = $_POST['username'];
    $password = $_POST['password'];
    $remember = isset( $_POST['rememberme'] ) ? true : false;

    $credentials = array(
        'user_login'    => $username,
        'user_password' => $password,
        'remember'      => $remember
    );

    $user = wp_signon( $credentials, false );

    if ( is_wp_error( $user ) ) {
        $error_message = $user->get_error_message();
    } else {
        wp_redirect( home_url() );
        exit;
    }
}
?>

<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h2>Đăng Nhập</h2>

            <?php if ( isset( $error_message ) ) : ?>
                <div class="alert alert-danger">
                    <?php echo esc_html( $error_message ); ?>
                </div>
            <?php endif; ?>

            <form method="post" action="">
                <div class="form-group">
                    <label for="username">Tên đăng nhập:</label>
                    <input type="text" class="form-control" id="username" name="username" required>
                </div>
                <div class="form-group">
                    <label for="password">Mật khẩu:</label>
                    <input type="password" class="form-control" id="password" name="password" required>
                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="rememberme" name="rememberme">
                    <label class="form-check-label" for="rememberme">Ghi nhớ tôi</label>
                </div>
                <button type="submit" class="btn btn-primary" name="login">Đăng nhập</button>
            </form>

            <p><a href="<?php echo wp_lostpassword_url(); ?>">Quên mật khẩu?</a></p>
        </div>
    </div>
</div>

<?php get_footer(); ?>

Tạo một trang mới trong WordPress (Pages -> Add New).
Trong phần “Page Attributes”, chọn “Template” và chọn template bạn vừa tạo (Trang Đăng Nhập).
Xuất bản trang.

Giải thích Code

<?php /** * Template Name: Trang Đăng Nhập */: Định nghĩa template này là “Trang Đăng Nhập” để bạn có thể chọn nó trong phần Page Attributes.
get_header(); và get_footer();: Bao gồm header và footer của theme hiện tại.
is_user_logged_in(): Kiểm tra xem người dùng đã đăng nhập hay chưa. Nếu đã đăng nhập, chuyển hướng họ đến trang chủ.
$_POST['login']: Kiểm tra xem form đăng nhập đã được gửi hay chưa.
wp_signon(): Hàm WordPress để đăng nhập người dùng.
wp_lostpassword_url(): Hàm WordPress để tạo URL đến trang quên mật khẩu.

Tùy chỉnh Template

Bạn có thể tùy chỉnh template này để phù hợp với thiết kế của website của bạn. Bạn có thể thêm CSS, JavaScript hoặc các tính năng khác. Ví dụ, bạn có thể sử dụng Bootstrap để tạo giao diện đẹp hơn.

Bảo mật Trang Đăng Nhập Front-end

Khi tạo trang đăng nhập front-end, việc bảo mật là vô cùng quan trọng. Dưới đây là một số mẹo để bảo vệ trang đăng nhập của bạn:

Sử dụng HTTPS: Đảm bảo website của bạn sử dụng HTTPS để mã hóa dữ liệu được truyền giữa trình duyệt và server.
Sử dụng Captcha: Thêm Captcha vào form đăng nhập để ngăn chặn bot tự động đăng nhập.
Giới hạn số lần đăng nhập thất bại: Sử dụng plugin hoặc code để giới hạn số lần đăng nhập thất bại trong một khoảng thời gian nhất định.

Ẩn hoặc Đổi Đường Dẫn Đăng Nhập Mặc Định

Một cách đơn giản để tăng cường bảo mật là ẩn hoặc đổi đường dẫn mặc định đến trang đăng nhập (wp-login.php). Bạn có thể sử dụng plugin như “WPS Hide Login” hoặc thêm đoạn code sau vào file functions.php của theme:


<?php
function custom_login_url() {
    return home_url( '/my-secret-login/' );
}
add_filter( 'login_url', 'custom_login_url' );

function custom_login_redirect() {
    global $pagenow;
    if ( 'wp-login.php' == $pagenow && ! strstr( $_SERVER['REQUEST_URI'], 'my-secret-login' ) && ! is_user_logged_in() ) {
        wp_redirect( home_url( '/my-secret-login/' ) );
        exit;
    }
}
add_action( 'init', 'custom_login_redirect' );

Trong đoạn code này, chúng ta đổi đường dẫn đăng nhập thành /my-secret-login/. Bạn nên thay đổi đường dẫn này thành một cái gì đó khó đoán hơn.

Kết luận

Việc thêm trang đăng nhập front-end vào WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng và tăng cường bảo mật. Bạn có thể sử dụng plugin để tạo trang đăng nhập một cách dễ dàng, hoặc tự code để kiểm soát hoàn toàn giao diện và chức năng. Quan trọng nhất là hãy luôn chú ý đến bảo mật để bảo vệ website của bạn khỏi các cuộc tấn công.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa