Timber Twig文件循环开发：WordPress自定义分类及文章列表展示需求

Let's break this down into two key parts: making sure your PHP is passing the right structured data to Twig, then finishing the Twig template to render everything exactly as you need.

1. PHP: Structure Your Data Properly #

First, let's confirm you're fetching the type terms along with their associated products posts (limited to 3 per term). Here's a clean way to build that data array and pass it to your Twig template:

// Fetch the ~6 'type' terms you want to display
$taxonomy_terms = get_terms([
    'taxonomy' => 'type',
    'number' => 6,
    'hide_empty' => true, // Only show terms with at least one product
]);

$terms_with_posts = [];

foreach ($taxonomy_terms as $term) {
    // Get 3 products linked to this term
    $product_query = new WP_Query([
        'post_type' => 'products',
        'posts_per_page' => 3,
        'tax_query' => [
            [
                'taxonomy' => 'type',
                'field' => 'slug',
                'terms' => $term->slug,
            ],
        ],
        'no_found_rows' => true, // Optimize query since we don't need pagination
    ]);

    // Package term data + its posts into our array
    $terms_with_posts[] = [
        'name' => $term->name,
        'description' => $term->description,
        'posts' => $product_query->posts,
    ];

    // Reset post data to avoid conflicts with other queries
    wp_reset_postdata();
}

// Pass the structured data to your Twig template
echo $twig->render('your-template.twig', [
    'product_types' => $terms_with_posts,
]);

This ensures each term has its name, description, and a max of 3 related products ready to be rendered.

2. Twig: Render the Terms and Posts #

Now let's build out the Twig template to display each term's section. We'll loop through the product_types array, render the term header, description, then list the associated products:

<div class="product-type-grid">
    {% for type in product_types %}
        <section class="product-type-card">
            <!-- Term Name -->
            <h2 class="type-heading">{{ type.name }}</h2>
            
            <!-- Term Description (only show if it exists) -->
            {% if type.description %}
                <p class="type-blurb">{{ type.description }}</p>
            {% endif %}
            
            <!-- Associated Products -->
            <div class="product-list">
                {% if type.posts|length > 0 %}
                    {% for post in type.posts %}
                        <article class="product-item">
                            <h3><a href="{{ get_permalink(post.ID) }}">{{ post.post_title }}</a></h3>
                            <!-- Add extra post details (excerpt, thumbnail, etc.) if needed -->
                            {% if post.post_excerpt %}
                                <p class="product-excerpt">{{ post.post_excerpt }}</p>
                            {% endif %}
                        </article>
                    {% endfor %}
                {% else %}
                    <p class="no-products">No products available in this category yet.</p>
                {% endif %}
            </div>
        </section>
    {% endfor %}
</div>

Quick Tips: #

• We added checks for empty descriptions and empty product lists to avoid rendering unnecessary space or broken content.
• If you want to include post thumbnails, you can use get_the_post_thumbnail(post.ID) (just make sure this WordPress function is registered in your Twig environment, or pass the thumbnail URL directly via PHP).
• You can style the .product-type-grid, .product-type-card, and .product-item classes to match your site's design.

内容的提问来源于stack exchange，提问作者Saúl Solórzano