Advertisement
  1. Code
  2. WordPress

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

Scroll to top
Read Time: 4 min

() 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?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.