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ện – Sửa giao diện và tìm mở file Function.php.
Tùy biến trang quản trị đơn giản
Bước 1: Các bạn vào Quản trị – Giao diện – Sửa giao diện và tìm mở file Function.php.
//Thay đổi url ảnh logoadd_filter( ‘login_headerurl’, ‘sieutocviet_login_headerurl’);function sieutocviet_login_headerurl()return home_url(‘/’);
Mặc định nếu muốn đăng nhậ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ó lẽ chuyển đổi đường dẫn truy cập trang login đó bằng một url tùy chỉnh khác.
//Thay đổi url log in WordPressadd_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
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 khả năng cao chuyển hướng tới trang chủ hoặc trang thông báo biến thành viên,…
//Chuyển hướng website sau khi đăng nhập thành côngadd_action( ‘login_redirect’, ‘pridio_login_redirect’);function pridio_login_redirect()return ‘đường_dẫn_muốn_chuyển_đến’;
Dưới đây là một số tùy chỉnh CSS mình đã làm thực tế trên web 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 người dùng.
//Tùy chỉnh CSS đưa cho trang truy cập WordPressfunction 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 có lẽ ra trang truy cập F12 và đổi thay các thông số trên css và vào thay đổi nhé.
Lê Trương Tấn Lộc (sieutocviet.org)
Với hơn 3 năm kinh nghiệm Python, PHP 7 năm thực chiến trong quản trị website tư vấn giải pháp Seo google, Kinh doanh online tối ưu nhất cho doanh nghiệp.
Hiện là giám đốc kinh doanh tại Siêu Tốc Việt.