首页 > 解决方案 > 循环时短代码破坏 ACF 灵活部分

问题描述

使用 Wordpress 的高级自定义字段 (ACF) 灵活部分,我有各种效果很好的灵活字段。我已经使用 ACF 多年,并且最近开始使用灵活的部分。

我注意到,当我将短代码插入灵活部分(WYSWIG 编辑器或类似内容)时,它会中断循环,并且以下灵活部分都不会出现在页面上或检查器/DOM 中。我认为简码打破了while循环。

这是我当前尝试在页面中插入的简码。它可以工作,但是之后的其余页面部分丢失了。

function spotlight_boxes( $atts ){
        $args = array( 'post_type' => 'customer-spotlight', 'posts_per_page' => -1, 'post_status' => 'publish' );
        $loop = new WP_Query( $args );

        $loopTitle = $atts['title'];

        ob_start(); ?>
        <section class="feature-boxes page">
            <h2 class="center std section-title"><?php echo $loopTitle; ?></h2>
            <div class="small-wrap">
                <div class="boxes flex">
                    <?php while ( $loop->have_posts() ) : $loop->the_post(); 
                        $customer_logo = get_field("customer_logo");
                        ?> 
                        <div class="feature-box">
                            <span class="tag-btn">Spotlight</span>
                            <img src="<?php the_post_thumbnail_url(); ?>" width="100%"/>
                            <div class="feature-info">
                                <img src="<?php echo $customer_logo['sizes']['medium']; ?>" width="100%">
                                <h5 class="std"><?php the_field('overview_title'); ?></h5>
                                <a href="<?php the_permalink(); ?>" class="learnmore">Learn More</a>
                            </div>
                        </div>
                    <?php endwhile; ?>
                </div>
            </div>
        </section>
        <?php

        return ob_get_clean();
}
add_shortcode( 'spotlight_boxes', 'spotlight_boxes' );

标签: wordpressadvanced-custom-fields

解决方案


这是因为您正在通过曾经被短代码替换的功能生成内容。如Wordpress Codex中所述,短代码调用的函数不应产生任何类型的输出。简码函数应返回用于替换简码的文本。直接产生输出会导致意想不到的结果。这类似于过滤器函数的行为方式,因为它们不应从调用中产生预期的副作用,因为您无法控制调用它们的时间和位置。

例如,如果您正在创建一个需要用简码替换的 HTML,则示例返回应该类似于

$html = '<div class="test-field">';
$html .= get_field('test-field');
$html .= '</div>';
return $html;

而不是这样

the_field('test-field');

推荐阅读