Cấu trúc giao diện của Wordpress (WordPress Template Hierarchy)

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 Tags


WP 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 IDs


Kế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ẩn


Trang chủ:

• home.php 
• index.php 

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