Chào các bạn, trước hết mình xin lỗi vì bận công việc quá nên đến giờ mới có phần 5.

Ở phần 4 chúng ta đã làm xong phần header cho website, đến giờ chắc hẳn các bạn đã tương đối quen thuộc với cấu trúc của wordpress rồi. Ở phần này chúng ta sẽ làm sidebar left và right.

Các phần trước:

Phần 1: Cấu trúc theme WordPress

Phần 2: Xây dựng cấu trúc theme

Phần 3: Coding Admin page

Phần 4: Thực hiện các trang Front-end (header)

Phần 6: Xây dựng phần hiển thị Content


Phần 5: Coding Front-end (sidebar)

Trong phần này chúng ta sẽ thực hiện phần sidebar left và right cho website.

Chúng ta sẽ liệt kê các chức năng cần code trên sidebar

- Sidebar LEFT:

  • Category (Danh mục sản phẩm)
  • Support Online (List yahoo support)
  • VND Exchange (Javascript)
  • Popular Brand (danh sách các nhà sản xuất )
  • W3C check HTML

- Sidebar RIGHT:

  • User Management (Login form, user info, cart).
  • Contact (List phone number)
  • Random Post (list products)

Giờ ta bắt đầu code, ta sẽ code sidebar left trước và tất nhiên sẽ code trong file sidebar-left.php.

Để hiển thị danh mục các loại sản phẩm ta dùm hàm sau:

 wp_list_categories();

Trong file sidebar-left.php bạn tìm code sau:

</pre>
<ul>
	<li><a title="" href="#">Television</a></li>
	<li><a title="" href="#">Cooker</a></li>
	<li><a title="" href="#">Laptop</a></li>
	<li><a title="" href="#">Lamp</a></li>
</ul>
<pre>

Thay bằng đoạn sau:


<!--?php wp_list_categories('title_li=&show_count=1&taxonomy=nhom-hang');?-->

Để biết các đối số trong hàm này bạn có thể xem trên codex, trong đó taxonomy là danh mục sản phẩm bạn tạo trong file custom_taxonomy.php ( xem lại phần 3 )

Đến phần support online bạn làm như sau:

Các nick support có thể được config trong trang admin trong phần theme option ( xem lại phần 3 )

Bạn dùng đoạn code sau tại chỗ muốn hiển thị


<!--?php $yahoo_kd = get_option('yahoo_kinh_doanh'); $nicks = split(',',$yahoo_kd); if($nicks) { foreach($nicks as $nick) { ?--></pre>
<ul>
	<li><a href="<?php echo 'ymsgr:SendIM?' . $nick; ?>"><img src="<?php echo 'http://mail.opi.yahoo.com/online?u='. $nick . '&m=g&t=2'; ?>" alt="" /></a></li>
</ul>
<pre>

<!--?php } } else { ?--></pre>
<ul>
	<li><a href="ymsgr:SendIM?khoatd21"><img src="http://mail.opi.yahoo.com/online?u=khoatd21&m=g&t=2" alt="" /></a></li>
	<li><a href="ymsgr:SendIM?khoatd21"><img src="http://mail.opi.yahoo.com/online?u=khoatd21&m=g&t=2" alt="" /></a></li>
</ul>
<pre>

<!--?php } ?-->

đoạn code trên chắc không có gì là khó hiểu hen.

Trong Series này mình sẽ làm code cố định luôn mà không sử dụng widget, các bạn thông cảm hen ^^. Mình sẽ làm 1 bài viết khác về widget sau, các bạn đón xem.  th_055_

Đến phần Popular brand, chỗ này có thể là nơi bạn đặt các banner quảng cáo. Tất nhiên bạn phải quản lý được việc này ở trang admin, nhưng… Phần này xem như là bài tập dành cho các bạn nào Hì Hì, 1 chút thử thách cho thêm phần thú vị nào. Bạn hãy thử tự làm phần này xem.

Gợi ý 1 chút nhen, bạn tạo 1 post type cho nó, rồi show nó tại đây thôi, quá dễ dàng. Nếu bạn quên thì xem lại Phần 3 nào ^^.Chúc bạn thành công nhen.

Giờ chúng ta sẽ đến phần Sidebar Right, mở file sidebar-right.php lên nào ^^

Đầu tiên chúng ta sẽ làm form login.

Bạn có thể dùng hàm wp_login_form(). Khi dùng hàm này sẽ tự đọng sinh ra 1 form cho bạn. Đặt hàm này tại nơi bạn muốn hiển thị form.

Xem thêm về hàm wp_login_form() tại đây.

Nhưng cái form nó sinh ra chỉ có 1 định dạng cố định vậy thôi và ở template của bạn form có dạng khác thì phải làm sao đây?? Chẳng lẽ bó tay, ngồi đập bàn rủa “WordPress cùi vậy sao?”.

May mắn thay WP đã cho chúng ta 1 lựa chọn khác, chúng ta hoàn toàn có thể tùy chỉnh form theo ý mình.

bây giờ chúng ta bắt đầu làm như sau.

Để cho code của chúng ta được gọn gàng sạch đẹp, ta sẽ tách phần xử lý login form ra 1 file khác và gọi vào.

Bạn tạo 1 file chảng hạn như login-form.php.

Trong file login-form.php bạn copy đoạn code sau:

function SC_login_form ()
{
	SC_login();
		?>
	<a id="login-link" title="Login" href="#login">Clients Login</a></pre>
<div id="login-panel"><form id="login_form" action="" method="post">
 <label for="user_login">Username</label>
 <input onfocus="if (this.value == 'username') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'username'; }" type="text" name="username" value="username" />

 <label for="user_pass">Password</label>
 <input onfocus="if (this.value == 'password') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'password'; }" type="password" name="password" value="password" />

<label><input id="rememberme" tabindex="90" type="checkbox" name="rememberme" value="forever" />Remmember me?</label>

 <input id="client-login" type="submit" name="submit" value="Sign In" />
 <!--?php wp_nonce_field('submit', 'sclogin', false);?--> </form></div>
<pre>
<!-- /login-panel -->
		<!--?php } ?-->

Hàm trên có tác dụng gọi form vào. Đoạn html ở giữa là form html từ template.
Bạn tiếp tục thêm vào 2 hàm sau

function SC_check_user_logined(){
	if(!is_user_logged_in()){
		SC_login_form();
	}
	else{
		global $current_user;
      	get_currentuserinfo();
		?>
		<a id="login-link" title="User Info" href="#">User Info</a></pre>
<div id="login-panel">
Welcome back, <!--?php _e($current_user--->display_name); ?>

 <a style="color: #fff;" title="Logout" href="<?php echo wp_logout_url(home_url()); ?>">Logout</a>

 <small>Press ESC to close</small></div>
<pre>
		<!--?php <br ?-->	}
}

Hàm này có tác dụng kiểm tra xem User đã login chưa? Nếu đã login vào thì không hiện form login nữa mà hiện thông tin của user.
Trong hàm trên có các hàm của WP đáng chú ý là:
is_user_logged_in(), có tác dụng kiểm tra user đã login hay chưa, kết quả trả về TRUE / FALSE.

get_currentuserinfo(), lấy thông tin của user đang login.

Các bạn tìm hiểu thêm về 2 hàm này trong codex để hiểu hơn về cách sử dụng.

và cuối cùng là hàm xử lý tác vụ login.


function SC_login (){
if(wp_verify_nonce($_POST['sclogin'], 'submit'))
{
$username = $_POST['username'];
$password = $_POST['password'];
$loginInfo = array();
$loginInfo['user_login'] = $username;
$loginInfo['user_password'] = $password;
$loginInfo['remember'] = false;
$userLogin = wp_signon($loginInfo, false);
if(is_wp_error($userLogin)){
return $userLogin->get_error_message();
}
wp_redirect(home_url());
}
}

Hàm này chắc các bạn nhìn quen hen, tương tự như khi bạn xử lý code thuần. Bạn cần chú ý hàm sau:

wp_signon() , hàm này có nhiệm vụ xử lý thao tác login, kiểm tra các thông tin đăng nhập. Xem thêm trên codex.

Vậy là xong file login-form.php. Tại vị trí của form login ở template bạn gọi form này vào bằng code sau:

<!--?php if(function_exists("SC_check_user_logined")){          SC_check_user_logined();       }?-->

Vậy là xong, các bạn hãy khoan mừng, còn 1 bước quan trọng nữa là bạn phải include các hàm từ file login-form.php vào. các bạn vào file functions.php
include file login-form.php vào.

include (TEMPLATEPATH . '/includes/login-form.php' );

Vậy là xong phần Login Form.
Đến phần thông tin liên hệ gồm Số đt, fax, email. Các bạn làm tương tự như phần nick yahoo nha, hì hì, 2 cái này giống hệt nhau đó, lấy từ trong theme option.

Bạn sẽ có đoạn code sau:


<!--?php $listphone = get_option('contact_phone'); $phones = split(',',$listphone); if($phones){ foreach($phones as $phone) { ?-->

<!--?php     } } else { ?--></pre>
<ul>
	<li>(08) <strong>6292-1234</strong></li>
</ul>
<pre>

<!--?php }?-->

tương tự cho fax, email.

Chúng ta đến phần hiển thị ngẫu nhiên các sản phẩm.

Vẫn là dùng hàm get_posts(), nhưng thêm thông số để lấy query.

Bạn dùng đoạn code sau:


<!--?php $args = array( 'numberposts' =--> 5, 'orderby' => 'rand' );
$rand_posts = get_posts( $args );
foreach( $rand_posts as $post ) : ?></pre>
<div><a title="<?php the_title();?>">

<img title="<?php the_title();?>" src="<?php get_post_meta(get_the_id(), 'image',true);?>" alt="<?php the_title();?>" />

</a>
<h6></h6>
</div>
<pre>
<!--?php endforeach; ?-->

Vậy là bạn xong phần random product. Cũng là hoàn tất phần Sidebar Right. Chúng ta tạm dừng phần này tại đây. Ở phần tiếp theo chúng ta sẽ thực hiện phần nội dung ở giữa. Phải thành thật cáo lỗi là gần đây công việc dồn quá nên các bài viết ra hơi chậm, các bạn thông cảm nha.

Cảm ơn các bạn đã ghé thăm Blog mình. Nếu có gì thắc mắc về Series này các bạn cứ Comment, rất mong nhận được các góp ý từ các bạn.

và cuối cùng, như thuờng lệ là các file trong phần này.

login-form.php (mediafire)

sidebar-right.php (mediafire)