آموزش ساخت صفحه ورود سفارشی در وردپرس
اگر صفحه ساده ورود به پیشخوان وردپرس خسته شده اید میتوانید آن را زیبا تر و اختصاصی کنید. شما برای انجام این کار ابتدا باید در قالب خود پوشه ای با نام login ایجاد نمایید. سپس فایلی با نام custom-login-style.css در پوشه login بسازید.
برای ساخت صفحه ورود سفارشی این صفحه را باید فراخوانی نماییم . برای انجام این کار باید کد زیر را در functions.php قالب خود قرار دهید
|
1 2 3 4 5 6 7 8 9 |
function my_custom_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />'; } add_action('login_head', 'my_custom_login'); |
حال ما کد برای تغییرات تمام قسمت هارا برای شما در زیر قرار خواهیم داد :
تغییر لوگوی صفحه ورود وردپرس :
برای انجام اینکار کافیست کد زیر را در custom-login-style.css قرار دهید
|
1 2 3 4 5 6 7 |
login h1 a { background-image: url("../imag/logo.png"); background-size: 44px; } |
در کد بالا بجای background-image باید آدرس لوگو خود را قرار دهید. اندازه پیش فرض برای این لوگو ۸۰×۸۰ پیکسل است
اضافه کردن بک گراند دلخواه :
برای اضافه کردن تصویر زمینه کافیست کد زیر را مانند بالا به فایل custom-login-style.css اضافه نمایید
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Body.login { background-image:url("../img/login-bg.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } |
شما میتوانید تصویر مورد نظر خود را در بالا بجای ادرس پیشفرض وارد نمایید
شخصی سازی فرم ورود :
برای شخصی سازی کافیست کد زیر را در custom-login-style.css قرار دهید
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.login form{ box-shadow:none; padding:20px; } #login { background: #FFF; margin: 50px auto; padding: 40px 20px; width: 400px; } .login label { color: #۵۵۵; font-size: 14px; } .login form .forgetmenot{ float:none; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
#login form p.submit{ margin-top:15px; } .login.wp-core-ui .button-primary { background: #۷B417A; border-color: #۷B417A; box-shadow: 0 1px 0 #۷B417A; color: #FFF; text-shadow: none; float: none; clear: both; display: block; width: 100%; padding: 7px; height: auto; font-size: 15px; } |
اضافه کردن لینک های دلخواه به صفحه ورود وردپرس :
در صفحه ورود ما دو لینک “فراموشی رمز عبور” و “بازگشت به وبسایت” را مشاهده میکنیم که میتوانیم آنهارا هم نیز ویرایش نماییم
برای حذف لینک فراموشی رمز عبور می توانید قطعه کد زیر را جایگذاری نمایید :
|
1 2 3 4 |
p#nav { display: none; } |
برای حذف لینک بازگشت به وبسایت می توانید قطعه کد زیر را جایگذاری نمایید :
|
1 2 3 4 |
p#backtoblog { display: none; } |
اگر قصد اضافه کردن لینک های اضافی را دارید باید کد زیر را در functions.php قرار دهید
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<br data-mce-bogus="1"> function my_a4fran3_loginfooter() { ?> <p style="text-align: center; margin-top: 1em;"> <a style="color: #ff896f; text-decoration: none;" href="https://a4fran3.ir">آچار فرانسه </a> </p> <?php } add_action('login_footer','my_a4fran3_loginfooter'); |
ریدایرکت کاربر پس از ورود:
اگر میخواهید کاربر پس از ورود به صفحه خاصی منتقل شود باید کد زیر را در functions.php قرار دهید
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function custom_login_a4fran3_redirect( $redirect_to, $request, $user ) { global $user; if( isset( $user->roles ) && is_array( $user->roles ) ) { if( in_array( "administrator", $user->roles ) ) { return $redirect_to; } else { return home_url(); } } else { return $redirect_to; } } add_filter("login_redirect", "custom_login_a4fran3_redirect", 10, 3); |
