Tìm hiểu WordPress Template Hierarchy

Tìm hiểu WordPress Template Hierarchy

WordPress Template Hierarchy là hệ thống mà WordPress sử dụng để quyết định file nào sẽ được tải khi hiển thị nội dung. Hiểu rõ hệ thống này giúp bạn xây dựng theme dễ dàng và tùy chỉnh chính xác từng loại nội dung.

Cách hoạt động của Template Hierarchy#

Khi bạn truy cập một trang trên website, WordPress sẽ duyệt qua danh sách các tệp theo thứ tự ưu tiên để tìm tệp phù hợp nhất. Nếu không tìm thấy tệp cụ thể, WordPress sẽ dùng tệp chung hơn.

Sơ đồ Template Hierarchy#

1. Trang chủ (Home Page)

  • Trang chính của website. Thứ tự ưu tiên:
  1. front-page.php (nếu được thiết lập trong Settings > Reading).
  2. home.php (trang blog chính nếu không có front-page.php).
  3. index.php.

2. Trang bài viết chi tiết (Single Post)

  • Hiển thị chi tiết một bài viết. Thứ tự ưu tiên:
  1. single-{post-type}.php (nếu bạn dùng Custom Post Type, ví dụ: single-product.php).
  2. single.php.
  3. index.php.

3. Trang trang (Page)

  • Hiển thị nội dung của một trang (Page). Thứ tự ưu tiên:
  1. page-{slug}.php (ví dụ: page-about.php cho trang "About").
  2. page-{id}.php (ví dụ: page-12.php cho trang có ID là 12).
  3. page.php.
  4. index.php.

4. Trang danh mục (Category Archive)

  • Hiển thị bài viết trong một danh mục cụ thể. Thứ tự ưu tiên:
  1. category-{slug}.php (ví dụ: category-news.php cho danh mục "News").
  2. category-{id}.php (ví dụ: category-5.php cho danh mục có ID là 5).
  3. category.php.
  4. archive.php.
  5. index.php.

5. Trang thẻ (Tag Archive)

  • Hiển thị bài viết có cùng thẻ (tag). Thứ tự ưu tiên:
  1. tag-{slug}.php (ví dụ: tag-travel.php cho thẻ "Travel").
  2. tag-{id}.php (ví dụ: tag-10.php cho thẻ có ID là 10).
  3. tag.php.
  4. archive.php.
  5. index.php.

6. Trang lưu trữ (Archive)

  • Hiển thị danh sách bài viết của post type hoặc taxonomy. Thứ tự ưu tiên:
  1. archive-{post-type}.php (ví dụ: archive-product.php cho post type "Product").
  2. archive.php.
  3. index.php.

7. Trang tìm kiếm (Search Results)

  • Hiển thị kết quả tìm kiếm. Thứ tự ưu tiên:
  1. search.php.
  2. index.php.

8. Trang lỗi 404

  • Hiển thị khi không tìm thấy nội dung. Thứ tự ưu tiên:
  1. 404.php.
  2. index.php.

9. Trang tác giả (Author Archive)

  • Hiển thị bài viết của một tác giả. Thứ tự ưu tiên:
  1. author-{slug}.php (ví dụ: author-john.php cho tác giả "John").
  2. author-{id}.php (ví dụ: author-3.php cho tác giả có ID là 3).
  3. author.php.
  4. archive.php.
  5. index.php.

10. Trang ngày tháng (Date Archive)

  • Hiển thị bài viết theo ngày, tháng, hoặc năm. Thứ tự ưu tiên:
  1. date.php.
  2. archive.php.
  3. index.php.

Ví dụ chi tiết#

1. Tạo một file category.php

<?php
get_header();
?>
<h1><?php single_cat_title(); ?></h1>
<?php
if (have_posts()) :
    while (have_posts()) :
        the_post();
        ?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt(); ?></p>
        <?php
    endwhile;
else :
    echo '<p>No posts found.</p>';
endif;
get_footer();
?>

2. Tạo file single-product.php (Custom Post Type)

<?php
get_header();
?>
<article>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
    <p>Price: <?php echo get_post_meta(get_the_ID(), 'price', true); ?></p>
</article>
<?php
get_footer();
?>

3. Tạo file search.php

<?php
get_header();
?>
<h1>Search Results for: <?php echo get_search_query(); ?></h1>
<?php
if (have_posts()) :
    while (have_posts()) :
        the_post();
        ?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt(); ?></p>
        <?php
    endwhile;
else :
    echo '<p>No results found.</p>';
endif;
get_footer();
?>

Lưu ý khi sử dụng Template Hierarchy#

  1. Tạo tệp cụ thể trước, tệp chung sau:
    • Nếu bạn cần tùy chỉnh chỉ cho một loại nội dung, hãy tạo tệp cụ thể như single-product.php.
    • Nếu muốn áp dụng cho tất cả, dùng các tệp chung như single.php.
  2. Sử dụng chức năng get_template_part():
    • Chia nhỏ giao diện thành các phần để tái sử dụng, ví dụ:
      <?php get_template_part('template-parts/content', 'single'); ?>
  3. Kết hợp với functions.php để tăng hiệu quả:
    • Đăng ký Custom Post Type, Taxonomy, hoặc Meta Box trong functions.php.
Hiểu và sử dụng đúng Template Hierarchy giúp bạn phát triển theme nhanh hơn, dễ bảo trì, và tăng tính linh hoạt khi cần mở rộng! 🎯
Nội dung bài viết
Chưa có đánh giá. Hãy là người đánh giá đầu tiên.

Bài viết liên quan