Tạo archive page cho custom post types WordPress

Giới thiệu về Archive Page và Custom Post Types trong WordPress

Trong WordPress, archive page là trang hiển thị danh sách các bài viết theo một tiêu chí nhất định, chẳng hạn như theo tháng, theo năm, theo tác giả, hoặc theo category/tag. Đối với custom post types (CPTs), archive page cho phép bạn hiển thị danh sách các bài viết thuộc CPT đó một cách có cấu trúc và dễ điều hướng.

Custom Post Types (CPTs) là tính năng mạnh mẽ của WordPress cho phép bạn tạo các loại nội dung tùy chỉnh, khác biệt so với các bài viết (posts) và trang (pages) mặc định. Ví dụ, bạn có thể tạo CPT “Sản phẩm” cho website bán hàng, “Dự án” cho website portfolio, hoặc “Sự kiện” cho website tổ chức sự kiện.

Việc tạo archive page cho CPT là cần thiết để người dùng có thể dễ dàng duyệt xem tất cả các bài viết thuộc CPT đó. Nếu không có archive page, người dùng chỉ có thể truy cập các bài viết riêng lẻ thông qua các đường dẫn trực tiếp, điều này gây khó khăn trong việc khám phá nội dung.

Các Cách Tạo Archive Page cho Custom Post Types

Có nhiều cách để tạo archive page cho CPT trong WordPress, bao gồm:

Sử dụng code (coding)
Sử dụng theme builder (ví dụ: Elementor Pro, Divi Builder)
Sử dụng plugin

Mỗi cách có ưu và nhược điểm riêng. Lựa chọn phương pháp phù hợp phụ thuộc vào trình độ kỹ thuật của bạn, theme bạn đang sử dụng và yêu cầu về tùy biến.

Tạo Archive Page bằng Code (Coding)

Đây là phương pháp linh hoạt nhất nhưng đòi hỏi kiến thức về PHP, HTML và CSS. Các bước thực hiện như sau:

Đăng ký CPT với 'has_archive' => true: Khi đăng ký CPT, hãy đảm bảo bạn đặt tham số 'has_archive' => true. Điều này sẽ báo cho WordPress biết rằng bạn muốn tạo archive page cho CPT này. Ví dụ:


function create_product_post_type() {
    register_post_type( 'product',
        array(
            'labels' => array(
                'name' => __( 'Products' ),
                'singular_name' => __( 'Product' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array( 'slug' => 'products' ),
            'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' )
        )
    );
}
add_action( 'init', 'create_product_post_type' );

Tạo file archive-{post-type}.php: Tạo một file mới trong thư mục theme của bạn với tên archive-{post-type}.php, trong đó {post-type} là slug của CPT bạn đã đăng ký. Ví dụ, nếu CPT của bạn là “product”, bạn sẽ tạo file archive-product.php.

Viết code hiển thị danh sách bài viết: Trong file archive-{post-type}.php, viết code PHP để truy vấn và hiển thị danh sách các bài viết thuộc CPT. Bạn có thể sử dụng vòng lặp WP_Query để lấy các bài viết và hiển thị chúng. Ví dụ:


<?php
get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <?php if ( have_posts() ) : ?>

            <header class="page-header">
                <h1 class="page-title"><?php post_type_archive_title(); ?></h1>
            </header><!-- .page-header -->

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>

                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <header class="entry-header">
                        <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                    </header><!-- .entry-header -->

                    <div class="entry-content">
                        <?php the_excerpt(); ?>
                    </div><!-- .entry-content -->
                </article><!-- #post-## -->

            <?php endwhile; ?>

            <?php the_posts_navigation(); ?>

        <?php else : ?>

            <p><?php _e( 'No products found.', 'your-theme' ); ?></p>

        <?php endif; ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_sidebar();
get_footer();

Tùy chỉnh giao diện (CSS): Sử dụng CSS để tùy chỉnh giao diện của archive page, bao gồm cách hiển thị danh sách bài viết, kiểu chữ, màu sắc, và các thành phần khác.

Tạo Archive Page bằng Theme Builder (Elementor Pro, Divi Builder)

Các theme builder như Elementor Pro và Divi Builder cung cấp giao diện trực quan để tạo archive page cho CPT một cách dễ dàng. Các bước thực hiện chung như sau:

Kích hoạt theme builder: Kích hoạt Elementor Pro hoặc Divi Builder trên website của bạn.
Tạo template Archive: Trong Elementor Pro, bạn sẽ tạo một template Archive mới. Trong Divi Builder, bạn sẽ tạo một theme builder template và chọn Archive.
Chọn CPT: Chỉ định CPT mà bạn muốn áp dụng template archive này.
Thiết kế giao diện: Sử dụng giao diện kéo thả của theme builder để thiết kế giao diện archive page. Bạn có thể sử dụng các widget/module như “Posts”, “Archive Title”, “Featured Image”, và các thành phần khác để hiển thị danh sách bài viết và thông tin liên quan.
Tùy chỉnh cài đặt: Tùy chỉnh các cài đặt như số lượng bài viết hiển thị trên mỗi trang, cách sắp xếp bài viết, và phân trang.
Xuất bản template: Xuất bản template archive để áp dụng cho CPT.

Tạo Archive Page bằng Plugin

Có nhiều plugin WordPress hỗ trợ tạo archive page cho CPT. Một số plugin phổ biến bao gồm:

Custom Post Type UI (CPT UI)
Toolset Types
GeneratePress (với GenerateBlocks)

Ví dụ: Sử dụng Custom Post Type UI (CPT UI)

Cài đặt và kích hoạt plugin CPT UI: Cài đặt và kích hoạt plugin Custom Post Type UI từ WordPress plugin repository.
Đăng ký CPT: Sử dụng CPT UI để đăng ký CPT của bạn. Đảm bảo chọn 'has_archive' => true trong cài đặt CPT.
Tạo template archive (tùy chọn): Nếu bạn muốn tùy chỉnh giao diện archive page, bạn có thể tạo file archive-{post-type}.php trong theme của bạn như đã hướng dẫn ở phần “Tạo Archive Page bằng Code”. Nếu không, WordPress sẽ sử dụng template archive.php hoặc index.php của theme.
Sử dụng shortcode (nếu cần): Một số plugin cung cấp shortcode để hiển thị danh sách bài viết từ CPT trên bất kỳ trang nào.

Tối Ưu SEO cho Archive Page của Custom Post Type

Archive page cho CPT cũng cần được tối ưu SEO để thu hút traffic từ các công cụ tìm kiếm. Các yếu tố cần quan tâm bao gồm:

URL thân thiện: Đảm bảo URL của archive page dễ đọc và chứa keyword liên quan đến CPT. Ví dụ: /products/.
Tiêu đề trang (Title Tag): Sử dụng tiêu đề trang hấp dẫn và chứa keyword quan trọng. Ví dụ: “Sản phẩm mới nhất | Tên Website”. Bạn có thể sử dụng plugin SEO như Yoast SEO hoặc Rank Math để tùy chỉnh tiêu đề trang.
Mô tả trang (Meta Description): Viết mô tả trang ngắn gọn và hấp dẫn, tóm tắt nội dung của archive page và khuyến khích người dùng nhấp vào.
Nội dung chất lượng: Mặc dù archive page chủ yếu là danh sách bài viết, bạn vẫn nên thêm một đoạn giới thiệu ngắn gọn về CPT và nội dung liên quan.
Cấu trúc internal linking: Liên kết từ archive page đến các bài viết riêng lẻ trong CPT và ngược lại. Điều này giúp cải thiện cấu trúc website và điều hướng người dùng.

Kết luận

Tạo archive page cho custom post types là một bước quan trọng để cải thiện trải nghiệm người dùng và tối ưu SEO cho website WordPress của bạn. Bạn có thể lựa chọn phương pháp phù hợp với trình độ kỹ thuật và yêu cầu tùy biến của mình, từ viết code thủ công, sử dụng theme builder, đến dùng plugin. Quan trọng nhất là đảm bảo archive page được thiết kế đẹp mắt, dễ điều hướng và tối ưu SEO để thu hút traffic và tăng khả năng hiển thị trên các công cụ tìm kiếm.

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