Tạo custom single post template WordPress

2 tháng ago, WordPress Themes, Views

Tại Sao Cần Custom Single Post Template Trong WordPress?

Khi sử dụng WordPress, bạn có thể nhận thấy rằng tất cả các bài viết (posts) của bạn đều sử dụng chung một giao diện. Mặc dù điều này có thể đủ dùng cho một số trang web, nhưng đôi khi bạn muốn hiển thị các bài viết khác nhau theo những cách khác nhau. Ví dụ, bạn có thể muốn một template đặc biệt cho các bài đánh giá sản phẩm, một template khác cho các bài hướng dẫn, và một template hoàn toàn khác cho các bài tin tức.

Custom single post template cho phép bạn kiểm soát giao diện của từng bài viết một cách độc lập. Điều này mang lại sự linh hoạt cao và giúp bạn tạo ra trải nghiệm người dùng tốt hơn bằng cách trình bày nội dung theo cách phù hợp nhất.

Việc tạo custom single post template cũng hữu ích trong việc:

Tối ưu hóa trải nghiệm người dùng: Hiển thị thông tin liên quan một cách rõ ràng và dễ tiếp cận.
Cải thiện SEO: Cấu trúc nội dung bài viết theo cách thân thiện với các công cụ tìm kiếm.
Tăng tính thẩm mỹ: Tạo ra giao diện độc đáo và chuyên nghiệp cho trang web của bạn.

Các Cách Tạo Custom Single Post Template

Có nhiều cách để tạo custom single post template trong WordPress. Dưới đây là một số phương pháp phổ biến nhất:

1. Tạo Template Bằng File PHP

Đây là phương pháp truyền thống và yêu cầu bạn phải có kiến thức về PHP, HTML, và CSS. Bạn sẽ tạo một file PHP mới trong theme của bạn và sử dụng code để hiển thị nội dung bài viết.

Tạo file PHP mới: Tạo một file PHP mới trong thư mục theme của bạn. Ví dụ: single-product.php. Tên file cần tuân theo quy tắc đặt tên của WordPress.
Sao chép nội dung từ single.php: Sao chép toàn bộ nội dung từ file single.php (template mặc định cho single post) vào file mới của bạn.
Chỉnh sửa code: Chỉnh sửa code trong file mới để tạo giao diện mong muốn. Sử dụng các hàm của WordPress như the_title(), the_content(), the_post_thumbnail() để hiển thị nội dung bài viết.
Chỉ định template cho bài viết: Có nhiều cách để chỉ định template cho một bài viết cụ thể. Bạn có thể sử dụng custom field, plugin, hoặc viết code để xác định bài viết nào sẽ sử dụng template mới của bạn.

Ví dụ:

  
  <?php
  /**
   * Template Name: Product Template
   */

  get_header();

  while ( have_posts() ) :
    the_post();
  ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
      </header><!-- .entry-header -->

      <div class="entry-content">
        <?php the_content(); ?>

        <?php if ( function_exists( 'the_product_price' ) ) {
          the_product_price();
        } ?>
      </div><!-- .entry-content -->

    </article><!-- #post-<?php the_ID(); ?> -->

  <?php
  endwhile; // End of the loop.

  get_footer();
  ?>

2. Sử Dụng Plugin

Nếu bạn không muốn viết code, bạn có thể sử dụng một plugin để tạo custom single post template. Có rất nhiều plugin miễn phí và trả phí có sẵn trên thị trường, mỗi plugin có những tính năng và ưu điểm riêng.

Một số plugin phổ biến bao gồm:

Elementor: Một page builder mạnh mẽ cho phép bạn tạo custom template một cách trực quan.
Divi Builder: Tương tự như Elementor, Divi Builder cũng là một page builder kéo thả mạnh mẽ.
Beaver Builder: Một lựa chọn khác cho page builder với giao diện thân thiện và dễ sử dụng.
Custom Post Type UI: Cho phép bạn tạo custom post type và sau đó sử dụng các template khác nhau cho từng post type.

Ưu điểm của việc sử dụng plugin:

Dễ sử dụng: Giao diện trực quan, kéo thả, không yêu cầu kiến thức code.
Tiết kiệm thời gian: Tạo template nhanh chóng và dễ dàng.
Nhiều tính năng: Các plugin thường đi kèm với nhiều tính năng bổ sung như thư viện template, tích hợp với các plugin khác, v.v.

Nhược điểm của việc sử dụng plugin:

Có thể làm chậm trang web: Một số plugin có thể nặng và làm chậm tốc độ tải trang.
Phụ thuộc vào plugin: Nếu plugin ngừng được hỗ trợ hoặc bị gỡ bỏ, template của bạn có thể bị ảnh hưởng.
Giới hạn tùy biến: Một số plugin có thể giới hạn khả năng tùy biến so với việc viết code trực tiếp.

3. Sử Dụng Child Theme

Bất kể bạn chọn phương pháp nào để tạo custom single post template, điều quan trọng là phải sử dụng child theme. Child theme là một theme con kế thừa tất cả các tính năng và giao diện của theme cha (parent theme), nhưng cho phép bạn tùy chỉnh mà không ảnh hưởng đến theme cha.

Tại sao cần sử dụng child theme?

Bảo vệ các tùy chỉnh của bạn: Khi theme cha được cập nhật, tất cả các tùy chỉnh bạn đã thực hiện trực tiếp trong theme cha sẽ bị mất. Child theme giúp bạn tránh được điều này.
Dễ dàng cập nhật theme: Bạn có thể cập nhật theme cha một cách an toàn mà không lo lắng về việc mất các tùy chỉnh của mình.
Tổ chức code tốt hơn: Child theme giúp bạn tách biệt các tùy chỉnh của mình khỏi code gốc của theme cha, giúp code dễ đọc và dễ bảo trì hơn.

Cách tạo child theme:

Tạo thư mục child theme: Tạo một thư mục mới trong thư mục wp-content/themes/. Tên thư mục thường là tên theme cha cộng với “-child”. Ví dụ: twentytwentyone-child.
Tạo file style.css: Tạo một file style.css trong thư mục child theme của bạn và thêm thông tin sau:

  
  /*
   Theme Name:   Twenty Twenty-One Child
   Theme URI:    http://example.com/twenty-twenty-one-child/
   Description:  Twenty Twenty-One Child Theme
   Author:       John Doe
   Author URI:   http://example.com
   Template:     twentytwentyone
   Version:      1.0.0
  */

  @import url('../twentytwentyone/style.css');

  /*
   Add your styles here
  */

Lưu ý: Thay thế Twenty Twenty-One bằng tên theme cha của bạn và twentytwentyone trong dòng Template:.

Kích hoạt child theme: Truy cập trang quản trị WordPress của bạn, vào “Appearance” -> “Themes” và kích hoạt child theme của bạn.

Ví Dụ Cụ Thể: Tạo Single Post Template Cho Bài Đánh Giá Sản Phẩm

Giả sử bạn muốn tạo một template đặc biệt cho các bài đánh giá sản phẩm. Template này sẽ hiển thị thông tin sản phẩm, đánh giá của bạn, và xếp hạng (rating).

Sử dụng File PHP:

Tạo file single-review.php trong thư mục child theme của bạn.
Sao chép nội dung từ single.php vào single-review.php.
Chỉnh sửa single-review.php để thêm các trường thông tin sản phẩm, đánh giá, và xếp hạng. Bạn có thể sử dụng custom field để lưu trữ các thông tin này.
Sử dụng plugin như “Advanced Custom Fields” (ACF) để tạo các custom field cho thông tin sản phẩm (ví dụ: tên sản phẩm, hình ảnh, giá cả, v.v.).
Trong single-review.php, sử dụng các hàm của ACF để hiển thị giá trị của các custom field. Ví dụ: get_field('product_name').
Thêm logic để chỉ định template single-review.php cho các bài đánh giá sản phẩm. Bạn có thể sử dụng custom field hoặc taxonomy để xác định các bài đánh giá sản phẩm.

Sử dụng Plugin (ví dụ: Elementor):

Cài đặt và kích hoạt Elementor.
Tạo một template mới trong Elementor và chọn loại “Single Post”.
Thiết kế template của bạn bằng cách sử dụng giao diện kéo thả của Elementor.
Sử dụng các widget của Elementor để hiển thị tiêu đề bài viết, nội dung, hình ảnh, và các thông tin khác.
Sử dụng dynamic content của Elementor để hiển thị giá trị của các custom field (ví dụ: thông tin sản phẩm, đánh giá, xếp hạng).
Chỉ định template mới cho các bài đánh giá sản phẩm bằng cách sử dụng điều kiện hiển thị của Elementor.

Kết Luận

Tạo custom single post template trong WordPress là một cách tuyệt vời để tùy chỉnh giao diện trang web của bạn và cải thiện trải nghiệm người dùng. Bạn có thể chọn phương pháp phù hợp nhất với kỹ năng và nhu cầu của mình, cho dù đó là viết code trực tiếp, sử dụng plugin, hay kết hợp cả hai. Quan trọng nhất là phải sử dụng child theme để bảo vệ các tùy chỉnh của bạn và đảm bảo rằng trang web của bạn luôn được cập nhật và an toàn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa