WordPress Template Hierarchy hay có thể hiểu là cấu trúc cấp bậc giao diện
WordPress cho phép chúng ta viết theme theo đúng chuẩn và sử dụng chúng
như khuôn mẫu cho các phiên bản Wordpress.Giới thiệu:
Các template như những mảnh ghép được ghép lại với nhau tạo ra một trang web hoàn chỉnh trên giao diện người dùng. Một số file giao diện được dùng trên tất cả các trang như header.php hay footer.php nhưng có những file chỉ được gọi đến trong những trường hợp nhất định.
Vì sao chúng ta cần hiểu rõ về cấu trúc giao diện?
Hiểu được cấu trúc giao diện chúng ta có thể tùy biến giao diện người dùng tốt hơn theo những yêu cầu được đặt ra mà không phải gọi lại những thành phần thừa. Biết chỉnh sửa nếu cần thiết.
Cấu trúc giao diện rất cần thiết cho theme designer.
Sử dụng cấu trúc theo
Conditional TagsWP cung cấp nhiều cách để gọi dữ liệu, vì vậy khi viết theme chúng ta cần sử dụng conditional tag
trong cấu trúc theme để xuất dữ liệu theo yêu cầu.
Template File Hierarchy
Wordpress có các câu lệnh truy vấn dữ liệu quy định loại trang nào sẽ hiển thị dữ liệu được yêu cầu
(ví dụ trang tìm kiếm, danh mục, ngày tháng …)Khi được yêu cầu, WP sẽ tìm đến các file đúng
chuẩn để quy định cách xuất dữ liệu và những dữ liệu gì được xuất hiện, việc này phụ thuộc vào tùy từng
theme và được bỏ qua nếu không có.
Lấy ví dụ, khi truy vấn đến một website sử dụng WP thì file index.php trong theme sẽ được gọi.
Và nếu không có WP sẽ bỏ qua và tìm tiếp đến file được quy định làhome.php
Visual Template Hierarchy
Để hiểu hơn chúng ta cùng đi vào những yêu cầu cụ thể
Website của tôi có nhiều category và tôi muốn các category cụ thể được quy định giao diện khác nhau
(ví dụ category: Xã hội, Công nghệ, Nghệ thuật, Du lịch … Yêu cầu được đặt ra là các danh mục trên
có nội dung khác nhau nên cần có giao diện người dùng khác nhau. Và khi dựa vào cấu trúc chuẩn tôi
cần xác định định được:
Khung xanh: slug / Khung đỏ: ID
- Category ID (ID của danh mục)
- Category Slug (slug của danh mục)
- Plugin hỗ trợ tìm IDs:
Reveal IDsKết quả (id/slug):
Xã hội – 3/xa-hoi
- Công nghệ – 5/cong-nghe
- Nghệ thuật – 8/nghe-thuat
- Du lịch – 4/du-lich
Khi thiết kế giao diện website theo chuẩn và có giao diện theo yêu cầu thì chúng ta cần đặt tên file như sau (id/slug):
Xã hội – category-3.php hoặc category-xa-hoi.php
Công nghệ – category-5.php hoặc category-cong-nghe.php
Nghệ thuật – category-8.php hoặc category-nghe-thuat.php
Du lịch – category-4.php hoặc category-du-lich.php
Và việc còn lại là tùy biến giao diện theo yêu cầu trên từng file riêng biệt mà không ảnh hưởng đến những category khác.
Danh sách Template Hierarchy theo chuẩnTrang chủ:
Trang chủ tùy chỉnh (theo page):
- front-page.php
- Page (tùy chỉnh tại Settings -> Reading)
- Post (tùy chỉnh tại Settings -> Reading)
Trang đơn:
- single-{post_type}.php – ({post_type} cần được quy định và đặt tên file bởi slug – ví dụ post_type slug là san-pham vậy ta có single-san-pham.php )
- single.php
- index.php
Trang (page):
- page-{slug}.php
- page-{id}.php
- page.php
- index.php
- tùy ý (xem thêm tại đây)
Category:
- category-{slug}.php
- category-{id}.php
- category.php
- archive.php
- index.php
Tag:
- tag-{slug}.php
- tag-{id}.php
- tag.php
- archive.php
- index.php
Taxonomies:
- taxonomy-{taxonomy}-{slug}.php
- taxonomy-{taxonomy}.php
- taxonomy.php
- archive.php
- index.php
Post Types:
- archive-{post_type}.php
- archive.php
- index.php
Author:
- author-{nicename}.php
- author-{id}.php
- author.php
- archive.php
- index.php
Date:
- date.php
- archive.php
- index.php
Search:
search.php
index.php
404 Not Found:
404.php
index.php
Attachment:
MIME_type.php
text.php
plain.php
text_plain.php
attachment.php
single-attachment.php
single.php
index.php
Đọc thêm tại codex page:
http://codex.wordpress.org/Template_Hierarchy