Thiết kế theme cho WordPress Step By Step -Phần 6

Chào các bạn, chúng ta đã đi đến phần 6 của series huớng dẫn code theme cho wordpress. Hiện nay chúng ta coi như đã đi được 2/3 chặng đường rồi, theme của chúng ta đã được định hình và các bạn có thể đã quen thuộc với 1 số hàm quan trọng của wordpress, từ phần này chúng ta sẽ tiếp tục vận dụng lại các hàm đó để hoàn tất theme của chúng ta.

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 5: Thực hiện các trang Front-end (sidebar)

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

Ở phần này chúng ta sẽ thực hiện phần Nội dung (Content) ở giữa trang với các nội dung chính sau:

- Hiển thị nội dung tại trang chủ.

- Hiển thị danh sách sản phẩm theo danh mục (Category).

- Hiển thị nội dung kết quả search.

- Hiển thị nội dung trang archive.

- Hiển thị nội dung trang single (chi tiết tin).

TRANG CHỦ

Trước khi bắt đầu các bạn nên nhập liệu vài sản phẩm với bài viết mẫu để tiện cho viết xuất dữ liệu.

Tất nhiên chúng ta sẽ bắt đầu từ file index.php, như các bạn đã biết từ phần trước, nội dung của trang chủ chúng ta sẽ được gọi từ file content-home.php thông qua hàm.

<?php get_template_part("content","home"); // Get Loop ?>

Giờ hãy mở file content-home.php lên, chúng ta sẽ xử lý nó.
Ở trang chủ chúng ta hiển thị 2 nội dung chính là:
- Danh sách sản phẩm mới nhất (9 sản phẩm).
- Các tin tức mới nhất(3-5 tin).
Để lấy danh sách các sản phẩm ta sẽ cần 1 mảng chứa các sản phẩm và dùng 1 vòng lặp để hiển thị ra.

 <?php $args=array(
              'posts_ per_page'	=>15,
	      'post_type'	=> 'san-pham'
	);
	$products = new WP_Query($args);
?>

Ở đoạn code trên ta sẽ lấy được mảng $product chứa danh sách các sản phẩm có post-type là san-pham mà chúng ta đã tạo ở phần trước.
Có mảng rồi ta sẽ dùng vòng lặp (loop) để hiển thị danh sách sản phẩm, ta dùng hàm while.

<?php
if($products->have_posts()){
	while($products->have_posts()){
		$products->the_post();
		?></pre>
<div class="product">
<div class="picture">
<a title="SAMSUNG GALAXY TAB P1000" href="#"><img class="image" src="<?php bloginfo('template_url');?>/images/apple-imac-pc-mc511zp.jpg" alt="SAMSUNG GALAXY TAB P1000" /></a>
</div>
<h3 class="product_name"><a title="">SAMSUNG GALAXY TAB P1000</a></h3>
<h4 class="price">$1000</h4>
</div>
 <?php }?>

Vòng lặp đã xong, ta sẽ bổ sung các nội dung động. Ta được như sau

<div class="inside">
<?php $args=array(
            'posts_ per_page'	=>15,
            'post_type'         => 'product'
 );
 $products = new WP_Query($args);
 if($products->have_posts()){
 while($products->have_posts()){
 $products->the_post();
 ?>
<div class="product">
<div class="picture"><a title="<?php the_title();?>" href="<?php the_permalink();?>">
 <img src="<?php echo get_post_meta(get_the_id(), 'image',true); ?>" alt="<?php the_title();?>" />
 </a></div>
<h3 class="product_name"></h3>
</div>
 <?php }
}?>
</div>
<!-- end of inside -->

Vậy là ta đã xong phần sản phẩm. Ta sẽ hiển thị các tin mới nhất, cũng làm tương tự như phần hiển thị sản phẩm, ta sẽ được code sau.

<h2 class="title">News</h2>
<div class="post"><?php
/** get thumbnail images of this post 	*/
$image_args = array(
              'post_type' => 'attachment',
              'numberposts' => 1,
              'post_status' => null,
              'post_parent' => $post->ID,
              'orderby'=> 'post_date',
              'order'=>'DESC'
);
$attachments = get_posts($image_args);
if ($attachments) {
foreach ( $attachments as $attachment ) {
$image = wp_get_attachment_image_src( $attachment->ID ); // returns an array ?>
<a title="<?php the_title();?>" href="<?php the_permalink();?>"> <img class="image" src="<?php echo $image[0] ?>" alt="<?php the_title();?>" /> </a>
<?php 	} } ?><!-- end get thumbnail -->
<h2></h2>
<?php the_excerpt();?>
</div>
&nbsp;
 <?php endwhile;
endif;?>

Đối với tin tức ta không có tạo custom field là ảnh đại diện nên ta sẽ lấy ảnh đầu tiên trong bài viết để làm ảnh đại diện. Các hàm lấy nội dung của post các bạn tìm hiểu thêm trên codex. Vậy là đã xong phần hiển thị ở trang chủ.

CATEGORY

Phần này chúng ta sẽ xử file category.php , trong hệ thống wordpress khi ta click vào link của 1 category thì chúng ta sẽ được dẫn đến file category.php để tiếp nhận request. Lúc này file category.php sẽ tương tự như file index.phpTa sẽ có đoạn code sau

<?php get_header();?>
<!-- end of main -->
<?php get_footer();?>

Bạn chỉ cần thay đổi file nội dung ở giữa bằng việc đổi các đối số trong hàm get_template_part(). Lúc này file content-category.php sẽ được gọi vào để hiển thị nội dung của trang. Copy đoạn code sau vào file content-category.php.

<div class="head_title">
<h2 class="title">Product Information</h2>
</div>
<div class="inside">
<?php
if(have_posts()){
   while(have_posts())
{ the_post(); ?>
<div class="product">
<div class="picture">
<a title="<?php the_title();?>" href="<?php the_permalink();?>">
 <img src="<?php echo get_post_meta(get_the_id(), 'image',true); ?>" alt="<?php the_title();?>" />
 </a></div>
<h3 class="product_name"></h3>
</div>
 <?php } }
else{
echo "Nothing"; }?></div>
<!-- end of inside -->

Trong đoạn code trên, bạn dùng 1 vòng lặp để liệt kê các sản phẩm có trong category. Hàm have_posts() là 1 hàm rất hay của wordpress, nó sẽ tự động nhận dạng request và sẽ trả về kết quả thông qua action hook the_post(). Bạn nên tìm hiểu thêm về các hàm này trên codex: have_posts() , the_loop (tìm hiểu về vòng lặp trong wordpress), the_post(). Vậy là xong phần category. Chúng ta sẽ làm trang hiển thị kết quả search (search.php). Tại trang này chúng ta cần phải hiển thị danh sách các sản phảm phù hợp với tìm kiếm, và kèm theo đó là 1 câu thông báo hiển thị số kết quả phù hợp với tìm kiếm. Cũng tương tự như trang category, khi có request từ form search thì file search.php sẽ được gọi để làm nhiệm vụ tiếp nhận request và hiển thị kết quả. Nội dung của file search.phpchúng ta như sau:

<?php get_header();?></pre>
<div id="main">
<div id="content">
<div class="head_title">
<h2 class="title">Product Information</h2>
</div>
<div class="inside">
<?php
if(have_posts()){
while(have_posts()){
the_post();
?>
<div class="product">
<div class="picture"><a title="<?php the_title();?>" href="<?php the_permalink();?>">
 <img src="<?php echo get_post_meta(get_the_id(), 'image',true); ?>" alt="<?php the_title();?>" />
 </a></div>
<h3 class="product_name"></h3>
</div>
 <?php } }
else{ 	echo "Nothing"; }?>
</div>
 <!-- end of inside --></div>
 <!-- end of content --></div>
<!-- end of main -->
<?php get_footer();?>

Nhìn đoạn code trên chắc bạn thấy sao mà giống với category quá vậy ^^? Vậy nó search chỗ nào? Huyền bí chưa? Hì Hì.
Thực ra nếu bạn để ý trên đường link, sau khi bạn nhấn nút earch đã được thêm 1 tham số là ?s=, thì wordpress đã lọc lại request và trả về kết quả phù hợp, tiện lợi vô cùng ^^.
Để hiển thị số kết quả tìm được và từ khóa mà bạn tìm, bạn dùng code sau

<?php 	$mySearch =& new WP_Query("s=$s & showposts=-1");
$num = $mySearch--->post_count;
	echo $num.' search results for '; the_search_query();
?> in <?php  get_num_queries(); ?> <?php timer_stop(1); ?> seconds.

Đặt vào chỗ muốn hiển thị.
Và bạn có thể đặt 1 lệnh else cho trường hợp không tìm được kết quả phù hợp. Xong phần Search rồi ^^. Quá dễ dàng đúng không?
Trang Archive cũng sẽ tương tự như như trên, các bạn thử làm xem sao, vận dụng những hàm nãy giờ thôi. hì hì.
Mình sẽ làm trang hiển thị chi tiết (single.php).
Trang này có nội dung là chi tiết của 1 tin tức hoặc của 1 sản phẩm, vì vậy ta sẽ có 2 trường hợp khác nhau trong trang single này. Tại trang single.php ta dùng code sau.

<?php
### show post if(get_post_type()=='post'){
   get_template_part('single','post');
}
### show product details
elseif(get_post_type()=='san-pham'){
   get_template_part('single','product');
} else  {
   get_template_part('single','post');
} ?>

Đoạn code sẽ xác định post_type để gọi file hiển thị phù hợp. Ta sẽ tạo thêm 2 file là single-post.php và single-product.php, mỗi trang sẽ có giao diện hiển thị khác nhau.

Copy đoạn code sau vào file single-post.php.

<?php get_header();?>
<!-- end header -->
<div id="page"><!-- content -->
<div id="main"><?php get_sidebar('left')?>
<!-- end sidebar_left -->
<div id="content">
<div class="news_session" style="width: 100%;">
<?php if(have_posts()){
the_post();?>
<h2 style="font-size: 18px; text-align: center; width: 100%;"></h2>
 <span>Posted by</span>

 <?php
$tags=wp_get_post_categories(get_the_ID())
if(!empty($tags)){
$tag = $tags[0];
$args=array(
"post__not_in" => array(get_the_ID()),
"posts_ per_page"=>5,
"cat" =>$tag,
);
 $relatePosts = new WP_Query($args);
 if($relatePosts->have_posts()){
 echo "<strong>Related Posts</strong>";
 while($relatePosts->have_posts()){
 $relatePosts->the_post();
?>
 <?php
} } } }
?>
</div>
</div>
<!-- end content -->
 <?php get_sidebar('right')?>
 <!-- end sidebar_right -->
</div>
 <!-- end #content --></div>
<pre>
<!-- end #page -->
<?php get_footer();?>

File single-product.php sẽ tương tự như vậy, bạn chỉ cần thiết kế, bố trí lại việc hiển thị cho phù hợp với chi tiết sản phẩm. Xem như đây là 1 bài tập nho nhỏ để các bạn làm cho quen tay nhen. Hì hì.

Khi các bạn hoàn tất các phần trong bài này thì hiện giờ các bạn có thể xem như là mình đã có 1 website tương đối hoàn chỉnh với đầy đủ các trang cần thiết. Phần này tương đối dài, các hàm tuy không khó nhưng rất quan trọng và bạn sẽ phải sử dụng rất nhiều để có thể sử dụng nhuần nhuyễn. Và chúng ta kết thúc Phần 6 tại đây.
Tại phần cuối của Series này chúng ta sẽ tối ưu website hơn với một số điều chỉnh nhỏ.

Đây cũng là bài viết đầu tiên của năm 2012. Mình xin chúc các bạn độc giả 1 năm mới thật thành công và dồi dào sức khỏe. HAPPY NEW YEAR !!!