如何在WordPress循环中移除第10和25个元素的<a>标签？

需求说明 #

需要在WordPress自定义循环里，给第10个和第25个合作伙伴元素移除包裹图片的<a>标签，其余元素保留链接功能。

原代码 #

function myFunction() {
        $markup = '';
        
        $args = array(  
            'post_type' => 'partner',
            'post_status' => 'publish',
            'posts_per_page' => -1, 
            'orderby' => 'menu_order', 
            'order' => 'ASC',
            'tax_query' => array(
                array (
                    'taxonomy' => 'partner_type',
                    'field' => 'slug',
                    'terms' => 'national'
                )
            )
        );
        
        $loop = new WP_Query( $args );
        
        if ($loop->found_posts > 0) {
            $markup .= '<div class="container ap-national-partners">';
            $markup .= '<div class="row d-flex align-items-center justify-content-center">';
            
            while ( $loop->have_posts() ) : $loop->the_post();
                $imageId = get_field("logo");
            
                if ($imageId) {
                    $imageDetails = wp_get_attachment_image_src($imageId, 'full');
                    
                    if ($imageDetails !== false) {
                        $markup .= '<div class="col-2 mt-5">';
                        $markup .= '<a href="' . get_field("url") . '" target="_blank">';
                        $markup .= '<img src="' . $imageDetails[0] . '" class="img-fluid" alt="' . get_the_title() . '" width="' . $imageDetails[1] . '" height="' . $imageDetails[2] . '" />';
                        $markup .= '</a>';
                    }
                }
                
                $markup .= '</a>'; // 此处存在多余闭合标签，会导致HTML结构错误
                $markup .= '</div>';
            endwhile;
            
            wp_reset_postdata();
            
            $markup .= '</div>';
            $markup .= '</div>';
        }
        
        return $markup;
    }

无效尝试代码 #

if ($imageDetails == 25) {
     $markup .= '<div class="col-2 mt-5">';
     $markup .= '<img src="' . $imageDetails[0] . '" class="img-fluid" alt="' . get_the_title() . '" width="' . $imageDetails[1] . '" height="' . $imageDetails[2] . '" />';
     $markup .= '</a>';
}

解决方法 #

你之前的尝试错误在于拿图片信息数组$imageDetails和数字25做比较，两者完全不相关。正确做法是用计数器跟踪循环的当前位置，根据位置决定是否添加<a>标签，同时修正原代码中的标签闭合bug：

1. 在循环前初始化计数器$counter = 0;
2. 每次循环开始时递增计数器
3. 判断计数器是否为10或25，若为这两个值则不包裹<a>标签，其余情况正常添加链接
4. 移除原代码中多余的</a>标签

修改后的完整代码 #

function myFunction() {
    $markup = '';
    
    $args = array(  
        'post_type' => 'partner',
        'post_status' => 'publish',
        'posts_per_page' => -1, 
        'orderby' => 'menu_order', 
        'order' => 'ASC',
        'tax_query' => array(
            array (
                'taxonomy' => 'partner_type',
                'field' => 'slug',
                'terms' => 'national'
            )
        )
    );
    
    $loop = new WP_Query( $args );
    
    if ($loop->found_posts > 0) {
        $markup .= '<div class="container ap-national-partners">';
        $markup .= '<div class="row d-flex align-items-center justify-content-center">';
        
        // 初始化循环计数器
        $counter = 0;
        
        while ( $loop->have_posts() ) : $loop->the_post();
            // 每次循环递增计数器，对应当前元素的位置
            $counter++;
            $imageId = get_field("logo");
        
            if ($imageId) {
                $imageDetails = wp_get_attachment_image_src($imageId, 'full');
                
                if ($imageDetails !== false) {
                    $markup .= '<div class="col-2 mt-5">';
                    
                    // 非第10、25个元素时添加链接标签
                    if ($counter !== 10 && $counter !== 25) {
                        $markup .= '<a href="' . get_field("url") . '" target="_blank">';
                    }
                    
                    $markup .= '<img src="' . $imageDetails[0] . '" class="img-fluid" alt="' . get_the_title() . '" width="' . $imageDetails[1] . '" height="' . $imageDetails[2] . '" />';
                    
                    // 对应上面的判断，非目标元素时闭合链接标签
                    if ($counter !== 10 && $counter !== 25) {
                        $markup .= '</a>';
                    }
                    
                    $markup .= '</div>';
                }
            } else {
                // 无图片时输出空容器，保持布局一致性
                $markup .= '<div class="col-2 mt-5"></div>';
            }
        endwhile;
        
        wp_reset_postdata();
        
        $markup .= '</div>';
        $markup .= '</div>';
    }
    
    return $markup;
}

关键说明 #

• 计数器从1开始递增，确保对应元素的实际位置
• 严格判断$counter !== 10 && $counter !==25，精准控制目标元素的链接移除
• 修复了原代码中多余的</a>标签，避免HTML结构错误
• 增加无图片时的空容器处理，保证布局整齐

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