Thiết kế theme WP – phần 6: sử dụng vòng lặp (loop)

Phải thú thật là hôm nay có hơi mệt nên có thể không còn tỉnh táo để viết cho các bạn nhưng biết các bạn chờ tutorial tiếp theo cũng lâu nên đành cố gắng viết tiếp. Trong phần này, chúng ta sẽ tiếp tục học cách xây dựng giao diện WordPress với phần trình bày trang chủ bằng cách dùng vòng lặp (loop) để lấy các tin cần thiết. Trước tiên chúng ta đọc lại phần 5 để biết công việc đang ở đâu nhé.

Vậy là ở phần trước chúng ta đã import thành công giao diện được thiết kế bằng photoshop(hoặc cái gì đại loại thế không quan trọng, quan trọng là sau cùng 1 template bằng HTML). Tiếp theo chúng ta sẽ trình bày trang chủ. Bạn hãy mở template file index.php mà chúng ta đã có ra:
[php] <?php

/**
* The main template file.
*
*/

get_header();
?>
<div id="content">Content</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]

Trước tiên chúng ta thay

[php] <div id="content">Content</div>
[/php]

bằng một đoạn code PHP như sau:

[php] <div id="content">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>
</div>
[/php] Giải thích đoạn code này như thế này:

1. Quá trình gọi file index.php, hệ thống WordPress đã chuẩn bị dữ liệu sẵn trước khi show ra giao diện. Hàm have_posts() sẽ kiểm tra xem dữ liệu đã sẵn sàng hay chưa. Nếu dữ liệu đã được lấy ra(lấy cách nào chúng ta tạm thời chưa cần quan tâm), hàm này sẽ trả về true và đoạn code phía trong sẽ hoạt động. Ngược lại sẽ không làm gì cả. Bạn cũng có thể bổ sung else nếu muốn show 1 thông tin nào đó nếu không có dữ liệu.
2. Nếu kiện có bài viết được thỏa mãn, vòng lặp while phía trong sẽ được kích hoạt và vòng lặp này sẽ chạy từ đầu cho đến cuối danh sách (nghĩa là sẽ duyệt qua từng bài viết mà nó có).
3. Hàm the_post() là hàm sẽ chịu trách nhiệm lấy ra từng bài viết cụ thể.
4. endwhile dùng để thông báo rằng vòng lặp sẽ chạy từ đoạn bắt đầu while đến endwhile và những đoạn mã phía sau sẽ không thuộc vòng lặp, không được lặp lại như những thành phần phía trong vòng while này.

Được rồi ! Giờ nhiệm vụ của chúng ta là lấy ra cái chúng ta cần.

Trong vòng lặp while chúng ta sẽ bổ sung đoạn code như sau:

[php] <div class="row">
<div class="row">
<h4><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo the_title(); ?></a></h4>
<?php echo the_excerpt(); ?>
</div>
</div>
[/php]

Bạn chú ý là đoạn code này phải nằm sau while và trước endwhile nhé. Đại loại nó sẽ thế này:

[php] <?php while(have_posts()) : the_post(); ?>
<div class="row">
<div class="row">
<h4><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo the_title(); ?></a></h4>
<?php echo the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
[/php]

Trong vòng lặp, những phần tử của mảng được đưa vào lần lượt và chúng ta sử dụng một số hàm được WordPress xây dựng sẵn để lấy dữ liệu. Chúng ta có:

1. the_permalink(): lấy đường dẫn chính xác đến vài viết.
2. the_title(): lấy tiêu đề bài viết.
3. the_excerpt(): lấy một đoạn trong bài viết để làm phần mô tả bài. Ngoài the_excerpt(), bạn có thể sử dụng the_content() để lấy nội dung đều được.

Trong các giải thích trên mình đều có gắn liên kết đến phần document của từng hàm để các bạn tìm hiểu thêm cách sử dụng chúng. Nếu có thời gian các bạn nên xem nhé, nhất là điểm khác nhau khi sử dụng the_excerpt() và the_content().

Kết quả:

Bạn thấy đấy, tuy chưa hoàn chỉnh nhưng đó là những gì một theme wordpress show ra ở trang chủ. Bạn chỉ cần tùy chỉnh 1 tí cho CSS nữa là sẽ đẹp như mơ :)