() translation by (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.
1 |
<div style="display:none"> <!-- Registration --> |
2 |
<div id="register-form"> |
3 |
<div class="title"> |
4 |
<h1>Register your Account</h1> |
5 |
<span>Sign Up with us and Enjoy!</span> |
6 |
</div>
|
7 |
<form action="" method="post"> |
8 |
<input type="text" name="" value="Username" id="" class="input"/> |
9 |
<input type="text" name="" value="E-Mail" id="" class="input" /> |
10 |
<input type="submit" value="Register" id="register" /> |
11 |
<hr /> |
12 |
<p class="statement">A password will be e-mailed to you.</p> |
13 |
</form>
|
14 |
</div>
|
15 |
</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.
1 |
div#register-form { |
2 |
width: 400px; |
3 |
overflow: hidden; |
4 |
height: 230px; |
5 |
position: relative; |
6 |
background: #f9f9f9 url(images/secure.png) no-repeat 260px 40px; |
7 |
font-family: Helvetica Neue, Helvetica, Arial !important; |
8 |
}
|

Folytatásképp, stílizálni fogom a szöveg bemeneteket, egy kis díszességet hozzáadva.
1 |
div#register-form input[type="text"] { |
2 |
display: block; |
3 |
border: 1px solid #ccc; |
4 |
margin: 5px 20px; |
5 |
padding: 9px 4px; |
6 |
-moz-border-radius: 4px; |
7 |
-webkit-border-radius:4px; |
8 |
width: 200px; |
9 |
font-family: Helvetica Neue, Helvetica, Arial !important; |
10 |
}
|
11 |
|
12 |
div#register-form input[type="text"]:hover { |
13 |
border-color: #b1b1b1; |
14 |
}
|
15 |
|
16 |
div#register-form input[type="text"]:focus { |
17 |
-moz-box-shadow: 0 0 3px #ccc; |
18 |
-webkit-box-shadow: 0 0 3px #ccc; |
19 |
}
|

Most, stílizálni fogom a gombot, lebegő állapotot hozzáadva, és kicserélve az alapértelmezett gombot egy képpel.
1 |
div#register-form input[type="submit"]#register { |
2 |
background: url(images/register.jpg) no-repeat; |
3 |
border: 0; |
4 |
clear: both; |
5 |
cursor: pointer; |
6 |
height: 31px; |
7 |
overflow: hidden; |
8 |
position: relative; |
9 |
left:295px; |
10 |
text-indent: -9999px; |
11 |
top:42px; |
12 |
width:92px; |
13 |
}
|
14 |
div#register-form input[type="submit"]#register:hover { |
15 |
background-position: 0 -32px; |
16 |
}
|

Végül, hozzáadunk egy kis általános stílust.
1 |
div#register-form span { |
2 |
display: block; |
3 |
margin-bottom: 22px; |
4 |
}
|
5 |
|
6 |
div#register-form div.title {margin-left:15px} |
7 |
div#register-form div.title h1, |
8 |
div#register-form div.title span {text-shadow:1px 1px 0px #fff} |
9 |
div#register-form div.title h1 { |
10 |
margin:7px 0; |
11 |
}
|
12 |
|
13 |
p.statement { |
14 |
position:absolute; |
15 |
bottom:-2px; |
16 |
left:10px; |
17 |
font-size:.9em; |
18 |
color:#6d6d6d; |
19 |
text-shadow:1px 1px 0px #fff; |
20 |
}
|
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.
1 |
jQuery(document).ready(function() { |
2 |
jQuery(".show").fancybox({ |
3 |
'titleShow' : 'false', |
4 |
'transitionIn' : 'fade', |
5 |
'transitionOut' : 'fade' |
6 |
});
|
7 |
});
|
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:
1 |
<div style="display:none"> <!-- Registration --> |
2 |
<div id="register-form"> |
3 |
<div class="title"> |
4 |
<h1>Register your Account</h1> |
5 |
<span>Sign Up with us and Enjoy!</span> |
6 |
</div>
|
7 |
<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post"> |
8 |
<input type="text" name="user_login" value="Username" id="user_login" class="input" /> |
9 |
<input type="text" name="user_email" value="E-Mail" id="user_email" class="input" /> |
10 |
<?php do_action('register_form'); ?>
|
11 |
<input type="submit" value="Register" id="register" /> |
12 |
<hr /> |
13 |
<p class="statement">A password will be e-mailed to you.</p> |
14 |
|
15 |
|
16 |
</form>
|
17 |
</div>
|
18 |
</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?