Tùy biến giao diện trang đăng nhập mặc định WordPress

Tùy biến đường dẫn ảnh trỏ về WordPress.org trong trang đăng nhập

Bước 1: Các bạn vào Quản trịGiao diệnSửa giao diện và tìm kiếm mở file Function.php.

Bước 2: Thêm vào file function.php đoạn code sau:
//Thay đổi url ảnh logo
add_filter( ‘login_headerurl’, ‘sieutocviet_login_headerurl’);
function sieutocviet_login_headerurl()
return home_url(‘/’);
Bạn thay đường dẫn về trong phần url, để hình ảnh nó hướng về trang chủ nhé.

Tùy biến đường dẫn trang đăng nhập website WordPress

Mặc định nếu muốn log in trang login, chúng ta truy cập tên-miền/wp-admin hoặc tên-miền/wp-login. Ngoài ra, chúng ta thường chuyển đổi đường dẫn đăng nhập trang login đó bằng một url tùy chỉnh khác.

Bước 1: người mua vào Quản trịGiao diệnSửa giao diện và tìm mở file Function.php.
Bước 2: Thêm vào file function.php đoạn lập trình sau:
//Thay đổi url log in WordPress
add_filter( ‘login_url’, ‘sieutocviet_login_url’, 10, 2);
function sieutocviet_login_url( $force_reauth, $redirect )
$login_url = ‘link_trang_login’;
if ( !empty($redirect) )
$login_url = add_query_arg( ‘redirect_to’, urlencode( $redirect ), $login_url );
if ( $force_reauth )
$login_url = add_query_arg( ‘reauth’, ‘1’, $login_url ) ;
return $login_url ;

Quý khách thay url tùy chỉnh vào $login_url

Tùy biến chuyển hướng trang web sau khi đăng nhập thành công

Dùng để đổi vào trang bất kể sau khi bạn log in tài khoản biến thành công. Ví dụ bạn thường xuyên thay thế bởi tới trang chủ hoặc trang thông tin trở thành viên,…

//Chuyển hướng website sau khi đăng nhập thành công
add_action( ‘login_redirect’, ‘pridio_login_redirect’);
function pridio_login_redirect()
return ‘đường_dẫn_muốn_chuyển_đến’;
Bạn thêm đoạn lập trình này vào file function.php nhé

Tùy biến css làm đẹp cho trang đăng nhập của website bạn

Dưới đây là một số tùy chỉnh CSS mình đã thực hiện thực tế trên web của mình. các bạn thường xuyên tùy chỉnh lại tùy sở thích của khách hàng.

xem thêm: cách custom css
//Tùy chỉnh CSS đưa cho trang truy cập WordPress
function tp_custom_logo() ?>
<style type=”text/css”>
.login #login_errorbox-shadow: 0 30px 80px rgba(37, 37, 37, 0.1) !important;border-radius: 15px !important;
.login .messageborder-left: 4px solid #ec1f27 !important; border-radius: 15px;box-shadow: 0 30px 80px rgba(37, 37, 37, 0.1) !important;
.login #nav a:hover, .login #backtoblog a:hovercolor: #eb1f27 !important;
.login .button-primary background: #eb1f27 !important;border-color: #eb1f27 #eb1f27 #eb1f27 !important;box-shadow: 0 1px 0 #eb1f27 !important;border-radius: 20px !important;color: #fff !importanttext-decoration: none;text-shadow: none !important;
input[type=checkbox]:checked:beforecolor: #eb1f27;
.login input[type=text]:focus, .login input[type=password]:focus, input[type=email]:focusbox-shadow: 0 0 2px rgb(255, 255, 255) !important;
.login h1 abackground-size: 115px !important;height: 115px !important; width: 209px !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: #f5f5f5;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’, ‘tp_custom_logo’);

Đây chỉ là css mẫu, nếu bạn muốn tùy chỉnh khác, bạn có lẽ ra trang log in F12 và đổi thay các thông số trên css và vào chuyển đổi nhé.

Và đó là đa số cách để tùy biến trang login web của bạn. Hãy theo dõi vô cùng Tốc việt giúp thấy những thông tin có ích khác nhé !!!

5/5 - (1 bình chọn)

Hướng dẫn tùy biến trang đăng nhập website wordpress 2021 dễ dàng

Lê Trương Tấn Lộc (sieutocviet.page)

Trải qua 6 năm kinh nghiệm Drupal 7 năm thực chiến trong quản lý website tư vấn giải pháp Seo google, Digital marketing tối ưu nhất cho công ty.
Hiện giữ chức vụ leader kinh doanh tại Siêu Tốc Việt.