短代码回调必须返回字符串或什么都不返回。他们不能直接打印任何内容，因为这将创建一个即时输出，正如您在示例中看到的那样。我们已经有了一些关于这方面的话题。我冒昧地重新回答了你的问题，因为你说其他答案对你没什么帮助。：）

几乎每个直接打印内容的函数（通常在WordPress中称为模板标记）都有一个等价的返回字符串的函数，或者一个改变返回行为的参数。the_date() is a notable exception.

您可以通过查看本地WordPress副本中的源代码，或者访问developer manual 并搜索要替换的函数。此处将提到等效字符串。

现在，知道了这一点，您如何将其应用到自己的代码中？很明显，你不能再使用这样的东西了：

<?php 
// some code 
?>
some HTML
<?php
// more code
?>

…因为一些HTML将直接打印，而这正是我们不想要的。

我们必须写下：

<?php 
// some code 

$output = \'some HTML\';

// more code

return $output;
?>

这意味着，我们需要返回字符串的函数，将这些字符串插入到一些HTML中，最后将结果作为字符串返回。

下面是我将如何重写您的示例。请注意，我没有测试它。您可能会遇到一些以后必须修复的错误。：）

function show_product_pages() {

    $post = get_post();

    // Just in case the shortcode has been used in the wrong context.
    if ( empty( $post ) ) {
        return;
    }

    $child_pages = new WP_Query([
        \'post_type\'   => \'page\',
        \'post_parent\' => $post->ID,

    ]);

    // Always return as early as possible.
    if ( ! $child_pages->have_posts() ) {
        return;
    }

    $output = \'\';

    while ( $child_pages->have_posts() ) {
        // Set up post data.
        $child_pages->the_post();

        // Keep the dynamic values and the HTML template a bit separated.
        // Makes both parts easier to read, and we don\'t have to call a 
        // function twice.
        $url     = apply_filters( \'the_permalink\', get_permalink() );
        $thumb   = get_the_post_thumbnail( null, [240, 240]);
        $title   = the_title( \'\', \'\', FALSE );
        $content = apply_filters( \'the_content\', get_the_content() );

        // Now we add the HTML to $output.
        $output .= \'
        <div class="col col-md-4">
            <a href="\' . $url . \'">
                <div class="product_thumb">\' . $thumb . \'</div>
                <h3 class="product_title">\' . $title . \'</h3>
            </a>
            <div class="product-desc">\' . $content . \'</div>
            <a class="cta-link" href="\' . $url . \'">Learn More</a>
        </div>
        \';
    }

    // Clean up what we have done to the global context.
    wp_reset_postdata();

    // We add the container and return the whole string.
    return \'<div class="columns product-archives">\' . $output . \'</div>\';
}

就这样。有很多方法可以将动态逻辑和HTML进一步分离，但对于这样一个简单的情况，就可以了。