Nội dung bài viết
WordPress là một lựa chọn lớn hiện nay đối với đa số cộng đồng kinh doanh online, đơn giản vì nó dễ sử dụng, dễ cài đặt và không cần phải trang bị quá nhiều kiến thức về lập trình.
Tuy nhiên giao diện đăng nhập mặt định của WordPress làm cho nhiều bạn không thích và muốn thay đổi để thu hút hơn. Lý do chính là vì nó không đẹp và đơn giản quá. Chính vì thế hôm nay mình sẽ hướng dẫn bạn cách đơn giản để có một trang đăng nhập đẹp từ wordpress nhé. Anh em nếu thấy bài viết hay thì ủng hộ mình nhé.
Thay đổi đường dẫn và Logo Admin
Khi vào trang đăng nhập admin (domain/wp-admin), nếu bạn click vào logo thì nó sẽ nhảy ngay vào trang chủ của wordpress.Trong trường hợp bạn thiết kế website cho khách hàng thì điều này không được hay cho lắm. Vậy nên bạn cần phải thay đổi để làm trang đăng nhập đẹp trên WordPress khi họ nhấn vào logo nó sẽ vẫn trỏ về trang chủ website của khách.
Bạn mở file function.php trong theme của mình. Nếu bạn đang sử dụng Theme Child thì hãy thêm vào functions.php trên trong Theme Child mình đang dùng nha. Sau khi vào thì chèn thêm đoạn code này vào.
//**Thay đổi logo cho trang đăng nhập
add_action( 'login_enqueue_scripts', 'phonuiit_login_enqueue_scripts' );
function phonuiit_login_enqueue_scripts(){
echo '<style type="text/css" media="screen">';
echo '#login h1 a
{
background-image:url(link logo);
;';
echo '</style>';
}
//Thay đổi url ảnh logo
add_filter( 'login_headerurl', 'phonuiit_login_headerurl');
function phonuiit_login_headerurl(){
return home_url('/link trang ban buon den');
}Nhớ chèn link logo của mình vào nhé. Thêm vào rồi thì lưu lại và xem thành quả nào.
Trang trí CSS để có trang đăng nhập đẹp hơn trên WordPress
Thay logo và đường dẫn có vẻ như vẫn chưa làm bạn hài lòng đúng không?. Hãy thêm đoạn CSS này là sẽ đẹp ngay thôi. Các bạn cứ copy cả bỏ vô của mình nhé. Nếu muốn bạn tự chỉnh các thông số và mã màu cho phù hợp nhé.
Bạn hãy nhớ là dán vào đúng cái theme mà bạn muốn chỉnh trang đăng nhập đẹp trên WordPress của bạn.
//Tùy chỉnh CSS cho trang đăng nhập WordPress
function phonuiit_custom_logo() { ?>
<style type="text/css">
.login #login_error{
box-shadow: 0 30px 80px rgba(37, 37, 37, 0.1) !important;
border-radius: 15px !important;}
.login .message{
border-left: 5px solid #08298A !important;
border-radius: 15px;
box-shadow: 0 30px 80px rgba(37, 37, 37, 0.1) !important;}
.login #nav a:hover,
.login #backtoblog a:hover{color: #eb1f27 !important;}
.login .button-primary {
background: #ffff; !important;
box-shadow: 0 5px 0 #08298A !important;
border-color: #2E64FE #08298A #2E64FE !important;
border-radius: 20px !important;
border-color: #007cba; !important
color: #0000; !important
text-decoration: none;
text-shadow: none; !important
}
input[type=checkbox]:checked:before{color: #81BEF7;}
.login input[type=text]:focus,
.login input[type=password]:focus, input[type=email]:focus{
box-shadow: 0 0 2px rgb(255, 255, 255) !important;}
.login h1 a{
background-size: 480px !important;
height: 220px !important;
width: 500px !important; }
#login {width: 450px !important;}
.login form {box-shadow: 0 30px 80px rgba(37, 37, 37, 0.1) !important;
border-radius: 15px;
padding: 40px !important;}
.login form .input, .login form input[type=checkbox],
.login input[type=text]
{background: #81BEF7;
border-radius: 30px;
border: none;box-shadow: none;}
@media only screen and (max-width: 480px) {
#login {width: 320px !important;}
}
</style>
<?php }
add_action('login_enqueue_scripts', 'phonuiit_custom_logo');Quá đơn giản phải không các ban. Chỉ với vài bước là bạn đã có thể làm trang đăng nhập đẹp trên wordpress một cách bắt mắt.
Chúc các bạn thành công.
