Template hierarchy WordPress là quy tắc core duyệt danh sách file template theo thứ tự ưu tiên để pick file render cho mỗi request URL. Bài này giải thích cơ chế 2026, mổ xẻ 6 context (single, page, archive, taxonomy, search, 404), hierarchy WooCommerce và pattern override cho shop WordPress VN.
Cơ chế template hierarchy — render pipeline 5 bước
Hiểu template hierarchy giúp đặt tên file template đúng để override một context cụ thể mà không phải sửa template chung. Dev mới hay rơi vào tình trạng “sửa single.html nhưng product không đổi” vì single-product.html mới là template được pick cho post type product.
Cốt lõi: WordPress xác định context request rồi duyệt danh sách file ưu tiên từ cụ thể tới chung. File đầu tiên tồn tại trong theme sẽ được dùng — phần còn lại trong danh sách bị bỏ qua kể cả khi cũng match.
Pipeline render từ URL tới HTML
Mỗi request đi qua 5 mốc chính trước khi render markup ra browser. Hiểu pipeline này giúp debug khi template không pick đúng — biết bước nào fail để đặt breakpoint hoặc dump query.
- Parse URL: WordPress đọc URL, dùng rewrite rule để xác định post type, taxonomy, archive type, slug.
- Set context: core xác định context cụ thể (vd “single post slug=hello-world” hoặc “category archive slug=technology”).
- Duyệt hierarchy: dựa trên context, core tạo danh sách file template ưu tiên từ specific tới generic.
- Pick file đầu tiên tồn tại: kiểm tra từng file trong list, dùng file đầu tiên có trong theme folder.
- Render: parse template HTML/PHP, replace block markup bằng content thực, output về browser.
Block theme và classic theme dùng cùng hierarchy
Hierarchy không thay đổi khi chuyển từ classic sang block theme — chỉ khác extension file. Classic dùng single.php và archive.php, block dùng single.html và archive.html, thứ tự ưu tiên giống hệt nhau.
- File extension: classic dùng .php, block dùng .html — mọi quy tắc tên file (single-{post-type}.html) áp dụng cho cả hai.
- Location folder: classic đặt file ở root theme, block đặt trong folder templates/ và parts/ — phân tách rõ template chính và component tái dùng.
- Logic priority identical: WordPress core dùng cùng function template_redirect cho cả hai paradigm — chỉ output khác nhau ở layer render.
Context 1 — Single post và custom post type
Context single áp dụng cho mọi URL render một post lẻ — bao gồm blog post mặc định và custom post type như product, course, event. Hierarchy có 5 level ưu tiên từ slug cụ thể tới fallback index.
Hierarchy single post 5 level
| Priority | Template file | Khi nào match |
|---|---|---|
| 1 | single-{post-type}-{slug}.html | Slug cụ thể trong post type cụ thể |
| 2 | single-{post-type}.html | Mọi post trong post type cụ thể |
| 3 | single.html | Mọi single post bất kỳ post type |
| 4 | singular.html | Singular content (post hoặc page) |
| 5 | index.html | Fallback cuối cùng |
Use case override single template
- single-post-best-seller.html: override layout riêng cho 1 bài blog flagship — vd bài hướng dẫn dài cần TOC sidebar.
- single-course.html: custom post type course có template riêng với progress bar và lesson list — không lẫn với blog post.
- single-product.html: WooCommerce dùng template này cho mọi product — gallery + variation + add-to-cart layout chuẩn shop.
Context 2 — Page tĩnh
Context page khác single post ở chỗ nội dung không có khái niệm “feed thời gian” — page về us, contact, services nằm độc lập trong sitemap. Hierarchy có 5 level riêng cho page.
Hierarchy page 5 level
| Priority | Template file | Khi nào match |
|---|---|---|
| 1 | page-{slug}.html | Page có slug cụ thể (vd page-about.html) |
| 2 | page-{id}.html | Page có ID cụ thể (vd page-42.html) |
| 3 | page.html | Mọi page bất kỳ |
| 4 | singular.html | Singular content (post hoặc page) |
| 5 | index.html | Fallback cuối cùng |
Page template custom trong Site Editor
WordPress 6+ cho phép user tạo page template tuỳ chỉnh qua Site Editor mà không cần dev tạo file. Template lưu trong database qua post type wp_template, áp dụng được khi user chọn ở sidebar editor post.
- Tạo qua Site Editor UI: vào Templates, click Add New Template, pick context Page, đặt tên — không touch code file.
- Lưu trong database: template dạng wp_template post type — backup database là backup luôn template custom.
- Override theme file: nếu template database trùng tên với file theme, database thắng — pattern lock template cho client.
Context 3 — Category, tag và custom taxonomy archive
Archive context render danh sách post thuộc một phân loại — category, tag, custom taxonomy như product_cat trong WooCommerce. Hierarchy phân tầng theo slug, ID rồi generic archive.
Hierarchy category và tag archive
| Priority | Template file |
|---|---|
| 1 | category-{slug}.html hoặc tag-{slug}.html |
| 2 | category-{id}.html hoặc tag-{id}.html |
| 3 | category.html hoặc tag.html |
| 4 | archive.html |
| 5 | index.html |
Hierarchy custom taxonomy
| Priority | Template file |
|---|---|
| 1 | taxonomy-{taxonomy}-{term}.html |
| 2 | taxonomy-{taxonomy}.html |
| 3 | taxonomy.html |
| 4 | archive.html |
| 5 | index.html |
Pattern phổ biến cho archive category lớn
Category traffic cao trong shop (vd “Áo thun”, “Giày sneaker”) thường cần layout riêng với filter facet và banner top. Tạo file template specific giúp tối ưu UX cho category đó mà không ảnh hưởng category khác.
- category-ao-thun.html: custom hero banner ngành thời trang, grid 4 cột mặc định — chuẩn UX category fashion.
- category-electronics.html: filter facet bên trái (brand, RAM, dung lượng), grid 3 cột với spec text nhiều — UX ngành điện tử.
- category.html chung: fallback grid 3 cột đơn giản cho mọi category khác — không cần file specific cho mỗi category.
Search, 404 và archive đặc biệt — hierarchy ngắn
Bốn context phụ ít được chú ý nhưng ảnh hưởng UX rõ rệt — page search trống và 404 đẹp giảm tỉ lệ bounce. Hierarchy đơn giản chỉ 1-2 level fallback về index.html.
- Search: search.html → index.html — nên có search.html riêng với input search to + popular post list khi không có kết quả.
- 404: 404.html → index.html — bắt buộc có 404.html với link về home, search box, popular pages để giữ user.
- Author archive: author-{slug}.html → author.html → archive.html → index.html — dùng khi site có multi-author cần page profile riêng.
- Date archive: date.html → archive.html → index.html — hiếm dùng cho shop, phổ biến cho blog news.
Pattern thiết kế search.html chuyển đổi tốt
Trang search có kết quả cao chuyển đổi gấp 2-3 lần trang category bình thường vì user đã có ý định mua rõ ràng. Thiết kế tốt giúp giữ user không bỏ qua kết quả gần nhất.
- Input search prominent đầu trang: giữ ô search to để user re-search nhanh nếu keyword đầu không ra kết quả mong muốn.
- Hiển thị từ khoá đã search: “Kết quả cho: áo thun nam” — confirm với user search engine hiểu đúng query.
- Filter facet phải mặt: giá, brand, category — user lọc nhanh thay vì gõ keyword phức tạp.
- Suggest “Có thể bạn quan tâm”: 4-6 sản phẩm related dưới kết quả search — cứu vớt user khi kết quả ít.
Page 404 tốt — 5 element bắt buộc
Page 404 không chỉ là “không tìm thấy” — đây là cơ hội cuối giữ user khỏi bounce sang Google. Năm element dưới là chuẩn UX cho 404 page shop có conversion tốt.
- Thông báo rõ ràng: “Trang không tồn tại” thay vì error code khô khan — ngôn ngữ tự nhiên.
- Search box prominent: đặt giữa trang to rõ — user gõ keyword tìm lại sản phẩm.
- Link về home + category chính: 3-5 link nhanh tới các area phổ biến nhất của shop.
- Sản phẩm bán chạy: grid 4-6 sản phẩm top seller — cứu vớt user khỏi rời đi tay không.
- Form báo lỗi: “Báo cho chúng tôi liên kết hỏng” — phản hồi channel để team kỹ thuật fix link gãy.
Context 5 — WooCommerce mở rộng hierarchy
WooCommerce thêm custom post type “product” và taxonomy “product_cat”, “product_tag” vào WordPress core. Hierarchy WC tuân theo quy tắc chung WordPress nhưng thêm vài template WC-specific cho cart, checkout, account.
Hierarchy product và shop
| Priority | Template file | Use case |
|---|---|---|
| 1 | single-product-{slug}.html | Trang product flagship custom layout |
| 2 | single-product.html | Mọi product chung |
| 3 | archive-product.html | Trang shop (list product main) |
| 4 | taxonomy-product_cat-{term}.html | Category product cụ thể |
| 5 | taxonomy-product_cat.html | Mọi category product |
Template WC-specific khác
- cart.html: trang giỏ hàng — block theme WC 8.3+ dùng wc/cart block để render dynamic.
- checkout.html: trang thanh toán — block wc/checkout với form payment method.
- page-myaccount.html: page account customer — dashboard order history, address, payment method.
- page-shop.html: alternative cho archive-product.html khi muốn dùng template page-based.
Context 6 — Pattern override hợp lý cho shop
Không phải shop nào cũng cần đủ 20-30 template specific. Pattern hợp lý là tạo template cho context có traffic cao và UX khác biệt, fallback chung cho phần còn lại — tránh cồng kềnh template thừa.
4 template tối thiểu cho shop nhỏ
Shop nhỏ dưới 100 SKU không cần nhiều template. Bốn file dưới đủ cover 95% context render, phần còn lại fallback về index.html không phát sinh issue UX.
- index.html: fallback chung cho mọi context — bắt buộc có trong mọi block theme.
- single.html: single post blog — layout đọc dài với meta author và date.
- single-product.html: trang product Woo — gallery + variation + add-to-cart.
- archive-product.html: trang shop list — grid product với pagination.
8 template cho shop trung và lớn
- page-home.html: homepage custom với hero, featured collection, USP section.
- page-landing.html: landing page sale theo chiến dịch — Black Friday, Tết Nguyên Đán.
- single-product-{slug}.html: product flagship cần layout đặc biệt — vd kết hợp bundle hoặc product video review.
- category-{slug}.html: category traffic cao custom layout — filter facet và banner top riêng.
- archive-product.html: trang shop chính — grid với sidebar filter dạng accordion.
- 404.html: 404 custom với search prominent + product bán chạy + form báo lỗi link.
- search.html: trang kết quả search — grid product + tag suggestion + filter loại.
- page-about.html: trang about us custom — hero ảnh team + tiến độ brand + cam kết.
Anti-pattern khi tạo template hierarchy
Một số pattern thường gặp gây maintainability issue dài hạn — dev mới hay làm khi chưa hiểu trade-off. Ba anti-pattern dưới đáng tránh ngay từ đầu dự án.
- Tạo file template cho mọi page: page-about.html, page-contact.html, page-services.html, page-blog.html — cồng kềnh theme với 10+ file giống 90%. Chỉ tạo khi page có layout thực sự khác.
- Logic phức tạp trong template: nhồi conditional 10-15 if/else vào template — khó maintain. Tách thành template parts riêng hoặc dùng pattern theo context.
- Override theme parent nhưng quên hierarchy: child theme override single.html nhưng quên single-product.html — Woo không pick child template. Cần override đúng file theo hierarchy.
Câu hỏi thường gặp
Block theme và classic theme có hierarchy khác nhau không?
Cùng hierarchy, khác file extension. Classic dùng .php, block dùng .html — tên file giống hệt nhau theo quy ước single-{post-type}.html và category-{slug}.html.
Logic priority và fallback cũng identical — WordPress core dùng cùng function template_redirect cho cả hai paradigm. Khác biệt chỉ ở layer render output: classic chạy PHP, block parse block markup HTML.
Custom post type có support hierarchy không?
Có. Pattern đặt tên: single-{post-type}.html, archive-{post-type}.html, taxonomy-{taxonomy}.html.
Ví dụ custom post type “course” có single-course.html cho trang chi tiết khoá học và archive-course.html cho danh sách khoá học.
Register post type với option has_archive: true để WordPress tạo URL archive cho post type đó. Nếu không bật flag này, archive-{post-type}.html sẽ không bao giờ được pick vì URL archive không tồn tại trong rewrite rule.
Site Editor có support edit từng template specific không?
Có. Vào Site Editor, mở tab Templates, click Add New Template, pick context (Single Post, Page, Archive, Specific Page), đặt tên — user UI tạo template không cần code file.
Template lưu trong database qua custom post type wp_template. Khi template database trùng tên với template file theme, WordPress ưu tiên database thắng.
Đây là pattern phổ biến để client lock template cho chiến dịch mà không cần sửa code theme. Dev chỉ ship template skeleton ban đầu, client tự override qua Site Editor khi cần đổi layout cho chiến dịch cụ thể.
Có thể tạo template cho URL pattern bất kỳ không?
Theme template chỉ match context standard (single, archive, taxonomy, search, 404) — không match URL pattern arbitrary qua quy ước tên file. URL specific cần dùng filter template_include trong functions.php để route URL → file template tự chọn.
Pattern code: hook vào filter template_include, kiểm tra điều kiện qua hàm is_page, is_singular hoặc parse $_SERVER, return path tới file template muốn dùng. Plugin như “Custom Post Type UI” hoặc “WP Custom Templates” cung cấp UI để config rule này không cần code.
Thay đổi hierarchy có ảnh hưởng SEO không?
Hierarchy không trực tiếp ảnh hưởng SEO vì Google không quan tâm template file nào render. Ảnh hưởng gián tiếp đến từ chất lượng markup HTML output.
Template tốt sinh markup semantic và Schema chuẩn — Google crawl nhanh, hiểu cấu trúc rõ. Template kém sinh div lồng nhau dày đặc — Google khó parse, ảnh hưởng xếp hạng.
Khi thay đổi template cho category traffic cao, phải verify Schema JSON-LD vẫn render đúng và breadcrumb chính xác. Test bằng Google Rich Results Test sau mỗi lần đổi template — bắt regression Schema sớm tránh drop xếp hạng.
Tài nguyên và bước tiếp theo
Template hierarchy là backbone của theme — sau khi nắm cơ chế, mở rộng sang design system theme.json và block tuỳ chỉnh để dựng theme hoàn chỉnh. Các bài liên quan trong cụm WordPress Development:
- theme.json 2026 — design system config cho block theme — kết hợp customTemplates với hierarchy file.
- Block theme vs Classic theme — so sánh 8 khía cạnh — hai paradigm cùng dùng hierarchy giống nhau.
- Custom block FSE — 5 bước build block React — block custom dùng được trong mọi template hierarchy.
- Thiết kế block pattern — 5 bước cho shop — pattern là markup tái dùng trong template.
- Dịch vụ thiết kế website WordPress chuyên nghiệp — tham khảo gói thi công theme custom trọn gói.
Cần đội Web22 dev theme/plugin WordPress custom theo nhu cầu shop của bạn? Đội WordPress Developer Web22 — block + plugin + REST API — báo giá rõ ràng theo phạm vi, không phát sinh sau khi ký hợp đồng.
