Tạo Form Register ấn tượng với Fancybox cho WordPress

VNC - vncongnghe hôm nay xin giới thiệu đến các bạn một thủ thuật tạo Form đăng ký ấn tượng cho blog bằng cách sử dụng Fancybox. Thủ thuật này sẽ đi qua 4 bước cũng khá đơn giản, trong đó 3 bước đầu tiên là 3 bước quan trọng, bạn cần phải theo dõi kỹ nếu không form sẽ không hiển thị hoặc hiển thị không như mong muốn.

BƯỚC 1: HIỂN THỊ NÚT “REGISTER”

Để hiển thị nút “Register” hoặc bất cứ từ gì mà bạn muốn trên blog, bạn chỉ cần đặt đoạn code sau đây vào nơi mà bạn muốn hiển thị:

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

Chú ý: Bạn không nên thay đổi #register-form vì đây sẽ là cơ sở để Fancybox có thể hoạt động.

Trong ví dụ này, mình sử dụng Theme mặc định của WordPress 3.0 – Twentyten và đặt nó trong file header.php sau đoạn code:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

ẢNH MINH HỌA:

Sau đó, bạn đặt đoạn code sau đây vào bất cứ đâu tùy thích cũng trong file header.php:

<div style="display:none"> 
<div id="register-form">
<div class="title">
<h1>Register For This Site</h1>
</div>
<form action="" method="post">
<input type="text" name="user_login" value="Username" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" id="user_login" class="input" />
<input type="text" name="user_email" value="E-Mail" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" id="user_email" 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>

Mục đính của đoạn code trên là tạo form đăng ký, nhưng hiện giờ nó chưa thể hiển thị

BƯỚC 2: JQUERY

Trước tiên cần gọi các jQuery có sẵn của WordPress, để làm được như vậy, bạn chỉ cần đặt đoạn code sau vào file header.php và trước tag <head>.

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

Bạn download Fncybox tại đây và giải nén sẽ được 5 file và thư mục như sau, bạn chỉ cần quan tâm đến thư mục fancybox, Upload nó vào thư mục của theme.

Tiếp đến, dán đoạn code sau vào footer.php trước </body>

<link rel="stylesheet" type="text/css" href="http://yoursite/wp-content/themes/yourtheme/fancybox/jquery.fancybox-1.3.1.css" media="screen" />

<script type="text/javascript" src="http://yoursite/wp-content/themes/yourtheme/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="http://yoursite/wp-content/themes/yourtheme/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

Cuối cùng và quan trọng của bước này, dó là đoạn code giúp hiển thị form đăng ký ấn tượng

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

BƯỚC 3: WORDPRESS

Bạn mở file wp-login.php và tìm 2 dòng sau:

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

và:

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

Sau đó gắn nó vào đoạn code ở bước một, chúng ta có đoạn code như sau:

<div style="display:none">
<div id="register-form">
<div class="title">
<h1>Register For This Site</h1>
</div>
<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
<input type="text" name="user_login" value="Username" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" id="user_login" class="input" />
<input type="text" name="user_email" value="E-Mail" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" 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>

Mục đích là để cho Form không trở nên vô dụng. Vì sao vô dụng, bạn hãy tự mình tìm hiểu nhé

BƯỚC 4: CSS

Bước cuối cùng không mấy quan trọng, bạn chỉ cần thêm css để Form thêm đẹp và ấn tượng. Đây là đoạn code css của vncongnghe, bạn có thể tham khảo và chỉnh sửa các thuộc tính sao cho phù hợp.

/**** Register Form ****/
#registration {
float: right;
}
div#register-form {
background: url("images/bg-register-form.png") no-repeat scroll 260px 40px #F9F9F9;
font-family: Helvetica Neue, Helvetica, Arial !important;
width: 400px; height: 230px;
overflow: hidden;
position: relative;
}
div#register-form input[type="text"] {
font-family: Helvetica Neue, Helvetica, Arial !important;
display: block;
margin: 5px 20px; padding: 9px 4px;
border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius:4px;
width: 200px;
}
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;
}
div#register-form input[type="submit"]#register {
background: url("images/register.png") repeat-x scroll left top #21759B;
border: 1px solid #298CBA; -moz-border-radius: 11px 11px 11px 11px; -webkit-border-radius: 11px 11px 11px 11px;
font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; font-size: 12px; font-weight: bold; line-height: 12px; color: #EAF2FA; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
clear: both;
cursor: pointer;
overflow: hidden;
position: relative;
left:288px; top: 50px;
padding: 3px 10px;
}
div#register-form input[type="submit"]#register:hover {
border-color: #13455B;
color: #EAF2FA;
}
div#register-form div.title {
margin-left:15px;
}
div#register-form div.title h1 {
text-shadow:1px 1px 0px #fff;
margin:7px 0 40px;
}
p.statement {
font-size: 11px; color:#6d6d6d; text-shadow:1px 1px 0px #fff;
position:absolute;
bottom:-4px; left:10px;
}

SAU KHI HOÀN THÀNH: