ایجاد صفحه ورود سفارشی وردپرس

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

مراحل انجام کار؛

1 . ایجاد فایل CSS

در اولین مرحله شما باید وارد پوشه قالب در حال استفاده شوید و در روت همان پوشه یک فایل CSS به نام دلخواه ایجاد کنید. ما در این آموزش فایلی به نام wp-login.css را ایجاد می کنیم (به عنوان مثال).

2 . معرفی فایل به وردپرس

پس از ساختن فایل استایل ، اکنون باید آن را به وردپرس معرفی کنیم تا محتویات داخل آن فایل را در صفحه ورود و عضویت اعمال نماید. پس کد زیر را در فایل functions.php قالبمان قرار می دهیم و آدرس دقیق فایلی که ایجاد کرده ایم را در داخل کد معرفی می کنیم. در کد زیر فرض شده که نام فایلی که ساخته ایم wp-login.css و این فایل در روت پوشه قالبمان قرار دارد :

function devme_login_css() {
  echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/wp-login.css"/>';
}
add_action('login_head', 'devme_login_css');

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

3 . آغاز استایل دهی

پس از طی این دو مرحله ، اکنون آماده ایم تا استایل های مورد نظرمان را داخل فایل استایل جدید قرار دهیم و در صفحه ورود و عضویت پیش فرض وردپرس اعمال کنیم.  در اینجا ما چند تغییر به عنوان مثال ذکر خوهیم کرد که شما باید با استفاده از قابلیت Inspector مرورگرتان، بخش های صفحه ورود و عضویت را بررسی و استایل ها را آزمایش و جهت اعمال شدن برای تمامی کاربری، کدهای استایل را داخل فایل جدیدی که ایجاد کرده اید قرار دهید.

تغییر لوگوی صفحه ورود وردپرس

مهم ترین تصویری که در صفحه ی ورود به چشم می خورد لوگوی سایت شما می باشد شما می توانید لوگوی خود را در این بخش جایگزین کنید. اندازه پیش فرض برای این لوگو ۸۰×۸۰ پیکسل است، نیازی نیست حتما به این اندازه باشد اما باید حتما به صورت مربع در نظر گرفته شود . فرمت لوگو خود را  PNG در نظر گرفته و آن را در مسیر login/image قرار دهید .(پوشه image را در این مرحله ایجاد نمایید.)

در این مرحله باید کد زیر را در فایل custom-login-style.css قرار دهیم.

login h1 a {
background-image: url("../image/logo-1.png");
background-size: 75px;
}

مخفی کردن لوگوی وردپرس در صفحه ورود

 .login h1 a {display: none;} 

تغییر رنگ پس زمینه

 .login body {background: #607D8B !important;} 

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

شما می توانید هر تصویر پس زمینه دلخواهی را به صفحه ورود خود اضافه کنید. فقط نام دقیق آن را در خط دوم CSS سفارشی خود مشخص کنید. کد زیر را به فایل سی اس اس خود اضافه نمایید.

Body.login
{
background-image:url("../image/login-page-bg.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

در این کد منظور از login-page-bg.jpg تصویری است که به عنوان تصویر زمینه خود انتخاب کرده اید. همچنین می توانید از رنگ برای این بخش استفاده کنید.

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

می توانید فرم ورود شخصی خود را بسازید تا با ظاهر سایتتان مطابقت داشته باشد. همچنین می توانید بافت و حاشیه فرم را تنظیم کنید. برای نمونه قطعه کد زیر را در ادامه کدهای خود وارد کنید.

.login form{
box-shadow:none;
padding:20px;
}

#login {
background:
#FFF;
margin: 50px auto;
padding: 40px 20px;
width: 400px;
}

.login label {
color:
#555;
font-size: 14px;
}

.login form .forgetmenot{
float:none;
}

می توانید حاشیه، مرز، ارتفاع، عرض و رنگ دکمه ارسال را تنظیم کنید. بنابراین، کدهای زیر را به CSS خود اضافه کنید.

#login form p.submit{
margin-top:15px;
}

.login.wp-core-ui .button-primary {
background:
#7B417A;
border-color:
#7B417A;
box-shadow: 0 1px 0
#7B417A;
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;
}

اگر مایل باشید لینک هایی را به این قسمت اضافه کنید باید از login_footer استفاده نمایید و کد های زیر را در فایلfunctions.php قرار دهید.

<br data-mce-bogus="1">
function my_loginfooter() { ?&gt;
 &lt;p style="text-align: center; margin-top: 1em;"&gt;
 &lt;a style="color: #ff896f; text-decoration: none;" href="http://nik-web.ir"&gt;برای مشاهده digital98 کلیک کنید
 &lt;/a&gt;
 &lt;/p&gt;
 &lt;?php }
add_action('login_footer','my_loginfooter');

تغییر مسیر (ریدایرکت) کاربر پس از ورود

به طور پیش فرض کاربر پس از ورود به صفحه پیشخوان وردپرس می رود ولی اگر شما ثبت نام را باز گذاشته باشید و یا بخواهید کاربر بعد از ورود به صفحه ی خاصی برود می توانید از کد های زیر بهره بگیرید. در قطعه کد زیر که باید در فایلfunction.php قرار دهید، بررسی می شود که افراد با نقش مدیر به صفحه پیشخوان و سایر افراد پس از ورود به صفحه اصلی منتقل شوند.

function custom_login_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_redirect", 10, 3);

البته شما به راحتی می توانید صفحاتی را که کاربر به آنها هدایت می شوند را تغییر دهید به طور مثال در کد زیر کاربر به صفحه ی تماس هدایت خواهد شد .

site_url( '/contact/')

تغییر پیش فرض باکس مرابه خاطر بسپار

وضعیت باکس مرابه خاطر بسپار به طور پیش فرض به صورت چک نشده است. شما می توانید آن را به وضعیت چک شده به وسیله کدهای زیر تغییر دهید.

add_filter( 'login_footer', 'default_rememberme_checked' );
}
add_action( 'init', 'default_checked_remember_me' );
function default_rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

در این آموزش تمام موارد مربوط به سفارشی سازی صفحه ورود وردپرس با کدنویسی را بررسی کردیم. شما می توانید تمام تغییرات خود را با یک کد ساده css اعمال کنید.