Theo mặc định của WordPress, đường dẫn trang quản trị web WordPress của bạn sẽ như là sau http://tenmien/wp-login.php (wp-admin). Ngoài ra, trong thực tế không ít lần khách hàng muốn chuyển đổi những thông báo mặc định ấy, cụ thể như thay logo WordPress bằng logo của chính bạn, link trỏ đến Word press đượ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ở cần giỏi hơn hoặc mang đậm dấu ấn cá nhân hơn phải không nào? nội dung bài viết này hãy cùng vô cùng tốc việt làm đ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à dễ dàng, Không những thế nó không hề dễ dàng đối với những người mới quản trị web. Do đó, dưới góc độ của một người tự học Word press và đã làm thành công. siêu tốc Việt sẽ có các hướng dẫn khách hàng 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 tương tác tới tốc độ web hoặc các lo lắng về bảo mật giống như các bạn bao giờ lo ngại khi tiêu 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à search mở file Function.php. Bước 2: Thêm vào file function.php đoạn lập trình sau:

//Thay thay thế bởi logo tặng trang log in
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(/cdn/2019/07/logo-sieutocviet.png);
;’;
echo ‘</style>’;
Ở đoạn lập trình trên, các bạn thay url logo vào vị trí này. người dùng F5 lại trang giúp thấy thành quả, Việc căn chỉnh logo đưa cho đẹp thì lát mình chỉ chỗ để đổi thay 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 lập trình sau:
//Thay thay thế bở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 log in tên-miền/wp-admin hoặc tên-miền/wp-login. Bên cạnh đó, 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: quý khách 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 thay thế bở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 ;

Khách hàng 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 cứ sau khi bạn log in tài khoản thành công. Ví dụ bạn khả năng cao thay thế bởi tới trang chủ hoặc trang tin tức biến thành viên,…

//Chuyển hướng trang web 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 web site của mình. khách hàng thường xuyên 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 đưa cho trang đăng nhậ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 thường xuyên 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à mọi cách để tùy biến trang login web site của bạn. Hãy theo dõi vô cùng Tốc việt giúp xem những tin tức có lợi 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 (hostmail.vn)

Trải qua 6 năm kinh nghiệm Laravel 7 năm thực chiến trong quản trị website tư vấn giải pháp đẩy top, Marketing tối ưu nhất cho công ty.
Hiện làm quản lý kinh doanh tại Siêu Tốc Việt. ping post