آموزش ساخت فرم ورود لایت باکس

دسته‌ها : آموزش, وردپرس علی میرزائی 17 دیدگاه‌ها

آموزش ساخت فرم ورود به سایت لایت باکس

درود…
امروز پیرو درخواست تعدادی از دوستان عزیز، آموزشی را برای ساخت یک فرم ورود زیبای لایت باکس برای وردپرس آماده کرده ایم.
در این آموزش شما می توانید بدون نیاز به دانش کدنویسی بالا؛ تنها با دنبال کردن دقیق آموزش و استفاده ی صحیح از کدهای CSS ،  HTML و JQuery  زیر، گام به گام با نحوه ی ساخت یک فرم لوگین ساده، زیبا و متفاوت آشنا شوید.

خوب، برای شروع کار ابتدا لازم است تا یک فایل با فرمت php با نامی دلخواه (مثلا login) بسازید و آنرا در پرونده ی قالب خود بارگذاری کنید (برای این کار می توانید از نرم افزار ++Notepad استفاده کنید).

در ادامه کدهای زیر را در این فایل کپی کنید و تغییرات را ذخیره کنید (این کدها بدنه ی اصلی فرم ما را تشکیل خواهند داد).

<div id="login-box" class="login-popup">
        <a href="#" class="close"><img src="<?php bloginfo('template_directory'); ?>/images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
		<form id="login" action='<?php echo home_url(); ?>/wp-login.php' method="post">
		<fieldset class="textbox">
        <label>
		<span>شناسه</span>
        <input type="text" name="log" id="user_login" class="input" value="" />
		</label>
        <label>
		<span>رمز عبور</span>
        <input type="password" name="pwd" id="user_pass" class="input" value="" />
		</label>
		<div class="submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button" value="ورود به سایت"/>
        <input type="hidden" name="redirect_to" value="<?php echo get_option('home'); ?>/wp-admin/" />
        <input type="hidden" name="testcookie" value="1" />
		</div>
		<span>
        <a class="forgot" href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">رمز عبور خود را فراموش کرده اید؟</a>
        </span> 
		</fieldset>
        <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
		</form>
</div>

سپس نوبت به فراخوانی فرم ورود می رسد.
بخش اول کدهای ذیل، مربوط به لینکی است که با کلیک بر روی آن محتوای فرم ورود به صورت لایت باکس به نمایش در می آید.
و بخش دوم که وابسته به بخش اول است محتوای فایل ساخته شده (اینجا با نام login) را فراخوانی می کند.
این دو خط کد را در مکانی که می خواهید لینک ورود به نمایش در آید قرار دهید:

<a href="#login-box" class="login-window">ورود به سایت</a>
<?php include (TEMPLATEPATH . '/login.php'); ?>

حال نوبت به استایل دهی می رسد. پس کدهای زیر را در شیوه نامه (Style.css) قالب کپی و تنظیمات را ذخیره کنید.

#mask {
	display: none;
	background: #000; 
	position: fixed; left: 0; top: 0; 
	z-index: 10;
	width: 100%; height: 100%;
	opacity: 0.8;
	z-index: 999;
}

.login-popup{
	display:none;
	padding: 10px; 	
	border: 2px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	box-shadow: 0px 0px 20px #999; /* CSS3 */
    -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
	border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari, Chrome */
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #d3efff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d3efff));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#d3efff 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#d3efff 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#d3efff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3efff',GradientType=0 );
	background: linear-gradient(to bottom,  #ffffff 0%,#d3efff 100%);
}

img.btn_close {
	float: right; 
	margin: -3px -3px 0 0;
}

fieldset { 
	border:none; 
}

#login .textbox label { 
	display:block; 
	padding-bottom:7px;
	text-align:right;
}

#login .textbox span { 
	display:block;
}

#login p, form#login span { 
	color:#999; 
	font-size:11px; 
	line-height:15px;
	margin-right:6px;
} 

#login .textbox input.input {
	text-align:left;
    margin: 2px 5px 0 0;
    width: 200px;
	padding-left:5px;
    height: 35px;
    color: #404040;
    background: white;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
	background: #d3efff;
	background: -moz-linear-gradient(top,  #d3efff 0%, #ffffff 55%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3efff), color-stop(55%,#ffffff));
	background: -webkit-linear-gradient(top,  #d3efff 0%,#ffffff 55%);
	background: -o-linear-gradient(top,  #d3efff 0%,#ffffff 55%);
	background: -ms-linear-gradient(top,  #d3efff 0%,#ffffff 55%);
	background: linear-gradient(top,  #d3efff 0%,#ffffff 55%);
}

#login .textbox input.button{ 
	font: 15px Tahoma, Geneva, sans-serif;
	font-weight:bold;
	color: white;
	padding: 12px;
	margin: 10px 5px 10px 0;
	cursor: pointer;
	width:208px;
    background-color: #0064cd;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
    background-image: linear-gradient(to bottom, #049cdb, #0064cd);
    border: 1px solid #0064cd;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;

}
#login .textbox input.button:hover {
	background:#049cdb;
}

آخرین مرحله ی کار استفاده از کدهای جی کوئری جهت نمایش لایت باکس فرم ورود است.
پیشتر در سایت آموزشی را در رابطه با نحوه ی نمایش لایت باکس یک محتوای فرضی منتشر کرده بودیم (جهت مشاهده آموزش کلیک کنید)، در اینجا هم از همان روش استفاده می کنیم. تنها تفاوت تغییر نام برخی از توابع است.

خوب، ابتدا اگر کتابخانه ی جی کوئری در پوسته ی شما فراخوانی نشده، کد زیر را در فایل سربرگ (header.php) داخل تگ <head> قرار دهید (البته به دلایل سئو معمولا پیشنهاد می شود که فایل های جی کوئری در پانوشت (footer.php) فراخوانی شوند).

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

و در آخرین قدم قطعه کد زیر را درست همانند بالا در سربرگ یا پانوشت کپی کنید (یا اینکه فایلی با فرمت js بسازید و کدها را در آنجا کپی و مکان آن فایل را در پوسته آدرس دهی کنید).

	<script type="text/javascript">
	$(document).ready(function() {
	$('a.login-window').click(function() {

                //Getting the variable's value from a link 
		var loginBox = $(this).attr('href');

		//Fade in the Popup
		$(loginBox).fadeIn(300);

		//Set the center alignment padding + border see css style
		var popMargTop = ($(loginBox).height() + 24) / 2; 
		var popMargLeft = ($(loginBox).width() + 24) / 2; 

		$(loginBox).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});

		// Add the mask to body
		$('body').append('<div id="mask"></div>');
		$('#mask').fadeIn(300);

		return false;
	});

	// When clicking on the button close or the mask layer the popup closed
	$('a.close, #mask').live('click', function() { 
	  $('#mask , .login-popup').fadeOut(300 , function() {
		$('#mask').remove();  
	}); 
	return false;
	});
});
	</script>

و کار تمام است، امیدواریم که آموزش مفید بوده باشد… 😉

منبع : دنیای وردپرس و برنامه نویسی – www.alimir.ir

دیدگاه کاربران در مورد این نوشته

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

    توسط مهدی پاسخ

  2. سلام آقای میرزایی ببخشید من میخوام این فرم از منو باز شه – کلاس سی اس اس اختیاری رو login-window# میذارم و نشانی رو هم login-box میذارم اما تا فایل login.php رو نمیدونم کجا اینکلود کنم تا با کلیک روی منو فرمم باز شه میتونین کمکم کنین؟ ممنون میشم

    توسط رضا پاسخ

  3. سلام آقای میرزایی من برای کوکی فرم لایت باکسم مشکل دارم لطفا راهنماییم کنید چطور کوکی ست کنم ؟مرسی

    توسط مینا پاسخ

    1. کوکی رو برای تنظیم تعداد دفعات نمایش میخواید؟!؟
      لینک های زیر رو بررسی کنید:
      http://www.quirksmode.org/js/cookies.html
      http://acooke.web.wesleyan.edu/cookies.html

      توسط علی میرزائی پاسخ

  4. salam man ye form daram ba html neveshtam mikham bad az load shodane kamele site neshoon dadeh beshe bayad che kodi benevisam albate nemikham ba click neshoon dade beshe va soal dovomam ine ke in code formamo bayad dar page index site bezaram?mer30

    توسط maryam پاسخ

    1. سلام،
      لطفا فارسی تایپ کنید.
      روشش رو در دیدگاه قبلی توضیح دادم.
      بستگی به نیاز شما داره! اگه میخواید در تمامی صفحات اجرا شه، بهتره در فایل header یا footer فراخوانیش کنید.

      توسط علی میرزائی پاسخ

  5. سلام من میخوام فرمم بدون کلیک روی کلمه” ورود به سایت” ظاهر بشه یعنی با لود سایت اول فرم ظاهر شه باید چکار کنم؟

    توسط mina پاسخ

    1. سلام،
      از کد زیر در بخش جی کوئری استفاده کنید:

      $(document).ready(function() {
      
      	function auto_popup()
          {
      		var loginBox = $('#login-box');
      
      		$(loginBox).fadeIn(300);
      
      		//Set the center alignment padding + border
      		var popMargTop = ($(loginBox).height() + 24) / 2; 
      		var popMargLeft = ($(loginBox).width() + 24) / 2; 
      
      		$(loginBox).css({ 
      			'margin-top' : -popMargTop,
      			'margin-left' : -popMargLeft
      		});
      
      		// Add the mask to body
      		$('body').append('<div id="mask"></div>');
      		$('#mask').fadeIn(300);
      
      		return false;
          }
      
          window.onload = auto_popup;
      
      	// When clicking on the button close or the mask layer the popup closed
      	$('a.close, #mask').live('click', function() { 
      	  $('#mask , .login-popup').fadeOut(300 , function() {
      		$('#mask').remove();  
      	}); 
      	return false;
      	});
      });

      توسط علی میرزائی پاسخ

  6. سلام.ممنون ولی من هر کاری میکنم نمیشه!
    ببینید این کدو:
    href="#login-box"
    کجا بذارم؟
    تو قالب؟ ابزارک؟ …. کجا جواب میده من همه را امتحان کردم.

    توسط رضاپور پاسخ

    1. سلام،
      در متن به این اشاره کردم که محل قرارگیری لینک آی دی مهم نیست، فقط باید فراخوانی های استایل و جی کوئری در صفحه موجود باشن.
      با این وجود الان که بررسی کردم به نظرم میاد لینک کتابخانه جی کوئری یه مشکلی پیدا کرده(البته فک میکنم مشکلش مقطعیه!). شما یکبار لینک کتابخانه رو تغییر بدید و ببینید نتیجه میگیرید یا نه!

      توسط علی میرزائی پاسخ

  7. میشه این فرم ورود رو ویرایش کرد و به حالت دلخواه در آورد ؟

    توسط برنامه نویس پاسخ

    1. بله، صد در صد.

      توسط علی میرزائی پاسخ

  8. داش این چرا تو کروم کار نمی کنه؟؟

    توسط امین پاسخ

    1. نه! اتفاقا تو کروم بهتر از بقیه ی مرورگر ها کار میکنه…
      احتمالا در جایی اشتباه کردید یا مرورگرتون مشکل داره!!!

      توسط علی میرزائی پاسخ

      1. داداش تو کروم هم کار کرد فقط نمی دونم چرا دکمه بسته شدنش کار نمی کنه

        توسط امین پاسخ

      2. داداش اون مشکل بسته شدن هم حل شد
        مطلب خیلی توپی بود واسه فرم ثبت نام هم اگه دیدید حتما بذارید

        توسط امین پاسخ

        1. به سلامتی ایشالا…
          اون هم خیلی سادست، با چند تغییر ساده در اکشن و نام ورودی ها میشه به فرم ثبت نام تغییرش داد.
          ایشالا اگه عمری بود، در آینده ای نزدیک اون رو هم منتشر میکنیم. 😉

          توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید