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

چهارشنبه ۵ شهریور ۱۳۹۹

0 17 خواندن این مطلب 1 دقیقه زمان میبرد

اگر صفحه ساده ورود به پیشخوان وردپرس خسته شده اید میتوانید آن را زیبا تر و اختصاصی کنید. شما برای انجام این کار ابتدا باید در قالب خود پوشه ای با نام 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');

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

}

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{

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;

}

#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#nav

{

display: none;

}

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

p#backtoblog
{
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');

function my_a4fran3_loginfooter() { ?>

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

</a>

</p>

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