Toàn tập về WP hierarchy – cấu trúc giao diện WordPress

Nếu bạn muốn khai phá sức mạnh của WordPress, bạn sẽ cần biết cơ bản về cấu trúc giao diện WordPress. Khi WordPress render một trang, nó sử dụng template để kiểm tra xem mọi thứ trông có ổn không. Hơn thế nữa, nền tảng này cũng tuân thủ một cấu trúc nghiêm ngặt để giữ mọi thứ được sắp xếp đúng vị trí: WP Hierachy. Hiểu cách hoạt động của cấu trúc giao diện WordPress (WP hierachy) sẽ giúp bạn có nhiều khả năng hơn để tùy biến theme.

WordPress template hierarchy được phân thành 7 mục chính:

1. Site front page
2. Single posts
3. Single pages
4. Category và tag pages
5. Custom post types
6. Trang kết quả tìm kiếm
7. Trang lỗi 404

Trong bài hướng dẫn này, chúng tôi sẽ giới thiệu đến với bạn về WordPress templates và cấu trúc hierarchy. Chúng tôi sẽ giải thích vì sao bạn cần nắm rõ WP hierarchy, cách theme sử dụng template files để hiển thị các trang của website. Có rất nhiều điều phải bàn tới, nên không chần chừ nữa, hãy bắt đầu thôi!

Giới thiệu về Template Files (Và nó liên quan đến WordPress Themes thế nào)

Khi bạn tạo một website đơn giản, bạn thường chỉ sử dụng HTML và CSS để render trang và thiết lập vẻ ngoài của nó. WordPress, ở một góc độ khác lại mạnh mẽ hơn nhiều. Nền tảng này được xây dựng bởi ngôn ngữ PHP, nó sử dụng nhiều files .php để tạo nên cách hiển thị của một trang.

Hãy nhìn về phía bên phải của bài post này. Có một thanh sidebar chứa những bài viết liên quan trong blog của chúng tôi. Khi browser yêu cầu WordPress tải bài viết này, nó sẽ kéo lên một vài ‘template’ files, một trong số chúng là sidebar.php. Files này chứa thông tin để render sidebard như bạn đang thấy, và thuộc tính nào phải kèm theo:

Sidebars dĩ nhiên chỉ là một phần của toàn trang. Hầu hết các trang WordPress đều cần nhiều template files để hoạt động, bao gồm:

Lưu ý là những file templates không phải là tất cả files template trong WordPress. header.php, sidebar.php, và footer.php đặc biệt quan trọng vì những file này được biết đến như là ‘template partials’. Có nghĩa là chúng cũng có thể được nhúng vào trong những templates khác.

Cách WordPress render trang có thể phức tạp lúc ban đầu tìm hiểu. Nhưng thực tế nó rất hiệu quả. Nếu bạn có một template duy nhất cho từng trang của website, việc tùy biến sẽ trở thành ác mộng. WordPress “module hóa” bằng cách sử dụng template để bạn có thể chỉ phải chỉnh 1 files nhưng yếu tố đó lại được áp dụng cho toàn bộ website khi cần.

Khi chọn template nào để dùng cho trang nào, đầu tiên WordPress sẽ kiểm tra theme đang sử dụng. Mỗi theme có một bộ templates files riêng và sẽ có mức ưu tiên hơn những template khác. Cách sắp xếp thứ tự ưu tiên này được gọi là ‘template hierarchy’ trong WordPress khi triển khai, hoặc là WP hierarchy. Chúng ta sẽ tìm hiểu vấn đề này ở phần sau.

Giờ bạn đã hiểu cách WordPress render trang, bạn có thể đoán được là themes cơ bản chỉ là một tập hợp các template files. Trên thực tế, một theme chỉ cần một file template để hoạt động, và nó là index.php. Tuy nhiên, hầu hết các themes đều rất nhiều templates. Nếu themes thiếu cái gì, WordPress sẽ dùng những files khác theo thứ tự trong cấu trúc giao diện của nó để dùng thay thế.

WP hierarchy (WordPress Template Hierarchy) hoạt động như thế nào

Trong phần trước, chúng tôi có ví dụ về WordPress templates file. Tuy nhiên, đó chỉ là một vài template có thể được dùng khi page hoặc post được tải lên. WordPress template hierarchy sẽ quyết định template nào được dùng, và theo thứ tự nào.

Nếu bạn load một trang của một category giả định có tên là hosting, cách vận hành phía sau nền tảng là:

1. WordPress sẽ tìm file template gọi là category-hosting.php trong cùng thư mục của theme.
2. Nếu không có file category-hosting.php, WordPress sẽ tìm theo category ID, ví dụ như category-2.php.
3. Nếu WordPress không thể tìm được bất kỳ file nào, nó sẽ tìm file category.php.
4. Nếu nó vẫn không tìm thấy file category.php, WordPress sẽ quay lại tìm template file archive.php.
5. Cuối cùng, nếu tất cả đều không thành công, nó sẽ tải file index.php của theme và dùng nó làm template của trang.

Một số template files luôn có độ ưu tiên cao hơn các template khác, vì vậy đó là lý do vì sao nó được sắp xếp theo dạng cấp bật (hierarchy). Tổng thể, WordPress chia làm 7 loại trang mỗi loại có quy tắc hierarchy nghiêm ngặt riêng. Tiếp theo, hãy tìm hiểu xem các loại categories này là gì và hierarchies của chúng hoạt động thế nào.

Phân tích các loại WP hierarchy (7 loại)

Với WordPress, tất cả các website có thể được chia thành 7 loại trang. Mỗi categories có cấu trúc template hierarchy WordPress được dựng sẵn. Chúng tôi sẽ giải thích từng loại một cho bạn.

1. Site Front Page

Đầu tiên, hãy nói về front page của website bạn. Khi WordPress tải trang chủ lên, đầu tiên nó sẽ xem qua file front-page.php. Nếu file đó không có sẵn, nền tảng này sẽ quay lại tìm file home.php. Nếu cả 2 đều không có, WordPress sẽ tìm đến file index.php, file này lúc nào cũng tồn tại (nếu không, theme sẽ không hoạt động).

Nói cách khác, đây là thứ tự ưu tiên hiển thị:

1. front-page.php
2. home.php
3. index.php

Kể cả 3 files này giống y như nhau, WordPress vẫn sẽ làm theo cấu trúc logic này. Thứ tự này vô cùng đơn giản. Hãy tiếp tục tìm hiểu thêm các loại các phức tạp hơn một chút nhé!

2. Single Posts

Bài viết WordPress (như là bài này) nằm trong loại single posts. Ở phần đầu, chúng tôi có nói về một số file template dùng để render một bài viết. Tuy nhiên, chúng thường là các yếu tố internal. Trước khi WordPress render chúng, WordPress sẽ sử dụng template sau để sử dụng cho trang trước, theo thứ tự sau.

Hierarchy của single posts:

1. single-{post-type}-{slug}.php
2. single-{post-type}.php
3. single.php
4. singular.php
5. index.php

Có thể bạn không nhận ra một số file templates. Chúng tôi sẽ đưa nó vào ví dụ dễ hiểu hơn. Đầu tiên là single-{post-type}-{slug}.php, có ví dụ cụ thể là single-product-ca-12.php, (ví dụ về cửa hàng online). Nói cách khác, WordPress sẽ tìm một template file duy nhất cho mỗi bài viết, bên trong một category nhất định. Nếu WordPress không tìm thấy đúng template, nó sẽ sử dụng single-{post-type}.php và tiếp tục cho đến khi nó file index.php cuối cùng.

Thực tế sử dụng, thì phương pháp này sẽ giúp bạn tùy chỉnh mẫu website cho từng bài viết hoặc từng sản phẩm một. Nếu bạn thích tạo mẫu riêng cho toàn bộ bài viết, thì hãy sử dụng file single.php.

3.  Single Pages

Single pages rơi vào category riêng của nó trong WordPress. Ví dụ, website Hostinger có https://www.hostinger.com là trang chủ. Khi truy cập nó sẽ tải lên template front-page.php. Những phần khác của website, như là https://www.hostinger.com/web-hosting, sẽ rơi vào trường hợp single pages.

Một single page sẽ tuân thủ hierarchy sau:

1. File template riêng
2. page–{slug}.php
3. page-{id}.php
4. page.php
5. singular.php
6. index.php

Bạn thấy là ưu tiên đầu tiên không phải là tên file. Vì WordPress có thể nhiều loại nội dung là single pages. Ví dụ, nếu bạn đang làm việc với bài viết, WordPress sẽ mặc định đưa nó vào cấu trúc ở trên. Singles page (ví dụ /web-hosting), mặc khác có template riêng nên WordPress sẽ ưu tiên template này trước, rồi tới page-slug.php. Trong ví dụ của chúng ta, file này sẽ là page-web-hosting.php (nếu nó tồn tại).

Tiếp theo, cấu trúc phân cấp hierarchy sẽ hoạt động tương tự như ở bài viết riêng lẽ. WordPress sẽ tìm ID cho khớp, cho đến khi đi tới file index.php. 

4. Category và Tag Pages

Template của hierarchy này theo thứ tự sẽ được gọi đến là:

1. category–{slug}.php
2. category-{id}.php
3. category.php
4. archive.php
5. index.php

Cấu trức thứ bậc này hoạt động giống như single post và page (bài viết riêng lẻ và trang riêng lẻ). WordPress sẽ tìm template khớp với category nó muốn tải, bằng cách tìm dựa trên filename mà có thêm slug vào, sau đó nó sẽ chuyển tới ID. Nếu thất bại, nó sẽ tiếp tục tìm tới file category.php, rồi tiếp theo là archive.php. WordPress archive sẽ bao gồm post từ tất cả mọi categories, đó là lý do vì sao archive.php lại nằm trong đúng hierarchy này.

Chúng tôi cũng thêm WordPress tags vào mục này, vì cả 2 đều là yếu tố phân loại (taxonomic elements). Thêm nữa, hierachies của chúng ta là y hệt nhau, ngoại trừ việc bản chỉ cần thay category thành tag. category-{slug}.php thành tag-{slug}.php. Như vậy hirerchy của tag pages sẽ là:

1. tag–{slug}.php
2. tag-{id}.php
3. tag.php
4. archive.php
5. index.php

5. Custom Post Types

Nếu vẫn chưa biết về khái niệm custom post type., hãy đọc bài viết này.  Cơ bản chúng là loại nội dung không rơi và những loại mặc định có sẵn của WordPress. Ví dụ, nếu bạn vận hành một blog thiên về đánh giá sản phẩm, bạn sẽ cần tạo một loại custom post type gọi là reviews rồi tùy chỉnh sao cho nó có thêm nhiều tính năng để đánh giá.

WordPress template hierarchy của custom post type như sau:

1. archive-{post_type}.php
2. archive.php
3. index.php

Như bạn thấy, hierarchy không giống những loại khác. Tuy nhiên, bạn vẫn có nhiều lớp để chỉnh sửa trước khi rơi vào index.php, đủ để bạn tạo ra những trang web phức tạp.

6. Trang kết quả tìm kiếm

WordPress hierarchy của loại trang kết quả tìm kiếm (search result pages) này rất đơn giản như sau:

1. search.php
2. index.php

Trong trường hợp này, mặc định WordPress sẽ dùng index.php ngay nếu nó không tìm thấy custom template cho trang kết quả tìm kiếm. Hầu hết các theme hiện đại sẽ có một vài tùy chỉnh riêng cho trang search.

7. Trang lỗi 404 (404 error pages)

Trang lỗi là một trang không người dùng nào muốn thấy. Nhưng nó quan trọng trong một số trường hợp nhất định. WordPress không có file template riêng cho trang lỗi 404. Nhưng cũng dễ nếu bạn muốn tạo trang như vậy.

Nếu bạn tạo trang lỗi riêng, WordPress sẽ mở nó ra trước, theo thứ tự WordPress hierarchy sau:

1. 404.php
2. index.php

Theo ý kiến của chúng tôi, bạn cũng nên bỏ ít thời gian để cài đặt custom error page nếu bạn có traffic lớn. Bằng cách này, bạn sẽ không làm khách truy cập bỏ ngay đi khi lỗi chẳng may xảy ra.

Cách hoạt động thực tế của WordPress Template Hierarchy

Ở phần cuối này, chúng tôi sẽ chỉ bạn xem cách hoạt động thực tế của WordPress Template Hierarchy. Chúng tôi sẽ dùng hypothetical website làm ví dụ.

Hãy tưởng tượng bạn đã tạo một trang chủ, với vài single page, và nhiều bài viết khác nhau. Bạn cũng đang sử dụng thêm có những template file sau:

Đây là một bộ templates file khá đơn giản. Trong trường hợp này, nếu bạn truy cập vào trang chủ, WordPress sẽ tải template home.php lên.

Một số ví dụ khác của các trang bạn có thể truy cập, và các template file theo wp hierarchy nó sẽ sử dụng:

Có nhiều ví dụ khác, nhưng như vậy chắc đã đủ để bạn hình dung site sẽ hoạt động như thế nào. Template nào WordPress sẽ dùng được quyết định bởi files nào của theme đã được thiết lập. Và theo cấu trúc wp hierarchy, thứ tự cấp bậc sử dụng sẽ khiến WordPress hoạt động một cách trật tự. Hy vọng, những thông tin này sẽ hữu ích để bạn có thể làm việc với theme hoặc wp hierarchy trong tương lai.

Lời kết

WP hierarchy dường như có vẻ rất phức tạp. Tuy nhiên, ở bài viết trên, chúng tôi đã đơn giản hóa mọi việc bằng cách cho bạn biết template files nào ưu tiên hơn template nào. Chỉ với các thông tin này thôi, bạn đã đủ để biết cần dùng file nào để chỉnh sửa hoặc không cần dùng file nào trong WordPress theme của bạn.

Bạn có thắc mắc gì về cấu trúc WordPress template hierarchy không? Hay nó không hoạt động giống như vậy ở trên website của bạn? Hãy cứ hỏi chúng tôi ở bình luận bên dưới nhé!