[Theme Development] Phần 11: Khởi tạo theme WordPress – phần 2
Tiếp phần làm file header.php ở phần 10, bây giờ chúng ta sẽ tiến hành làm tiếp file footer.phpcùng file index.php, nhưng trước hết phải là file footer.php trước. Vì sao lại là footer.php mà không phải index.php hay các file khác?
Bởi vì footer.php và header.php có mối tương quan mật thiết với nhau ở các thẻ đóng, như bạn thấy ở file header.php chúng ta kết thúc file bằng đoạn <div class="content"> chưa có thẻ đóng và đoạn <div id="wrapper"> cũng chưa có thẻ đóng luôn. Nên trước mắt, chúng ta phải có 2 thẻ đóng này ở file footer.php cái đã rồi làm gì thì làm.
Viết code file footer.php
Đầu tiên bạn mở file index.php ra và viết thêm đoạn này vào dưới file.
1 | <?php get_footer(); |
Đoạn trên mục đích của nó cũng dễ hiểu, đó là gọi file footer.php để nối vào file index.php. Như vậy, kết hợp với bài phần 10 ta có một file index.php như sau:
1 2 3 4 5 6 7 | <?php get_header();?><!--Chúng ta sẽ viết code vào khu vực này--><?php get_footer(); |
Sau đó mở file index.html và copy từ </div><!--end .content--> đến cuối file bỏ vào filefooter.php.
Lúc này ta sẽ không cần đến mấy cái đoạn chèn jquery và javascript nữa mà ta sẽ làm nó ở filefunctions.php nên bạn hãy xoá đi đoạn này nhé.
1 2 3 4 5 6 7 8 | <!--Chèn jQuery--><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script><script type="text/javascript">// <![CDATA[window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')// ]]></script> <!--End jQuery--> <!--Chèn custom javascript--><script type="text/javascript" src="js/main.js"></script> |
Và cuối cùng là chèn đoạn này vào file functions.php để thay thế file jquery mặc định trong WordPress thành file jQuery của Google CDN nhằm tiết kiệm băng thông, kèm theo đó là chèn filemain.js vào theme.
01 02 03 04 05 06 07 08 09 10 11 12 13 | //Insert jQuery from Google Libraries if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11); function my_jquery_enqueue() { wp_deregister_script('jquery'); wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null); wp_enqueue_script('jquery'); } //Insert main.js function main_javascript() {wp_enqueue_script( 'mainjs', get_stylesheet_directory_uri() . '/js/main.js', array('jquery') ); } add_action( 'wp_enqueue_scripts', 'main_javascript' ); |
F5 xem thử nào, có phải bây giờ ta có kết quả như trong hình? Nếu bạn muốn ảnh ở footer hiển thị thì tạm thời copy thư mục /img bên phần HTML sang thư mục WordPress (nằm ngang hàng với filewp-config.php).
Viết code cho file index.php
Tiếp tục bây giờ ta sẽ làm tới phần hiển thị bài viết mới ra trang chủ như dự định, bây giờ hãy mở file index.html lên và copy từ dòng 70 đến dòng 145 rồi paste vào phần mà mình đã comment trong file index.php, nghĩa là nằm giữa get_header() và get_footer().
Kết quả là ta sẽ được một khung nội dung bên trái y hệt index.html. Nhiệm vụ của bạn bây giờ làthay thế các nội dung HTML thành các hàm PHP của WordPress để nó hiển thị nội dung trong WordPress thay vì nội dung tĩnh.
Trước hết là phần 2 bài viết mới nhất, trong code mình đã có ghi comment rõ ràng là </div><!--end .post-->, bạn thấy chứ? Bây giờ chúng ta sẽ bỏ bớt một cái .post đó đi. Cụ thể là bạn tìm và xoá bớt đoạn như thế này.
Nếu bạn có thắc mắc vì sao chúng ta lại xoá đi thì mình xin giải thích ngắn gọn là chút nữa chúng ta sẽ thay thế bài post còn lại thành một vòng lặp (Loop). Đã gọi là vòng lặp thì nó sẽ thực thi đi thực thi lại nhiều lần theo số lần chỉ định, và số lần mà mình nói ở đây là số bài viết mà bạn chỉnh trong Settings -> Reading. Như vậy, ta chỉ cần đặt loop ở bài post đó và nó sẽ tự động nhân lên nhiều bài khác có chung một cấu trúc mà khác nội dung.
Viết Loop cho WordPress
Bây giờ bạn mở file index.php ra và tìm đoạn giống thế này
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | <div class="post"> <div class="post-thumbnail"> <img src="img/post_thumb.jpg" alt="Post 1"> </div> <div class="post-info"> <h3>10 phần mềm quản lý thời gian tốt nhất</h3> <div class="post-meta"> Đăng bởi <a href="#">Thạch Phạm</a> trong mục <a href="#">SEO</a> </div> <div class="post-exceprt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi sapiente ullam at? Porro, suscipit, recusandae a labore placeat sed soluta fugit velit omnis possimus necessitatibus dolores error aspernatur voluptates. </div> <div class="post-below"> <div class="facebook">Facebook</div> <div class="googleplus">Google+</div> <div class="more"> <a href="#">Đọc tiếp</a> </div> </div> </div><!--end .post-info--></div><!--end .post--> |
Đó là một đoạn hiển thị một bài viết tại trang chủ dưới dạng tĩnh. Bây giờ chúng ta sẽ viết nó thành một loop để nó có thể hiển thị nhiều bài viết khác nhau và sử dụng chung một cấu trúc y chang thế này, chỉ khác nội dung.
Đầu tiên bạn hãy viết đoạn mở đầu một loop ngay bên trên code đó.
1 2 | <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post();?> |
2 câu lệnh này quá dễ hiểu đúng không. Cái hàm have_post() là mặc định nó sẽ kiểm tra biến$post (một biến toàn cục trong WordPress) đã có dữ liệu hay chưa, nếu có rồi thì nó sẽ tự động truyền vào hàm the_post() để tiến hành loop ra ngoài.
Đã có lệnh if và while thì chắc chắn phải có lệnh đóng để nó kết thúc phiên làm việc đúng không nào? Do chúng ta chỉ muốn nó loop cái .post thôi nên dĩ nhiên ta sẽ chèn lệnh kết thúc ngay bên dưới </div><!--end .post-->.
1 | <?php endwhile; //End Loop ?> |
Giờ bạn thử save lại và vô lại trang chủ xem điều gì xảy ra là biết liền, các bài đã được lặp lại tương ứng với số lần bạn tuỳ chỉnh.
Và bây giờ chúng ta sẽ đổi lại các nội dung tĩnh nằm bên trong loop thành nội dung động bằng PHP hết. Cụ thể sẽ là các hàm sau đây, những hàm này chỉ hoạt động khi bạn đặt trong Loop:
- post_class(): In tất cả các class liên quan đến bài viết vào bài, rất tiện để bạn muốn custom sau này.
- the_permalink(): In đường dẫn của bài viết.
- the_title(): In tiêu đề của bài viết.
- the_post_thumbnail(‘medium’): In ảnh featured image của bài với size là Medium. Cái size này bạn có thể chỉnh trong Settings -> Media.
- the_category( ‘,’ ): Đoạn in các category của bài viết, cách nhau bằng dấu phẩy.
- the_author(): In tên tác giả của bài viết.
- the_author_link(): In link dẫn tới trang tác giả.
- the_excerpt(): In một phần nội dung của bài viết hoặc nội dung trong phần Excerpt của bài viết.
Đó là các hàm mà mình sẽ sử dụng trong đoạn code trên để thay thế, còn rất nhiều hàm nữa mà bạn có thể tham khảo tại WordPress Template Tags.
Các bạn có thể thay thế các nội dung tĩnh và thế các hàm PHP tương ứng ở trên vào, đây là mẫu làm của mình.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?php if (have_posts()): ?> <?php while (have_posts()) : the_post();?> <div <?php post_class() ?>> <div class="post-thumbnail"> <?php if (has_post_thumbnail()) { the_post_thumbnail('medium'); } else { echo '<img src="http://placehold.it/217x210">'; } ?> </div> <div class="post-info"> <h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3> <div class="post-meta"> Đăng bởi <a href="<?php the_author_link();?>"><?php the_author();?></a> trong mục <?php the_category(', '); ?> </div> <div class="post-exceprt"> <?php the_excerpt();?> </div> <div class="post-below"> <div class="facebook">Facebook</div> <div class="googleplus">Google+</div> <div class="more"> <a href="<?php the_permalink();?>">Đọc tiếp</a> </div> </div> </div><!--end .post-info--> </div><!--end .post--> |
Còn cái phần trang <div class="pagination"> thì ở đây chúng ta sẽ dùng plugin WP-PageNavi cho gọn lẹ. Hãy cài plugin này vào và thay thế đoạn chữ Trang 1 2 3 4 5 thành hàm như hình
Kết quả ta có…
Viết loop lấy bài theo chuyên mục
Ngay bên dưới phần danh sách bài mới sẽ có khung lấy bài viết lấy bài ra trong từng chuyên mục. Nhìn 2 cột chúng ta lầm tưởng là có 2 loop nhưng thật ra là 4 loop mới đúng, vì mỗi khung ta sẽ có 2 loop: một là lấy một bài mới nhất trong chuyên mục bao gồm thumbnail, loop thứ 2 là sẽ lấy 4 bài viết tiếp theo và ở loop đó ta không cần thumbnail.
Nhìn sơ qua thì chúng ta có thể viết loop gần giống như bên trên, nhưng có điều sẽ khác rất nhiều mà mình sẽ giải thích sau. Bây giờ bạn hãy thay đoạn code này..
01 02 03 04 05 06 07 08 09 10 11 12 13 | <div class="cat-1"> <h3>Thủ thuật WordPress</h3> <div class="post-info"> <img src="img/post_thumb_cat.jpg" alt="Post 1"> <h4>Giveaway 10 phần ThemeFuse</h4> <ul class="child"> <li><a href="#">Hướng dẫn thiết kế theme WordPress</a></li> <li><a href="#">Cách tự làm widget trong WordPress</a></li> <li><a href="#">Serie học WordPress từ A tới Z</a></li> <li><a href="#">Cách chọn host để cài WordPress</a></li> </ul> </div></div><!--end cat--> |
thành…
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | <div class="cat-1"> <h3>Thủ thuật WordPress</h3> <?php $query = new WP_Query('cat=49&posts_per_page=1'); if ( $query->have_posts() ) { while ( $query->have_posts() ) : $query->the_post(); ?> <div class="post-info"> <?php if (has_post_thumbnail()) { the_post_thumbnail('medium'); } else { echo '<img src="http://placehold.it/217x210">'; } ?> <h4><?php the_title();?></h4> <?php endwhile; } ?> <ul class="child"> <?php $query = new WP_Query( 'cat=49&posts_per_page=4&offset=1' ); while ( $query->have_posts() ) : $query->the_post();?> <li><a href="<?php the_permalink();?>"><?php the_title();?></a></li> <?php endwhile; endif; ?> </ul> </div></div><!--end cat--> |
2 mục mà mình bôi đậm nghĩa là 2 cái loop.
Ngay tại loop thứ nhất, mình có 2 tham số đó là:
cat=49: Lấy các bài viết trong category mang ID số 49. Để biết được ID, bạn vào Posts -> Categories -> chọn Edit category cần xem ID và nhìn lên trình duyệt bạn sẽ thấy action=edit&taxonomy=category&tag_ID=4&post_type=post. Số in đậm chính là ID.posts_per_page=1: Số lượng bài viết hiện ra mỗi trang, do ở đây mình không sử dụng pagination nên bạn có thể hiểu tham số này nghĩa là số lượng bài viết cần hiển thị ra.
Ngay tại loop thứ hai, mình có thêm 1 tham số lạ tên là offset=1. Nghĩa là nó sẽ bỏ qua một bài mới nhất, vì mình đã lấy bài mới nhất tại loop đầu tiên rồi.
Tương tự, bạn thay luôn code của cái khung category còn lại, nhớ thay đổi cái tên category trong thẻ h3 cho phù hợp nhé.
Kết quả bây giờ ta tạm có
Bây giờ nếu bạn muốn thì có thể viết thêm CSS vào file style.css (cho dễ quản lý) để cho đẹp hơn theo ý của mình nhé. Mình xin tạm kết phần 11 ngay tại đây để tới phần 12 chúng ta sẽ đi qua phần tạo sidebar với các khái niệm mới hơn.
Cuối bài, mình xin nhắc lại nội dung mà chúng ta cần lưu ý trong bài này như sau:
- Sử dụng hàm get_header(), get_footer() để nối phần header và footer của website lại với nhau.
- Sử dụng hàm wp_enqueue_script() để nhúng file Javascript vào theme an toàn hơn.
- Sử dụng loop có sẵn để lấy các bài viết mới nhất ra trang chủ.
- Tạo loop mới với hàm WP_Query() để tạo loop mới dể lấy bài viết ra theo ý thích.
Cũng cần lưu ý thêm, Loop trong WordPress khá quan trọng vì chúng ta sẽ cần sử dụng nó trong suốt quãng thời gian lập trình theme, kể cả plugin nhằm lấy bài viết từ database để hiển thị ra đúng cách. Loop trong WordPress có rất nhiều cách dùng bao gồm nhiều hàm khác nhau như WP_Query, get_posts, query_posts,….Nên bạn hãy chú ý đọc kỹ documentation ở WordPress Codex để biết cách dùng chính xác từng hàm.
Toàn bộ code trong phần 10:
Category: lập trình wordpress, WordPress
0 comments