22. Sử dụng WordPress The Loop

Ở các bài trước thì tôi hay nhắc đến khái niệm là The Loop, thì trong bài hôm nay thì tôi & bạn sẽ cùng tìm hiểu chi tiết hơn về khái niệm này. Để hiểu rõ cốt lõi nội dung bài viết này thì bạn cần phải biết sử dụng Đối tượng WP_Query(), nếu quên hoặc chưa rành thì nên xem lại bài mà tôi vừa đề cập. Hôm nay tôi sẽ không hướng dẫn bạn viết plugin nửa mà chúng ta sẽ thao tác The Loop trong một themes của WordPress ,cụ thể tôi sẽ dùng themes Twenty ten để demo trực quan hơn so với các themes mặc định khác. Sau khi kết thúc bài Sử dụng WordPress The Loop thì bạn sẽ hiểu rõ hơn sức mạnh của về nó.

1/ WordPress The Loop là gì ?

The Loop dịch sang tiếng việt có nghĩa là vòng lặp và nó là một hành động được lặp đi lặp lại nhiều lần cho đến khi lặp ra hết dữ liệu thì mới ngưng, The Loop có chức năng tương đương với các hàm vòng lặp trong PHP như là while(), for…vv, Loop trong WordPress thường được đặt trong hàm while() của PHP, nó kết hợp với đối tượng WP_Query() để gọi và lấy ra các dữ liệu bài viết và đổ toàn bộ dữ liệu đó vào themes.

Và những đoạn code nằm trong The Loop, thì nước ngoài hay gọi là Template Tags, các phương thức bên trong sẽ có từng nhiệm vụ khác nhau như là hiển thị tiêu đề, đường dẫn, nội dung bài viết. Ở bài này thì tôi chỉ giới thiệu bạn một số phương thức thông dụng mà thôi, và tôi sẽ hướng dẫn kỹ hơn phần Template Tags khi chúng ta tìm hiểu vả sử dụng chuyên sâu đến nó.

Vậy câu hỏi đặt ra , The Loop được sử dụng khi nào và thường được xử lý trong các file nào. Do tôi cũng vừa mới tìm hiểu vấn đề này nên tôi cũng không hiểu được là nó hay được gọi sử dụng ở các file nào, nếu tôi có trình bày gì sai thì mong bạn thông cảm và góp ý để tôi hoàn thiện bài viết này hơn.

Nếu bạn sử dụng The Loop trong các file như là index.php, home.php, content.php…vv thì nó sẽ hiển thị danh sách các bài viết.

Còn ngược lại nếu The Loop được gọi và sử dụng ở các file như page.php, single.php thì nó sẽ hiển thị nội dung của bài viết đó, đây là cấu trúc themes do WordPress để ra, nên bạn cần phải tuân thủ theo quy tắc đó.

Phần tìm hiểu lý thuyết tới đây là chấm dứt, tôi nghĩ với nhiêu đó thì bạn cũng đã hình dung ra được The Loop sẽ thực thi các thao tác gì trong hệ thống WordPress rồi, sau đây tôi sẽ có một ví dụ nhỏ.

2/Lấy danh sách bài viết bằng The Loop

Lúc này bạn cần phải vào folder wp-content->themes->twentyten, lưu ý bạn cần phải install themes vào nhé,nếu bạn đang dùng bản WordPress mới nhất thì mặc định themes này sẽ không được cài vào.

Bạn truy cập vào trang admin, tìm đến menu Appearance->Themes, bạn nhập vào ô search là Twenty ten thì sẽ ra themes mà tôi dùng để demo trong bài viết, bạn click vào install và quay lại trang quản lý themes bạn active nó lên là được.

Đây là cấu trúc themes Twenty Ten:

cau-truc-themes-twenty-ten

Có rất nhiều file nhưng chúng ta chỉ cần quan tâm tới một file duy nhất là loop.php. File này đang thực hiện việc hiển thị danh sách các bài viết ở trang chủ. Không tin bạn copy nó để đề phòng bất trắc và sau đó quay lại xóa trắng file và ra trang chủ bấm F5 xem điều gì sẽ xảy ra.

Danh sách bài viết biến mất, nhưng đừng lo tí nửa tôi sẽ giúp bạn hiển thị lại toàn bộ danh sách đó theo một phong cách khác Css khác.

Lúc này tôi sẽ bắt đầu dùng The Loop để in tiêu đề các bài viết ra, trước tiên website của bạn cần phải có ít nhất là 12 bài viết bất kì nhé, đây là dữ liệu dùng để thao tác với The Loop.

In tiêu đề các bài viết bằng The Loop:

Đây là đoạn code mà tôi sử dụng thường xuyên ở các bài trước.

1 2 3 4 5 6 7 8 9

<?php if (have_posts()){ while(have_posts()){ the_post(); } } else { } ?>

Đoạn code này sẽ thực thi thao tác kiểm tra xem có bài viết tồn tại không, nếu có thì sẽ lấy danh sách toàn bộ bài viết, ngược lại thì sẽ có một câu thông báo lỗi gì đó.

Danh sách các bài viết là thuộc dạng list nên tôi sẽ sử dụng cặp thẻ <ul, <li và gán vào thẻ <ul một class để tí nửa trang trí css cho nó bắt mắt dễ nhìn hơn. Trước hết tôi sẽ liệt kê các phương thức mà Template Tags hỗ trợ bạn trong quá trình thiết kế themes.

Template Tags Method:

· the_ID(): Lấy ra ID của bài viết

· the_title(): Lấy ra tên tiêu đề bài viết

· the_permalink(): Lấy ra đường đẫn tới bài viết

· the_author(): Lấy ra tên tác giả của bài viết

· the_tags(): Lấy ra các danh sách tags

· the_category(): Lấy ra tên danh mục bài viết

· the_excerpt(): Lấy ra mô tả nội dung bài viết

· in_category(): Những bài viết trong một category nào đó.

Đây chính là các phương thức mà tôi sẽ lần lượt sử dụng trong ví dụ. Như bạn đã thấy thì bây giờ tôi sẽ in ra tiêu đề bài viết bằng phương thức the_title().

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?php if (have_posts()){ echo '<ul class="ks-loop">'; while(have_posts()){ the_post(); ?> <li> <h2><?php the_title(); ?></h2> </li> <?php } echo '</ul>'; } else { } ?>

F5 lại trang chủ và tôi nhận được kết quả.

content-the-loop

Vậy là chúng ta đã lấy ra được danh sách tiêu đề của bài viết rồi, tiếp theo sẽ lần lượt lấy ra ID, Author, Category, Tags, Excerpt (Nội dung ngắn), Time như sau.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<?php if (have_posts()){ echo '<ul class="ks-loop">'; while(have_posts()){ the_post(); // Toàn bộ phương thức của template_tags để in ra các giá trị của bài viết // the_title(): Lấy ra tên tiêu đề bài viết // the_ID(): Lấy ra ID của bài viết // the_permalink(): Lấy ra đường đẫn tới bài viết // the_author: Lấy ra tên tác giả của bài viết // the_tags: Lấy ra các tags // the_category: Lấy ra tên danh mục bài viết // the_excerpt: Lấy ra mô tả nội dung bài viết ?> <li> <h2><?php the_title(); ?></h2> <div>ID: <?php the_ID(); ?> - Time: <?php the_time(); ?></div> <div>Author: <?php the_author(); ?></div> <div><?php the_tags();?></div> <div>Category: <?php the_category(); ?></div> <div>Excerpt: <?php the_excerpt();?></div> </li> <?php } echo '</ul>'; } else { } ?>

Trong code tôi đã chú thích tường minh rõ ràng nên tôi sẽ không giải thích về tính năng của các phương thức này nửa. F5 lại trình duyệt và tôi có kết quả như mong muốn.

list-article-homepage

Tôi chỉ chụp được một phần nhỏ hình để minh họa, chứ lúc bạn thực hiện đoạn code trên thì sẽ in ra toàn bộ bài viết trong database ra ngoài trang chủ và hiển thị ở themes bạn đang sử dụng.

Lúc này tôi sẽ gắn link vào tiêu đề bằng phương thức the_permalink() mà tôi đã giới thiệu ở phía trên.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<?php if (have_posts()){ echo '<ul class="ks-loop">'; while(have_posts()){ the_post(); // Toàn bộ phương thức của template_tags để in ra các giá trị của bài viết // the_title(): Lấy ra tên tiêu đề bài viết // the_ID(): Lấy ra ID của bài viết // the_permalink(): Lấy ra đường đẫn tới bài viết // the_author: Lấy ra tên tác giả của bài viết // the_tags: Lấy ra các tags // the_category: Lấy ra tên danh mục bài viết // the_excerpt: Lấy ra mô tả nội dung bài viết ?> <li> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div>ID: <?php the_ID(); ?> - Time: <?php the_time(); ?></div> <div>Author: <?php the_author(); ?></div> <div><?php the_tags();?></div> <div>Category: <?php the_category(); ?></div> <div>Excerpt: <?php the_excerpt();?></div> </li> <?php } echo '</ul>'; } else { } ?>

Kế tiếp tôi sẽ định dạng CSS cho phần class ks-loop, đơn thuần chỉ là bọc mỗi bài viết trong một border và một số thuộc tính khác trong CSS căn bản mà thôi.

Lúc này nhìn hình ớ phía trên thì bạn thấy chỗ hiển thị tên category nó không nằm trên cùng một dòng với label (nhãn tên) của nó, để nó có thể nằm trên một dòng thì bạn truyền vào tham số đầu tiên là dấu nháy đơn và khoảng trắng cách ra.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<style> .ks-loop{ list-style-type: none; } .ks-loop li{ border:1px solid #ccc; padding:8px; margin-bottom:10px; } </style> <?php if (have_posts()){ echo '<ul class="ks-loop">'; while(have_posts()){ the_post(); // Toàn bộ phương thức của template_tags để in ra các giá trị của bài viết // the_title(): Lấy ra tên tiêu đề bài viết // the_ID(): Lấy ra ID của bài viết // the_permalink(): Lấy ra đường đẫn tới bài viết // the_author: Lấy ra tên tác giả của bài viết // the_tags: Lấy ra các tags // the_category: Lấy ra tên danh mục bài viết // the_excerpt: Lấy ra mô tả nội dung bài viết ?> <li> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div>ID: <?php the_ID(); ?> - Time: <?php the_time(); ?></div> <div>Author: <?php the_author(); ?></div> <div><?php the_tags();?></div> <div>Category: <?php the_category(' '); ?></div> <div>Excerpt: <?php the_excerpt();?></div> </li> <?php } echo '</ul>'; } else { } ?>

Kết quả đúng như sự kì vọng của tôi & bạn.

content-the-loop-with-css

Lúc này tôi sẽ giới thiệu đến bạn thêm một phương thức nửa, và chúng ta sẽ dùng nó để giải quyết bài toán mà tôi sắp đề ra. Như bạn đã thấy là tôi có 3-4 category và giờ tôi muốn bài viết nào thuộc chuyên mục Thể thao nó sẽ thay đổi màu nền là màu xanh. Wow thú vị quá phải không.

Phương thức mà tôi đang đề cập tới là phương thức in_category(), nó sẽ giúp bạn xác định các bài viết đang thuộc category nào thì sẽ thực thi các hành động ở phía sau.

Đầu tiên tôi sẽ khai báo thêm một class CSS nửa là class blue, class này sẽ được gán vào thẻ <li, tuy nhiên chúng ta sẽ sử dụng câu điều kiện if trong php để kiểm tra nếu các bài viết thuộc category là Thể thao thì mới thay đổi màu nền, category của tôi có ID là 2, nên bạn hãy linh hoạt thay đổi trong code của bạn cho phù hợp chứ đừng điền đại số 2 như tôi nha.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<style> .ks-loop{ list-style-type: none; } .ks-loop li{ border:1px solid #ccc; padding:8px; margin-bottom:10px; } .ks-loop .blue{ background: #41d7d8; } </style> <?php if (have_posts()){ echo '<ul class="ks-loop">'; while(have_posts()){ the_post(); // Toàn bộ phương thức của template_tags để in ra các giá trị của bài viết // the_title(): Lấy ra tên tiêu đề bài viết // the_ID(): Lấy ra ID của bài viết // the_permalink(): Lấy ra đường đẫn tới bài viết // the_author: Lấy ra tên tác giả của bài viết // the_tags: Lấy ra các tags // the_category: Lấy ra tên danh mục bài viết // the_excerpt: Lấy ra mô tả nội dung bài viết // in_category: Những bài viết trong một category nào đó. // Không gán cho nó rỗng thì sẽ báo lỗi $css= ''; if (in_category('2')){ $css = 'class="blue"'; } ?> <li <?php echo $css; ?>> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div>ID: <?php the_ID(); ?> - Time: <?php the_time(); ?></div> <div>Author: <?php the_author(); ?></div> <div><?php the_tags();?></div> <div>Category: <?php the_category(' '); ?></div> <div>Excerpt: <?php the_excerpt();?></div> </li> <?php } echo '</ul>'; } else { } ?>

F5 lại trang chủ để xem điều gì xảy ra, thành công hay thất bại.

change-background-content-css-the-loop

Như vậy, bài viết thuộc các category khác vẫn giữ nguyên màu nền cũ, chỉ duy nhất các bài viết thuộc category Thể thao là có thay đổi màu nền. Vậy là tôi & bạn vừa tìm hiểu xong phần The Loop một cách nhanh chóng và dễ dàng, bạn thấy có khó không ? chỉ cần biết các phương thức hỗ trợ tính năng gì thì chúng ta sẽ control nó rất là nhanh.

2/ Lời kết

Thông qua một ví dụ nhỏ cũng như giới thiệu đến bạn các phương thức bên trong Template Tags, kết hợp với The Loop để lấy ra các dữ liệu bải viết , đổ vào trang chủ của themes. Tuy nhiên đừng qua vội mừng vì vấn đề không đơn giản là dừng lại ở đây, mà nó còn phát sinh khá nhiều vấn đề khác mà tôi không thể nào trình bày hết. Vì vậy nội dung trong bài Sử dụng WordPress The Looprất là quan trọng và hữu dụng bạn đừng thấy nó đơn giản mà không xem bài kỹ nhé, nó sẽ được áp dụng nhiều trong quá trình thiết kế themes.

Series Navigation<< Hướng dẫn sử dụng WordPress Transient APISử dụng WordPress Shortcode API >>

Nguồn: laptrinhweb.org