Theo mặc định của Word press, đường dẫn trang quản trị trang web Word press của bạn sẽ giống như sau http://tenmien/wp-login.php (wp-admin). Không những thế, trong thực tiễn không ít lần khách hàng muốn thay đổi những thông báo mặc định ấy, chi tiết như thay logo Word press 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ở tốt nhất nên giỏi 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 Word press thì việc này khá là dễ dàng, Tuy nhiên nó không hề dễ dàng đối với những người mới quản trị trang web. Do đó, dưới góc độ của một người tự học Wp và đã thực hiện biến thành công. vô cùng 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 tương tác tới tốc độ trang web hoặc các lo ngại về bảo mật như là người mua từng lo lắng khi tiêu dùng plugin, sẽ không gây xung đột tặng các plugin, file khác trong trang web của bạn. Xem thêm: tối ưu website
Thay đổi logo WordPress trong trang đăng nhập
Bước 1: Người dùng vào Quản trị – Giao diện – Sử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 truy cậpadd_action( ‘login_enqueue_scripts’, ‘sieutocviet_login_enqueue_scripts’ );function sieutocviet_login_enqueue_scripts(){echo ‘<style type=”text/css” media=”screen”>’;echo ‘#login h1 abackground-image:url(/cdn/2019/07/logo-sieutocviet.png);;’;echo ‘</style>’;
Tùy biến đường dẫn ảnh trỏ về WordPress.org trong trang đăng nhập
Bước 1: Quý khách vào Quản trị – Giao diện – Sửa giao diện và search mở file Function.php.
//Thay thay thế bởi url ảnh logoadd_filter( ‘login_headerurl’, ‘sieutocviet_login_headerurl’);function sieutocviet_login_headerurl()return home_url(‘/’);
Tùy biến đường dẫn trang đăng nhập website WordPress
Mặc định nếu muốn truy cập trang login, chúng ta đăng nhập tên-miền/wp-admin hoặc tên-miền/wp-login. Tuy nhiên, chúng ta có thể chuyển đổi đường dẫn đăng nhập trang login đó bằng một url tùy chỉnh khác.
//Thay thay thế bởi url truy cập Wpadd_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 ;
Người mua 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 log in tài khoản thành công. Ví dụ bạn có thể đổi tới trang chủ hoặc trang thông báo biến thành viên,…
//Chuyển hướng website sau khi log in thành công
add_action( ‘login_redirect’, ‘pridio_login_redirect’);function pridio_login_redirect()return ‘đường_dẫn_muốn_chuyển_đến’;
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ại trên web site 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 người mua.
//Tùy chỉnh CSS cho trang log in Word pressfunction 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><?phpadd_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 khả năng cao ra trang log in F12 và đổi thay các thông số trên css và vào chuyển đổi nhé.