Theo mặc định của wordpress, đường dẫn trang quản trị website wordpress của bạn sẽ như sau http://tenmien/wp-login.php (wp-admin).

Tuy nhiên, trong thực tế không ít lần các bạn muốn thay đổi những thông tin mặc định ấy, cụ thể như thay logo WordPress bằng logo của chính bạn, link trỏ đến wordpress được thay bằng trang chủ của bạn.

Làm vậy thì trang đăng nhập của bạn sẽ trở nên chuyên nghiệp hơn hoặc mang đậm dấu ấn cá nhân hơn phải không nào?

Bài viết này hãy cùng Siêu tốc việt thực hiện điều này nhé.

 

 

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

Đối với các coder wordpress thì việc này khá là đơn giản, tuy nhiên nó không hề dễ đối với những người mới quản trị website. Do đó, dưới góc độ của một người tự học wordpress và đã làm thành công.

Siêu tốc Việt sẽ hướng dẫn các bạn cách làm đơn giản nhất ngay cả đối với bạn không biết code.

Việc này sẽ thêm vào 1 số đoạn code vào file function.php của giao diện. Điều đó không gây ảnh hưởng tới tốc độ web hoặc các lo lắng về bảo mật như các bạn từng lo lắng khi sử dụng plugin, sẽ không gây xung đột cho các plugin, file khác trong website của bạn.

Xem thêm: tối ưu website

Thay đổi logo WordPress 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 mở file Function.php.

 

Bước 2: Thêm vào file function.php đoạn code sau:

//Thay đổi logo cho trang đăng nhập
add_action( ‘login_enqueue_scripts’, ‘sieutocviet_login_enqueue_scripts’ );
function sieutocviet_login_enqueue_scripts(){
echo <style type=”text/css” media=”screen”>’;
echo ‘#login h1 a
{
background-image:url(/wp-content/uploads/2019/07/logo-sieutocviet.png);
;‘;
echo ‘</style>;
}
 
Ở đoạn code trên, các bạn thay url logo vào vị trí này. Các bạn F5 lại trang để xem thành quả, Việc căn chỉnh logo cho đẹp thì lát mình chỉ chỗ để thay đổi thông số CSS ở bên dưới.
 
 

 

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 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 đăng nhập trang login, chúng ta truy cập tên-miền/wp-admin hoặc tên-miền/wp-login. Tuy nhiên, chúng ta có thể thay đổi đường dẫn truy cập trang login đó bằng một url tùy chỉnh khác.

 
Bước 1: Các bạn 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 code sau:
 
//Thay đổi url đăng nhập 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 ;
}
 
Các bạn 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 để chuyển hướng vào trang bất kỳ sau khi bạn đăng nhập tài khoản thành công. Ví dụ bạn có thể chuyển hướng tới trang chủ hoặc trang thông tin 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 code 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 đã làm thực tế trên trang web của mình. Các bạn có thể tùy chỉnh lại tùy sở thích của các bạn.

 
xem thêm: cách custom css
 
//Tùy chỉnh CSS cho trang đăng nhập WordPress
function tp_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: 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:hover{color: #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:before{color: #eb1f27;}
.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: 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ó thể ra trang đăng nhập F12 và thay đổi các thông số trên css và vào thay đổi nhé.

 
Và đó là toàn bộ cách để tùy biến trang login website của bạn. Hãy theo dõi Siêu Tốc việt để xem những thông tin bổ í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

Lê Trương Tấn Lộc

Với hơn 3 năm kinh nghiệm CODE/CSS/JS, 2 năm kinh nghiệm trong quản trị website tư vấn giải pháp SEO, Marketing tối ưu nhất cho doanh nghiệp.

Hiện đang là nhân viên kinh doanh tại Siêu tốc việt

zalo
messenger