WordPress Nâng Cao

Cấu trúc Template và Template Tag trong WordPress

Để hiểu được các phần sau trong serie bài viết serie lập trình WordPress nâng cao, WpGuide sẽ giúp các bạn hiểu cấu trúc template và template tag trong một theme WordPress và các hàm chức năng trong đó (còn gọi là template tag).

Template và Template tag là gì?

Template trong WordPress là một tập tin giúp hiển thị các dữ liệu theo một khuôn mẫu có sẵn (định dạng kiểu hiển thị cho dữ liệu trên website). Với WordPress bạn có thể tùy chỉnh Template hiển thị trang chủ (index.php), bài viết (single.php), lưu trữ (archive.php), … tất cả những template này sẽ tạo ra một Theme (chủ đề).

Template tag thực tế là những hàm (function) có sẵn của WordPress giúp bạn trong quá trình viết Template cho theme. Nếu bạn có kiến thức về PHP thì việc này sẽ đơn giản hơn rất nhiều, cuối bài viết này mình có liệt kê những Template tag quan trọng thường dùng để bạn tham khảo.

Template và Template tag hoạt động như thế nào?

Với Template bạn chỉ cần nắm rõ cấu trúc template của WordPress để đặt tên cho đúng mà thôi. Ví dụ để có một template hiển thị nội dung bài viết bạn cần tạo template single.php, bạn không tạo thì mặc định nội dung bài viết sẽ hiển thị theo kiểu mà WordPress định dạng sẵn. Sau khi bạn tạo template single.php thì mọi nội dung trong bài viết của bạn sẽ hiển thị theo cách bạn định dạng trong template này.

Còn về Template tag thì bạn cần nhớ được các template tag dùng được cho template đang dùng, tùy theo dữ liệu được lấy ra như thế nào thì template tag sẽ trả về những giá trị khác nhau. Ví dụ một đoạn code bạn thấy trong template single.php:

<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

Với đoạn code này, mỗi bài viết của bạn sẽ hiển thị khác nhau, ví dụ với bài viết này của WpGuide đoạn code khi hiển thj ra sẽ là:

<h1 class="entry-title">Cấu trúc Template và Template Tag trong WordPress</h1>

Như vậy việc tùy biến theme bây giờ chỉ đơn thuần là việc bạn sắp xếp và thiết kế lại vị trí các Template tag mà thôi. Rất đơn giản phải không nào.

Cấu trúc Template cơ bản của một Theme

cau-truc-template-twentysixteen

Template chỉ là các file có dạng *.php thôi, các thư mục đều có mục đích là giúp quản lý các file có hệ thống hơn.

Sau đây hãy cùng WpGuide tìm hiểu chi tiết chức năng của các template cơ bản nhé:

1. style.css

Có thể nói đây là một file quan trọng trong Theme, không phải style.css quan trọng vì nó chứa các câu lệnh CSS của website (bạn có thể viết CSS ở phần header mà :D) mà nó chưa những thông tin cơ bản cho theme như Theme Name, Author, Version, … (cái mà sẽ hiển thị trong phần Appearance > Themes). Nếu theme của bạn không có những thông tin này thì nó coi như không hợp lệ.

Và đây là ví dụ về phần quan trọng nhất của file style.css:


/*
Theme Name: Twenty Sixteen
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentysixteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Theme TwentySixteen là theme đã khai báo những thông tin cơ bản nhất, bạn phải khai báo những thông tin này vào file style.css cho dù bạn không viết gì vào trong đó.

2. functions.php

File này không phải là một template nhưng nó có chứa những đoạn mã có chức năng riêng của theme, bạn muốn thay đổi kích cỡ ảnh thumbnail hay hiển thị bài viết nổi bật nhưng WordPress không cung cấp template tag có sẵn cho bạn thì đây chính là nơi bạn có thể làm việc đó.

Tuy functions.php không phải là một template nhưng mỗi khi load trang thì đây sẽ luôn là file được gọi trước các template.

3. index.php

Đây là template chính của một theme, nó không chỉ hiển thị cho trang chủ mà còn hiển thị các trang khác nếu các trang khác chưa có template. Ví dụ bạn đã có template index.php nhưng bạn chưa có template single.php thì mặc định các bài viết sẽ hiển thị theo template index.php.

4. header.php & footer.php

Đây là 2 template không quan trọng lắm nhưng nên có thì đâu phải template nào chúng ta cũng có thể viết header và footer riêng cho nó được.

Để gọi header trong template khác ta dùng hàm có sẵn get_header(), tương tự với footer ta dùng hàm get_footer().

5. sidebar.php

Nếu bạn muốn hiển thị cái gì đó vào sidebar thì bạn có thể add code vào đây sau đó gọi template sidebar bằng cách dùng hàm có sẵn get_sidebar(). Theo mình bạn nên viết widget nếu muốn thêm gì đó để quản lý cho tiện, những bài viết sau mình sẽ hướng dẫn viết một widget chi tiết.

Đây là code mặc định của sidebar cho bạn nào cần, với code này bạn có thể hiển thị widget từ phần quản lý widget của theme:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>

<aside id="secondary" class="sidebar widget-area" role="complementary">
 <?php dynamic_sidebar( 'sidebar-1' ); ?>
 </aside>

<!-- .sidebar .widget-area -->
<?php endif; ?>

6. Các template khác

Các loại template sau không bắt buộc phải tạo nhưng mình vẫn đề cập vì đôi lúc chúng ta muốn tùy chỉnh website đến tận chân răng, WordPress hỗ trợ việc này, chỉ cần bạn kiên trì thôi.

Template của các trang lưu trữ:

Hiển thị cho tất cả các trang lưu trữ trên website (archive, category, tag, …). Mình sẽ viết theo dạng cây để bạn dễ hình dung, template nào ở ngoài sẽ là template mặc định hiển thị cho nội dung nếu không không có những template ở trong.

archive.php: Template mặc định cho toàn bộ các thể loại lưu trữ trên website, từ category, lưu trữ theo thời gian, tag, custom tax, …

category.php: Hiện thị nội dung khi bạn load một category bất kỳ.

category-abc-xyz.php: Định dạng cho category có slug là abc-xyz.

category-1234.php: Định dạng cho category có id là 1234.

tag.php: Hiển thị nội dung khi bạn load một tag bất kỳ.

tag-xxx.php: Định dạng cho tag có slug là xxx.

tag-11.php: Định dạng cho tag có id là 11.

author.php: Hiển thị nội dung lưu trữ theo tác giả.

author-hoaduong.php: Định dang trang lưu trữ theo tác giả có tên hoaduong.

author-9.php: Định dạng trang lưu trữ theo tác giả có id là 9.

archive-project.php: Định dạng trang lưu trữ các bài viết có post type là project.

taxonomy-project-category.php: Định dạng trang lưu trữ các bài viết có custom taxonomy là project-category.

Template hiển thị nội dung bài viết:

single.php: Cái này nói suốt ở trên rồi, dùng để hiển thị nội dung một bài viết bất kỳ.

single-project.php: Định dạng nội dung cho nhưng bài viết có post type là project.

single-abc-xyz.php: Định dạng nội dung cho post có slug là abc-xyz, cái này giống cái trên nhưng WordPress sẽ ưu tiên cái trên trước, tốt nhất là không nên đặt post type trùng với slug post.

single-1234.php: Định dạng nội dung cho post có id là 1234.

page.php: Định dạng nội dung cho một page bất kỳ.

page-home.php: Định dạng nội dung cho page có slug là home.

page-5678.php: Định dạng nội dung cho page có id là 5678.

Template trang chủ:

WordPress có khá nhiều tên cho template trang chủ, bạn dùng cái nào cũng được cả.

home.php: Hiển thị trang chủ blog page.

index.php: Hiển thị trang chủ chính.

front-page.php: Cũng là hiển thị trang chủ, nếu có template này thì theme không dùng home.php nữa.

Nếu có setting về Front Page thì những page này sẽ ghi đè tính năng, bạn nên thử để biết rõ hơn.

Template trang tìm kiếm: search.php

Mặc định khi bạn không có template hiển thị tìm kiếm search.php thì theme sẽ lấy template archive.php để định dạng nội dung phần này.

Template trang báo lỗi:

WordPress chỉ có một template duy nhất để định dạng nội dung này là 404.php.

Tham khảo:

Template Hierachy WordPress.org

WPHierachy.com – Cái này nó sơ đồ hóa mấy thứ mình nói bên trên, bạn vào xem thì dễ hiểu hơn đấy.

Template Tag

Template Tag là những hàm được viết sẵn trong WordPress giúp bạn đơn giản hóa việc viết một template. Bình thường bạn sẽ phải gọi một câu lệnh lấy dữ liệu từ database rất phức tạp, nhưng với Template Tag có sẵn bạn sẽ chỉ cần gọi nó ra theo ý muốn của mình.

Các template tag được đặt trong cặp thẻ <?php và ?>. Sau đây mình sẽ liệt kê những template tag thường dùng và thường gặp nhất, bạn có thể vào WordPress Codex để tìm thêm nếu thích, mình cũng sẽ dẫn link WordPress Codex nếu bạn muốn xem rõ chức năng của từng template tag.

1. Vòng lặp (loop)

Bạn sẽ phải sử dụng vòng lặp nhiều trong quá trình viết template cho WordPress. WordPress sử dụng vòng lặp while() để hiển thị nội dung, bạn sẽ luôn thấy vòng lặp đi kèm với một lệnh if() để tránh việc khi website không có dữ liệu nó sẽ không báo lỗi.

Để đỡ tốn công viết lệnh if() rồi mới while() thì WordPress cũng hỗ trợ viết 2 lệnh này gộp nhau luôn:


<?php
// Start the loop. 
while ( have_posts() ) : the_post(); 
//Trong này có thể sử dụng những template tag để hiển thị nội dung bài viết 
// End of the loop. 
endwhile; ?>

Bạn hãy thử mở template index.php và bạn sẽ thấy vòng lặp trong template này được viết như sau:


// Start the loop.
while ( have_posts() ) : the_post();

/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );

// End the loop.
endwhile;

Vòng lặp này sẽ gọi đến một template khác bằng hàm get_template_part(), bạn có thể điều code vào cũng được nhưng ở đây người viết Theme muốn quản lý code một cách khoa học hơn nên họ sẽ tách phần code trong vòng lặp sang một file khác.

Như bạn thấy hàm get_template_part() có 2 tham số được truyền vào, tham số đầu tiên là đường dẫn tới file template được gọi (bỏ .php ở cuối), tham số thứ 2 là kiểu của post, ví dụ bạn truy cập vào một bài viết thì post format sẽ là single, một trang thì post format là page.

2. Template Tag chung

Template tag này có thể dùng ở mọi template.

3. Template Tag cho Post/Page

Những template tag này thường được đặt trong vòng lặp mình đã nói bên trên.

  • the_permalink() – Hiển thị permalink của post/page
  • the_title() – Hiển thị tiêu đề của post/page
  • the_content() – Hiển thị toàn bộ nội dung của post/page
  • the_excerpt() – Hiển thị phần nội dung rút gọn của post/page
  • the_ID() – Hiển thị ID của post/page
  • the_tags() – Hiển thị các tag có trong post/page
  • the_date() – Hiển thị ngày đăng post/page
  • the_category() – Hiển thị các category của post/page
  • post_class() – Hiển thị các class HTML đặc trưng của post/page (phù hợp khi bạn muốn viết css tác động đến một post/page đặc biệt nào đó
  • has_post_thumnail() – Kiểm tra xem post/page có ảnh thumbnail (feature image) hay không
  • the_post_thumbnail() – Hiển thị ảnh thumbnail của post/page

4. Template Tag dùng cho Categoy, Tag

Các template này chỉ dùng được trong các template lưu trữ archive.php

5. Các Template Tag khác

Trên đây mình chỉ giải thích ý nghĩ của một vài template tag thường dùng, bạn có thể xem toàn bộ template tag được WordPress xây dựng sẵn tại WordPress Codex: Template Tags.

Còn đây là danh sách các file chứa code của template tag nếu bạn muốn tìm hiểu sâu hơn.

Lời kết

Sau bài viết này mình mong rằng bạn đã hiểu được cấu tạo cơ bản của Template và Template Tag trong WordPress để có thể tiếp tục với những bài viết sau này. Bây giờ bạn có thể tự tùy chỉnh theme trên website của bạn cho phù hợp với nhu cầu của mình rồi đó.

Hẹn gặp lại bạn vào bài viết tiếp theo trong serie.

About the author

hoadx

Với WPGuide, mình mong muốn được chia sẻ những kinh nghiệm, thủ thuật, hướng dẫn về WordPress và nhiều thứ khác...

Leave a Comment