آموزش ساخت صفحه ورود سفارشی در وردپرس

آموزش ساخت صفحه ورود سفارشی در وردپرس

آموزش ساخت صفحه ورود سفارشی در وردپرس

اگر صفحه ساده ورود به پیشخوان وردپرس خسته شده اید میتوانید آن را زیبا تر و اختصاصی کنید. شما برای انجام این کار ابتدا باید در قالب خود پوشه ای با نام login ایجاد نمایید. سپس فایلی با نام custom-login-style.css در پوشه login بسازید.

برای ساخت صفحه ورود سفارشی این صفحه را باید فراخوانی نماییم . برای انجام این کار باید کد زیر را در functions.php قالب خود قرار دهید

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 قرار دهید

login h1 a {

background-image: url("../imag/logo.png");

background-size: 44px;

}

در کد بالا بجای background-image باید آدرس لوگو خود را قرار دهید. اندازه پیش فرض برای این لوگو ۸۰×۸۰ پیکسل است

 

 

اضافه کردن بک گراند دلخواه :

برای اضافه کردن تصویر زمینه کافیست کد زیر را مانند بالا به فایل  custom-login-style.css اضافه نمایید

Body.login

{

background-image:url("../img/login-bg.jpg");

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center;

}

شما میتوانید تصویر مورد نظر خود را در بالا بجای ادرس پیشفرض وارد نمایید

 

 

 

شخصی سازی فرم ورود :

برای شخصی سازی کافیست کد زیر را در custom-login-style.css قرار دهید

.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;

}
#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;

}

 

 

 

 

اضافه کردن لینک های دلخواه به صفحه ورود وردپرس :

در صفحه ورود ما دو لینک “فراموشی رمز عبور” و “بازگشت به وبسایت” را مشاهده میکنیم که میتوانیم آنهارا هم نیز ویرایش نماییم

 

برای حذف لینک فراموشی رمز عبور می توانید قطعه کد زیر را جایگذاری نمایید :

p#nav
{
display: none;
}

برای حذف لینک بازگشت به وبسایت می توانید قطعه کد زیر را جایگذاری نمایید :

p#backtoblog
{
display: none;
}

 

اگر قصد اضافه کردن لینک های اضافی را دارید باید کد زیر را در functions.php قرار دهید

<br data-mce-bogus="1">

function my_a4fran3_loginfooter() { ?&gt;

 &lt;p style="text-align: center; margin-top: 1em;"&gt;

 &lt;a style="color: #ff896f; text-decoration: none;" href="https://a4fran3.ir"&gt;آچار فرانسه

 &lt;/a&gt;

 &lt;/p&gt;

 &lt;?php }

 add_action('login_footer','my_a4fran3_loginfooter');

 

 

ریدایرکت کاربر پس از ورود:

اگر میخواهید کاربر پس از ورود به صفحه خاصی منتقل شود باید کد زیر را در functions.php قرار دهید

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);

 

 

لینک کوتاه:

https://a4fran3.ir/?p=17461

guest
0 نظرات
Inline Feedbacks
مشاهده همه نظرات

مطالب تصادفی