Gyors tipp: Egy díszes WordPress regisztráció forma készítése Scratchből

Hungarian (Magyar) translation by Bózsó Péter (you can also view the original English article)

Ebben a bemutatóban, tanácsokat fogok adni egy gyönyörű "regisztráció" forma készítésének folyamatán, Fancybox, jQuery, és természetesen WordPress használatával. Ahogy látni fogod, a folyamat meglehetősen egyszerű.

1. lépés A jelölés

Először, helyezzünk el egy gombot az oldal tetején, az alapértelmezett leírás áthelyezésével a témában.

1	<div id="registration"><a class="show register-button" href="#register-form">Register</a></div>

Észreveszed, hogy a regisztráció gombban, a href (#register-form) ugyanaz, mint a forma lentebb. Továbbá használjuk a ".show" osztályt FancyBox hívására jQueryvel.

Szükség van az alapunkra; készítsük el a jelölésünket. Nyisd meg a header.php-t, és helyezd el a következő töredéket bárhol ahol szeretnéd.

<div style="display:none"> <!-- Registration -->
  	<div id="register-form">
		<div class="title">
			<h1>Register your Account</h1>
			<span>Sign Up with us and Enjoy!</span>
		</div>
			<form action="" method="post">
			<input type="text" name="" value="Username" id="" class="input"/>
			<input type="text" name="" value="E-Mail" id="" class="input" />
				<input type="submit" value="Register" id="register" />
			<hr />
			<p class="statement">A password will be e-mailed to you.</p>
			</form>
		</div>
</div><!-- /Registration -->

Jegyezd meg, hogy display:none-t használok, hogy alapvetően elrejtsem a formát.

2. lépés, CSS

A CSS inkább egyszerű; Én csupán stílizálok egy rövid formatervezést PhotoShopban.

A forma, mínusz a stílus, így néz ki: (jegyezd meg, hogy kivettem a display:none-t a jelölésben hogy ellenőrizzem a stílusaimat)

Kezdjük el stílizálni a dobozunkat.

div#register-form {
	width: 400px; 
	overflow: hidden; 
	height: 230px; 
	position: relative; 
	background: #f9f9f9 url(images/secure.png) no-repeat 260px 40px; 
	font-family: Helvetica Neue, Helvetica, Arial !important;
}

Folytatásképp, stílizálni fogom a szöveg bemeneteket, egy kis díszességet hozzáadva.

div#register-form input[type="text"] {
	display: block;
	border: 1px solid #ccc;
	margin: 5px 20px;
	padding: 9px 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius:4px;
	width: 200px;
	font-family: Helvetica Neue, Helvetica, Arial !important; 
}

div#register-form input[type="text"]:hover {
	border-color: #b1b1b1;
}

div#register-form input[type="text"]:focus {
	-moz-box-shadow: 0 0 3px #ccc;
	-webkit-box-shadow: 0 0 3px #ccc;
}

Most, stílizálni fogom a gombot, lebegő állapotot hozzáadva, és kicserélve az alapértelmezett gombot egy képpel.

div#register-form input[type="submit"]#register {
	background: url(images/register.jpg) no-repeat;
	border: 0;
	clear: both;
	cursor: pointer;
	height: 31px;
	overflow: hidden;
	position: relative;
	left:295px;
	text-indent: -9999px;
	top:42px;
	width:92px;
}
div#register-form input[type="submit"]#register:hover {
	background-position: 0 -32px;
}

Végül, hozzáadunk egy kis általános stílust.

div#register-form span {
	display: block;
	margin-bottom: 22px;
}

div#register-form div.title {margin-left:15px}
div#register-form div.title h1,
div#register-form div.title span {text-shadow:1px 1px 0px #fff}
div#register-form div.title h1 {
	margin:7px 0;
}

p.statement {
	position:absolute;
	bottom:-2px;
	left:10px;
	font-size:.9em;
	color:#6d6d6d;
	text-shadow:1px 1px 0px #fff;
}

Voila! megvan a formánk. Most, menjünk tovább a jQuery funkcionalitással.

3. lépés, jQuery

Először, el kell helyeznünk a jQueryt WordPressen belül. Hogy elérjük ezt, el kell helyeznünk a következő kóddarabot a <head> címke elé a header.php fájlon belül. Emlékezz, ahogy a WordPress hasznosítja a jQueryt, nem akarjuk potenciálisan betölteni kétszer!

1	<?php wp_enqueue_script("jquery"); ?>
2	<?php wp_head(); ?>

Töltsd le a Fancyboxot és helyezd el a WordPress mappádban. Hogy egy kicsit jobban szervezzük a dolgokat, készítettem egy "Tartalmak" mappát.

Ezután, nyisd meg a footer.php fájlodat, és helyezd el a következőt a </body> címke vége előtt.

1	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/includes/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
2	<!-- Javascript -->
3	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/includes/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
4	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/includes/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

És most, hívjuk a fancybox módszert: illeszd be ezt a fenti kód után és a záró body címke előtt.

		jQuery(document).ready(function() {
			jQuery(".show").fancybox({
				'titleShow'		: 'false',
				'transitionIn'		: 'fade',
				'transitionOut'		: 'fade'
			});
		});

Kész vagyunk! A formánk el lett készítve, végül csak át kell mennünk a szükséges WordPress információkon, hogy megfelelően működővé tegyük.

4. lépés, WordPress

Semmi díszes nincs itt; csak két WordPress töredéket igénylünk, elrejtve a wp-login.php fájlban.

Az első töredék:

1	<?php echo site_url('wp-login.php?action=register', 'login_post') ?>

És:

1	<?php do_action('register_form'); ?>

Az utolsó kódnak így kell kinéznie:

<div style="display:none"> <!-- Registration -->
		<div id="register-form">
		<div class="title">
			<h1>Register your Account</h1>
			<span>Sign Up with us and Enjoy!</span>
		</div>
			<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
			<input type="text" name="user_login" value="Username" id="user_login" class="input" />
			<input type="text" name="user_email" value="E-Mail" id="user_email" class="input"  />
				<?php do_action('register_form'); ?>
				<input type="submit" value="Register" id="register" />
			<hr />
			<p class="statement">A password will be e-mailed to you.</p>
			
			
			</form>
		</div>
</div><!-- /Registration -->

Kérlek jegyezd meg, hogy ez nagyon fontos, és szükséges, hogy a user-login meglegyen névként és egy ID-ként a szöveg bemenetedben; ugyanez igaz az email bemenetre. Egyébként, ez nem fog működni.

És ezzel, kész vagyunk!

Következtetés

Egy kód érintéssel, és néhány csípéssel, sikerült egy jól kinéző "Regisztrációs formát" építenünk a felhasználóinknak. Mit gondolsz?