Nếu bạn không thích giao diện mặc định của WordPress thì hãy làm theo các bước sau để thay đổi giao diện trang đăng nhập WordPress vừa ý.
Theo mặc định, mọi trang đăng nhập WordPress đều có logo và URL WordPress.org mặc định. Đa phần các theme cũng sử dụng giao diện mặc định của WordPress. Để thay đổi giao điện, thay đổi logo WordPress, hay đường link logo khá hơn giản, chỉ cần làm theo các bước sau.
➤ Xem thêm:
Thay đổi giao diện trang đăng nhập WordPress
Bước 1: Thay đổi URL trang đăng nhập
Chúng ta sẽ sử dụng hook login_headerurl WordPress để thay đổi liên kết URL.
Đặt mã bên dưới vào file functions.php.
// Thay đổi link logo admin trang đăng nhập
add_filter('login_headerurl', 'wpc_url_login');
function wpc_url_login(){
return "https://ngayhomdo.net/";
}
Thay đổi “ngayhomdo.net” thành liên kết của bạn.
Kiểm tra thử được chưa.
Bước 2. Thay đổi biểu login đăng nhập mặc định
Với logo, chúng tôi sẽ sử dụng hook login_enqueue_scripts trong WordPress. Mặc dù có tên scripts , nhưng nó được sử dụng để sắp xếp cho cả script và style.
Như trên hay đặt mã bên dưới vào file functions.php.
//Tùy chỉnh CSS cho trang đăng nhập WordPress
function tp_custom_logo() {
?>
<style type="text/css">
body.login {
background: url(https://ngayhomdo.net/đường dẫn hình ảnh của bạn.jpg) !important;
background-size: cover !important;
}
.login #backtoblog, .login #nav {
border: 1px solid !important;
background: white !important;
border-radius: 20px !important;
background: #ffffff91 !important;
}
.login .privacy-policy-page-link a {
padding: 4px 10px;
border: 1px solid !important;
background: white !important;
border-radius: 20px !important;
background: #ffffff91 !important;
}
.login .privacy-policy-page-link {
margin: 0 !important;
}
#login {
width: 450px !important;
padding: 10px !important;
}
.login form {
border-radius: 20px;
background: #ffffff91 !important;
}
.login h1 a {
background-image:url(https://ngayhomdo.net/wp-content/uploads/2021/06/logo.png) !important;
background-size: 150px !important;
height: 150px !important;
width: 150px !important;
}
.login input#user_login {
background: #ffffff91 !important;
}
.login input#wp-submit {
background: white !important;
color: orangered;
font-weight: 700;
border-radius: 10px;
}
.login input#wp-submit:hover {
background: yellow !important;
}
.login #login_error, .login .message, .login .success {
background: #ffffff91 !important;
border-radius: 0 20px 20px 0;
}
.login form .input, .login form input[type=checkbox], .login input[type=text] {
background: #ffffff91 !important;
}
</style>
<?php
}
add_action('login_enqueue_scripts', 'tp_custom_logo');
Bạn thay đổi theo ý thích cá nhân của bản thân, không thì nó sẽ ra giống trang đăng nhập như hình
Nếu không biết nhiều về CSS có thể nên thay hình nền và logo thôi cũng khá đẹp rồi.
Hình nền background ở dòng:
body.login {
background: url(https://ngayhomdo.net/đường dẫn hình ảnh của bạn.jpg) !important;
background-size: cover !important;
}
Thay Logo ở dòng:
.login h1 a {
background-image:url(https://ngayhomdo.net/wp-content/uploads/2021/06/logo.png) !important;
background-size: 150px !important;
height: 150px !important;
width: 150px !important;
}
Chúc bạn thành công.
Để lại comment nếu có gì thắc mắc.