- Back to Home »
- lập trình , thiết kế theme wordpress »
- Thiết kế theme Wordpress bài 6: sử dụng vòng lặp (loop)
Posted by : admin
06 tháng 1, 2014
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 get_header();?>Trước tiên chúng ta thay
<div id="content">Content</div>
<?php get_sidebar(); ?><?php get_footer(); ?>
bằng một đoạn code PHP như sau:<div id=
"content"
>Content</div>
<div id="content">Giải thích đoạn code này như thế này:
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?><?php endif; ?>
</div>
- 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.
- 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ó).
- 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ể.
- 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.
Trong vòng lặp while chúng ta sẽ bổ sung đoạn code như sau:
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:<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>
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ó:
<?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
; ?>
- the_permalink(): lấy đường dẫn chính xác đến vài viết.
- the_title(): lấy tiêu đề bài viết.
- 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.
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ơ