Làm bong bóng đăng nhập cho trang WordPress

Bài viết này sử dụng Modal của Bootstrap 3, vui lòng tùy chỉnh lại nếu bạn sử dụng CSS Framework.

HTML

Tại tập tin footer.php.

<?php if (!is_user_logged_in()) : ?>
<div class="modal fade" id="info-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xs" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Đăng Nhập</h4>
            </div>
            <div class="modal-body">
                <?php wp_login_form(); ?>
            </div>
            <div class="modal-footer">
                <p class="help-block text-left"><a href="<?php echo site_url('/wp-login.php?action=lostpassword'); ?>">Bạn quên mật khẩu?</a> · <a href="<?php echo site_url('/wp-login.php?action=register'); ?>">Bạn chưa có tài khoản?</a></p>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

Nút đăng nhập đặt ở vị trí bạn mong muốn.

<?php if (!is_user_logged_in()) : ?>
<span class="glyphicon glyphicon-log-in log-in-btn" data-toggle="modal" data-target="#info-modal" title="Đăng nhập"></span>
<?php endif; ?>

CSS

Tùy chỉnh nhỏ để giao diện dễ nhìn hơn.

#loginform .login-username label,
#loginform .login-password label {
    display: block;
}

#loginform .login-username #user_login,
#loginform .login-password #user_pass {
    display: block;
    width: 100%;
    height: 34px;
}

#loginform .login-remember #rememberme {
    margin-right: 3px;
}

#loginform .login-submit #wp-submit {
    display: inline-block;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #000;
    margin-bottom: 15px;
    color: #fff;
    border: none;
    border-radius: 12px;
}

#loginform .login-submit #wp-submit:hover,
#loginform .login-submit #wp-submit:focus {
    box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.15);
    color: #fff;
}

JavaScript

Vì phần đăng nhập là chức năng cơ bản của WordPress, nên về cơ bản đã xong, chỉ cần thêm một đoạn JavaScript nhỏ để xử lí một số vấn đề cho hợp lí hơn.

<?php if (!is_user_logged_in()) : ?>
<script type="text/javascript">
    $('#info-modal #user_login').attr('placeholder', 'Tên đăng nhập');
    $('#info-modal #user_pass').attr('placeholder', 'Mật khẩu');

    $('#info-modal').on('shown.bs.modal', function (e) {
        if (screen && screen.width >= 768) {
            $('#user_login').focus();
        }
    });
</script>
<?php endif; ?>

Chúc các bạn thành công!