آموزش های وردپرس

آموزش ایجاد صفحه ورود سفارشی بدون استفاده از افزونه

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

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

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

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

ایجاد صفحه ورود سفارشی بدون استفاده از کد نویسی

با استفاده از کدنویسی میتوانید یک صفحه ورود به سیستم سفارشی در وردپرس ایجاد کنید. انجام این فرآیند نیاز به مهارت های اساسی در HTML، PHP، CSS و… دارد. طبق روال همیشگی یادآوری می کنیم که قبل از انجام هر گونه تغییرات از سایت خود بک آپ تهیه کنید. به یاد داشته باشید که اگر وردپرس خود را به روز رسانی کنید، این تغییرات را از دست خواهید داد؛ پس بهتر است تغییرات خود را در چایلد تم ذخیره کنید.

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

این مطلب را از دست ندهید:
  آموزش قراردادن فاوآیکون در سایت وردپرسی

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

بعد از ایجاد این فایل باید آن را در قالب خود فراخوانی کنید. پس قطعه کد زیر را در فایل 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');

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

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

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

login h1 a {

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

background-size: 75px;

}

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

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

 &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 اعمال کنید.

عاطفه نوربخش

عاطفه نوربخش هستم؛ هم بنیانگذار " وردپرس نارنجی " که حاصل تجربه های خودم در حوزه تخصصی وردپرس را برایتان می نویسم و تلاش میکنم به شما کمک کنم تا با سیستم مدیریت محتوای وردپرس، سایت وردپرسی ای زیبا و حرفه ای داشته باشید.

۴ دیدگاه

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

    1. سلام
      خواهش می کنم ممنون از لطف شما
      ما در وردپرس نارنجی هدفمون آموزش وردپرس به زبان ساده و شیرین هست و خوشحالم که به این هدف نزدیک شدیم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *