Để có thể dễ dàng hiểu được các phần sau của serie WordPress nâng cao, hoặc để bạn có thể tuỳ biến lại giao diện của WordPress thì chắc chắn bạn cần phải nắm được cấu trúc template của theme trong WordPress và làm quen với các hàm sử dụng trong template (gọi là Template Tags).
Trước tiên bạn cần phải hiểu, một theme được hình thành bởi các template. Các template trong theme sẽ bao gồm các tập tin như header.php, index.php, footer.php, sidebar.php, single.php,…Nhưng sẽ có một tập tin bắt buộc nhưng không phải là template đó là functions.php.
Template ở đây bạn có thể hiểu nó như là một cái khuôn mẫu được định dạng sẵn nhằm mục đích hiển thị nội dung trên website. Ví dụ bạn muốn tuỳ biến lại cách hiển thị nội dung của Post thì sẽ sửa template single.php.
Template và Template Tag hoạt động thế nào?
Ví dụ, template single.php sử dụng cho post nào?
Cấu trúc template trong một theme
style.css – Trái tim của theme
functions.php – Bộ não của theme
index.php – Template gốc của theme
header.php – Phần đầu của theme
footer.php – Phần chân trang của theme
sidebar.php – Phần hiển thị sidebar
Template hiển thị trang lưu trữ
Template hiển thị trang nội dung
Template trang kết quả tìm kiếm
Template Tags cho ảnh thumbnail của Post
Template thì bạn đã biết rồi, nó là tập tin để khai báo khuôn mẫu để hiển thị nội dung, và các template tag được sử dụng trong template là những hàm hiển thị nội dung. Ví dụ dưới đây là một đoạn code ngắn thường thấy trong template single.php:
<h1 class="entry-title"><?php the_title(); ?></h1>
Ở trên là mình đã cố định thẻ <h1>
để hiển thị nội dung của hàm the_title()
(đây là template tag) nhằm hiển thị tiêu đề bài viết của truy vấn hiện tại (hay còn gọi là post hiện tại bạn đang xem). Khi xuất ra trình duyệt nó sẽ có dạng như thế này:
<h1 class="entry-title">Cấu trúc Template và Template Tag</h1>
Như vậy bạn có thể hiểu, việc tuỳ biến theme chỉ đơn giản là sửa cấu trúc HTML và khai báo các template tag cần sử dụng cho nó hiển thị ra mà thôi.
Mặc định trong WordPress, sau khi nó phân tích truy vấn dựa vào đường dẫn hiện tại mà bạn đang truy cập, nó sẽ phân tích template phù hợp cần hiển thị. Tất cả các template trong theme có thể sử dụng cho tất cả các phần tử con trong một đối tượng nào đó, ví dụ template single.php sẽ sử dụng cho toàn bộ Post trong WordPress, category.php
sẽ áp dụng cho toàn bộ category,…Nhưng bạn cũng có thể tạo tempate riêng cho một phần tử nào đó, ví dụ template single-123.php sẽ áp dụng cho Post mang ID là 123
, hay single-gioi-thieu.php sẽ áp dụng cho Post mang slug là gi
.
oi-thieu
Hiện nay các theme, ngoài việc họ sử dụng các template bắt buộc của WordPress thì họ còn sử dụng thêm các template thêm vào. Nên nếu bạn muốn hiểu cấu trúc template chuẩn của WordPress thì hãy xem template của theme Twenty Fifteen. Bạn có thể xem nó trong thư mục /wp-content/themes/twentyfifteen/
.
Template của WordPress chỉ là các tập tin .php và style.css thôi nên các thư mục bên trong theme đều không thuộc template mà tác giả đã tạo ra để dễ quản lý hoặc chứa các thành phần đặc biệt.
Tips: Cách tốt nhất để nhớ template tags và cấu trúc template là hãy thực hành tuỳ chỉnh theme thật nhiều. Hoặc hãy tham gia serie Lập trình theme WordPress để biết cách tự code một theme từ A tới Z.
Tất cả các theme trong WordPress đều phải có tập tin style.css. Tập tin này không chỉ là chứa các CSS trong theme mà nó còn có chức năng khai báo thông tin của theme như tên theme, tên tác giả, số phiên bản,…nhằm có thể hiển thị trong khu vực Themes của WordPress. Nếu theme bạn không có tập tin này thì theme của bạn không hợp lệ.
Bạn hãy thử mở tập tin style.css của theme Twenty Fifteen lên, bạn sẽ thấy ở các dòng đầu tiên họ có comment một số đoạn thông tin sau:
/* Theme Name: Twenty Fifteen Theme URI: https://wordpress.org/themes/twentyfifteen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer. 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, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready Text Domain: twentyfifteen 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. */
Các thông tin đó là những thông tin phải được khai báo ở theme, và nó sẽ hiển thị trong khu vực Appearance -> Themes.
Tập tin này tuy không thuộc template của theme nhưng nó sẽ có vai trò chứa những đoạn mã PHP để khai báo các tính năng đặc biệt, hoặc sử dụng hàm add_theme_support() để khai báo các tính năng trong theme. Bạn hãy nhớ một điều rằng, functions.php không phải là template nên nó sẽ không hiển thị ra bên ngoài nhưng mà nó sẽ được thực thi, và tất cả code PHP trong đây sẽ được thực thi khi website được tải ra.
Tập tin index.php không chỉ là template để sử dụng cho trang chủ, mà nó còn là template gốc của website nếu như các template khác chưa được khai báo. Ví dụ nếu theme của bạn không có tập tin single.php để làm template cho trang nội dung của Post, thì nó sẽ sử dụng tập tin index.php để hiển thị. Các template khác cũng vậy.
Template này không bắt buộc nhưng nên sử dụng để khai báo phần header của trang, bao gồm các thẻ như <html>
, <head>
, <body>
,…Và sau đó ở các template khác, chúng ta sẽ gọi nó ra bằng template tag get_header()
.
Nó cũng giống như header.php đó là được sử dụng để khai báo phần chân trang của theme. Rồi sau đó ở các template khác ta sẽ gọi nó ra bằng get_footer().
Bạn có thể khai báo sidebar trực tiếp vào các template khác với hàm dynamic_sidebar() nhưng nếu bạn sử dụng sidebar ở nhiều template khác nhau thì bạn nên viết code hiển thị sidebar vào tập ti sidebar.php. Rồi sau đó sẽ dùng hàm get_sidebar()
để gọi template này ra.
Các template dưới đây nó sẽ không bắt buộc bạn phải tạo ra như 3 tập tin ở trên, nhưng nó sẽ được sử dụng nếu bạn có khai báo. Template nào không khai báo thì nó sẽ sử dụng template cấp cao hơn. Ví dụ nếu single-123.php không khai báo thì nó sẽ sử dụng single.php.
Template này sẽ sử dụng cho tất cả các trang lưu trữ trên website. Trang lưu trữ là các trang phân loại bài viết như category, tag, custom taxonomy,…
Template này sẽ định dạng cho trang hiển thị nội dung của Post hoặc Page hoặc một Custom Post Type nào đó.
Các template này sẽ được sử dụng cho việc định dạng hiển thị của trang chủ.
Template này sẽ hiển thị lỗi 404 trong website, và nó chỉ có 1 tập tin duy nhất là 404.php.
Khi sử dụng chức năng tìm kiếm trên website, kết quả tìm kiếm sẽ được hiển thị bằng template search.php. Nếu search.php không tồn tại thì nó sẽ dùng archive.php.
Tips: Nếu bạn mới làm quen với template trong WordPress, hãy tập tuỳ biến một theme có sẵn thay vì lao vào tạo theme riêng. Nếu bạn học, hãy nên sử dụng các theme miễn phí hoặc theme mặc định.
Nếu các tập tin template là những tập tin đại diện cho trang hiển thị các thành phần trong website thì template tag là những hàm được sử dụng để hiển thị một thành phần đặc biệt trong template. Các template tag bạn có thể sử dụng bằng cách lồng vào những thẻ HTML để nó hiển thị.
Các template tag là hàm PHP nên nó sẽ phải được nằm trong cặp thẻ <?php ?>
của ngôn ngữ PHP.
Trong khi danh sách template tags có trong WordPress rất nhiều, mình chỉ nói qua một số template tag thường gặp nhất và cũng là quan trọng nhất.
Nhắc lại: Template Tag là những hàm PHP được sử dụng trong template.
Toàn bộ các template tag trong WordPress đều được khai báo ở các tập tin sau:
Đây không được gọi là template tag nhưng nó là một phần quan trọng được sử dụng thường xuyên trong các template để có thể hiển thị thông tin của. Vòng lặp là mệnh đề while()
trong PHP được sử dụng để tạo ra chu kỳ hiển thị toàn bộ nội dung trong một trang nhất định (như tiêu đề trang, nội dung,…).
Vòng lặp trong WordPress thường được sử dụng kèm với mệnh đề if()
để tránh việc thực thi vòng lặp khi truy vấn ở trang hiện tại không có dữ liệu. Vòng lặp thường có cấu trúc như sau:
<?php if( have_posts() ) : while( have_posts() ) : the_post(); // Template tag hiển thị nội dung của trang ở đây. endwhile; endif; ?>
Về chi tiết ý nghĩa các hàm trong vòng lặp như have_posts()
hoặc the_post()
mình sẽ nói kỹ hơn ở bài sau.
Bây giờ bạn hãy thử mở tập tin page.php trong theme Twenty Fifteen, bạn sẽ dễ dàng thấy nó có một vòng lặp như sau.
<?php // Start the loop. while ( have_posts() ) : the_post(); // Include the page content template. get_template_part( 'content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; // End the loop. endwhile; ?>
Và vòng lặp này sẽ tạo chu kỳ thực thi hàm get_template_part()
và các thành phần khác bên trong để hiển thị nội dung của một page.
Một trong các template tag được sử dụng nhiều nhất nhưng nhiều bạn cũng khó hiểu nhất đó chính là get_template_part()
. Đây là hàm trong WordPress được sử dụng để nối nội dung của một tập tin PHP nào đó vào vị trí hiện tại mà hàm này đang được khai báo.
Ví dụ trong Twenty Fifteen nó sử dụng hàm get_template_part()
như sau:
get_template_part( 'content', 'page' );
Có nghĩa là nó nối tập tin content-page.php có trong cùng thư mục vào vị trí nó được khai báo. Sở dĩ nó phải sử dụng hai tham số thay vì một tham số như vậy là để giúp lập trình viên dễ dàng quản lý các tập tin dựa theo slug (tham số content
) và tên template (tham số page
).
Như vậy bạn có thể hiểu, thay vì họ viết toàn bộ code của tập tin content-page.php vào vị trí đó thì họ sẽ tách nó ra một tập tin riêng nhằm có thể tái sử dụng lại trong các template khác hoặc cho dễ dàng quản lý code trong theme.
Ngoài ra, nó cũng có thể được sử dụng để nối một tập tin nào đó trong một thư mục nào đó. Ví dụ dưới đây là nối tập tin /part/content-single.php
get_template_part( 'part/content', 'single' );
Các template tags này thường không đại diện cho một chức năng cụ thể nào.
Các template tags này sẽ sử dụng cho template archive.php trở xuống.
Yeah, vậy bạn đã hiểu thế nào là cấu trúc template trong theme WordPress và những đoạn code bên trong đó (đa phần là template) chưa? Rất đơn giản phải không nào, thật ra để hiểu template trong WordPress rất đơn giản, bạn chịu khó xem hướng dẫn của mình trong bài này cùng với việc thường xuyên vọc mã nguồn của theme là sẽ nhanh chóng hiểu thôi.
Ở bài sau, mình sẽ giải thích cho bạn về thuật ngữ truy vấn (query) vốn mình đã nói nhiều trong bài này, ở bài đó bạn sẽ hiểu thêm về template nữa.