[Thủ Thuật WordPress] Tùy chỉnh trang Login WordPress

 Thêm Style và Javacript vào Login WordPress

Đoạn snippet trong file functions.php bên dưới sẽ các cách bạn thêm file style và javascript để custom trang Login WordPress.

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
    wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Dưới đây là một số selector của Style để bạn custom

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Dưới đây là các thao tác tùy chỉnh trang Login WordPress.

Thay đổi logo trang Login WordPress

#login h1 a {
    background-image: url("../image/logo-1.png");
    background-size: 75px;
}

Thêm hình ảnh nền cho trang Login WordPress

body.login div#login h1 a {
    background-image: url("images/site-logo.png");
}

Thêm logo cho trang Login WordPress

#login h1 a {
   background-image: url("../image/logo-1.png");
   background-size: 75px;
}

Tùy chỉnh Login Form WordPress

.login form {
    box-shadow: none;
    padding: 20px;
}

#login {
    background: #FFF;
    margin: 50px auto;
    padding: 40px 20px;
    width: 400px;
}

.login label {
    color: #555;
    font-size: 14px;
}

.login form .forgetmenot {
    float: none;
}

Xóa link "Lost Password" trên trang Login WordPress

p#nav {
    display: none;
}

Thay đổi URL của Logo Login WordPress

function custom_login_logo_url()
{
    return get_bloginfo('url');
}

add_filter(
    'login_headerurl',
    'custom_login_logo_url'
);
function custom_login_logo_url_title()
{
    return 'Default Site Title';
}

add_filter(
    'login_headertitle',
    'custom_login_logo_url_title'
);

Xóa link "Back to" trang Login WordPress

p#backtoblog
{
   display: none;
}

Xóa thông báo lỗi trong trang Login WordPress

function custom_login_error_message()
{
    return 'Please enter valid login credentials.';
}
add_filter('login_errors', 'custom_login_error_message');

Thay đổi  Redirect URL trang Login WordPress

Nếu bạn đăng nhập vào WordPress, nó sẽ chuyển hướng bạn trực tiếp đến trang dashboard . Bạn có thể chuyển hướng tất cả đến trang chủ ngoại trừ quản trị viên như sau.

function custom_login_redirect($redirect_to, $request, $user)
{
    global $user;
    if (isset($user->roles) && is_array($user->roles)) {
        if (in_array("administrator", $user->roles)) {
            return $redirect_to;
        } else {
            return home_url();
        }
    } else {
        return $redirect_to;
    }
}
add_filter("login_redirect", "custom_login_redirect", 10, 3);

Luôn check vào "Remember Me" trang Login WordPress

add_filter('login_footer', 'default_rememberme_checked');

add_action('init', 'default_checked_remember_me');
function default_rememberme_checked()
{
    echo "<script>document.getElementById('rememberme').checked = true;</script>";
}