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

درود…
امروز پیرو درخواست تعدادی از دوستان عزیز، آموزشی را برای ساخت یک فرم ورود زیبای لایت باکس برای وردپرس آماده کرده ایم.
در این آموزش شما می توانید بدون نیاز به دانش کدنویسی بالا؛ تنها با دنبال کردن دقیق آموزش و استفاده ی صحیح از کدهای 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="https://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