实现父分类术语页面展示子分类术语名称、图片并链接至子页面

Got it, let's work through this together. The main issue here is that you're linking child terms back to the parent page instead of their own individual term pages. Below are step-by-step fixes for common CMS platforms, plus the core logic you can adapt to other systems.

For WordPress #

1. Fetch Child Terms #

First, make sure you're pulling the right child terms for the current parent page. Add this to your taxonomy template file (like taxonomy-{taxonomy}.php):

// Get the current parent term being viewed
$parent_term = get_queried_object();

// Fetch all direct child terms of this parent
$child_terms = get_terms([
    'taxonomy' => $parent_term->taxonomy,
    'parent' => $parent_term->term_id,
    'hide_empty' => false // Set to true if you want to hide terms with no posts
]);

2. Loop Through and Display Child Terms with Correct Links & Images #

Next, loop through the child terms to render each one with its name, image, and link to its own page. Note: This assumes you're using a custom term meta field (like term_image) to store the term's image—replace that with your actual field name if different.

if (!empty($child_terms) && !is_wp_error($child_terms)) {
    echo '<div class="child-terms-container">';
    foreach ($child_terms as $child) {
        // Get the child term's permalink (this is the key fix!)
        $child_link = get_term_link($child);
        // Get the term's image URL
        $term_image_id = get_term_meta($child->term_id, 'term_image', true);
        $term_image_url = wp_get_attachment_image_url($term_image_id, 'medium'); // Adjust image size as needed

        // Render the child term item
        echo '<a href="' . esc_url($child_link) . '" class="child-term-card">';
            if ($term_image_url) {
                echo '<img src="' . esc_url($term_image_url) . '" alt="' . esc_attr($child->name) . '" />';
            }
            echo '<h4>' . esc_html($child->name) . '</h4>';
        echo '</a>';
    }
    echo '</div>';
}

Key Fixes Here: #

• Use get_term_link($child) instead of the parent term's URL—this ensures each link points to the child's own page.
• Use esc_url() and esc_html() to sanitize outputs and avoid security risks.
• Pull the image from the child term's own metadata, not the parent's.

For Drupal #

1. Load Child Terms in a Preprocess Function #

Add this to your theme's .theme file to pass child terms to the template:

function YOUR_THEME_preprocess_taxonomy_term(&$variables) {
    $term = $variables['elements']['#taxonomy_term'];
    // Load direct child terms of the current parent
    $variables['child_terms'] = \Drupal::entityTypeManager()
        ->getStorage('taxonomy_term')
        ->loadTree($term->bundle(), $term->id(), 1);
}

2. Render Child Terms in the Twig Template #

Edit your taxonomy-term.html.twig file to display the child terms:

{% if child_terms %}
    <div class="child-terms-grid">
        {% for child in child_terms %}
            {% set child_term = child.entity %}
            {% set child_link = child_term.toUrl() %}
            {% set child_image = child_term.field_term_image.entity %} {# Replace with your image field name #}
            
            <a href="{{ child_link }}" class="child-term-item">
                {% if child_image %}
                    <img src="{{ child_image.url() }}" alt="{{ child_term.name.value }}" />
                {% endif %}
                <h3>{{ child_term.name.value }}</h3>
            </a>
        {% endfor %}
    </div>
{% endif %}

Core Logic for Any Platform #

No matter what system you're using, the steps are the same:

• Fetch: Get all direct child terms associated with the current parent term.
• Retrieve: For each child term, grab its unique permalink, display name, and associated image.
• Render: Wrap the image and name in a link that points to the child term's own page.

内容的提问来源于stack exchange，提问作者shah