按分类的Wordpress帖子-函数输出(HTML)的位置在布局中是不正确的 - Wordpress posts by category - placement of function output (HTML) is incorrect in the layout

我正在尝试加载WordPress中某些类别的帖子。所有这些都工作得很好，但我无法实现所需的HTML结构。我想要的是:

<h2>Heading<a>link</a></h2>
<div class="row">
   ...posts....
</div>

问题是，当我运行下面的代码时，我得到的更像是:

<div>..post...</div>
<div>..post...</div>
<div>..post...</div>
<h2>Heading<a>link</a></h2>
<div class="row"> <!--- empty ---> </div>

我运行下面的代码来查询帖子并在网站上显示它们。请注意我认为问题所在的评论。echo在html标签发布之前执行吗?

<?php
    //Gets category posts
    global $wp_query;
    $cats = get_the_category();
    $tempQuery = $wp_query;
    $currentId = $post->ID;
    // related category posts
    forEach( $cats as $c ) {
        $categoryPosts=" ";
        $newQuery = "posts_per_page=8&cat=" . $c->cat_ID;
        query_posts( $newQuery );
        $count = 0;
        while (have_posts()) {
            the_post();
            if( $count<=8 && $currentId!=$post->ID) {
                $count++;
                $categoryPosts .= get_content();
            }
        }
    ?>
    <!-- The problem probably lies somewhere in this section, but I just cannot figure out what is happening -->
        <h2>More in: <a href="<?php get_category_link($c->cat_ID); ?>"><?php echo $c->cat_name; ?></a></h2>
        <div class="row">
            <?php echo $categoryPosts; ?>
        </div>
        <?php   
    }
?>

这是我如何通过get_content()函数

检索每个帖子的格式

function get_content() { ?>
<div class="col-xs-12 col-sm-6 col-md-3">
    <a href="<?php the_permalink(); ?>"><?php
        $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium' );
        if ($thumbnail) (string)$thumbnail = $thumbnail[0];
        if (!empty($thumbnail)) { ?>
            <img class="media-object" src="<?php echo $thumbnail; ?>" alt="<?php the_title(); ?>">
        <?php } else { ?>
            <img class="media-object" src="" alt="<?php the_title(); ?>">
        <?php } ?>
        <h4><?php the_title(); ?> </h4></a>
</div> <?php
}

我认为函数只是没有按照编写的顺序执行或返回。还是我还遗漏了什么?

正如我所评论的那样，在函数内部使用缓冲区，那么您就不必担心在重用函数的其他地方使用缓冲区。当您return缓冲区时，输出/html的位置将按您的意愿插入:

function get_content()
    {
        ob_start(); ?>
<div class="col-xs-12 col-sm-6 col-md-3">
    <a href="<?php the_permalink(); ?>"><?php
        $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium' );
        if ($thumbnail) (string)$thumbnail = $thumbnail[0];
        if (!empty($thumbnail)) { ?>
            <img class="media-object" src="<?php echo $thumbnail; ?>" alt="<?php the_title(); ?>">
        <?php } else { ?>
            <img class="media-object" src="" alt="<?php the_title(); ?>">
        <?php } ?>
        <h4><?php the_title(); ?> </h4></a>
</div> <?php
        // Assign the data to a variable
        $data = ob_get_contents();
        ob_end_clean();
        // Return the contents
        return $data;
    }

使用时，可以使用.=，也可以像这样回显:

echo get_content();

这样做，您可以将其转换为[shortcode]并得到相同的结果。发人深省

我通过稍微调整循环来解决这个问题。我的get_content()函数实际上并不回显或返回每个帖子结构，但立即将其输出为html，这可能是为什么我得到糟糕的结构和$categoryPosts .= get_content();它没有像我想象的那样起作用

<?php
    global $wp_query;
    $cats = get_the_category();
    $tempQuery = $wp_query;
    $currentId = $post->ID;
    // related category posts
    forEach( $cats as $c ) {
        ob_start();
        $categoryPosts=" ";
        $newQuery = "posts_per_page=10&cat=" . $c->cat_ID;
        query_posts( $newQuery );
        $count = 0; ?>
        <h2 class="new-posts">New in <a href="<?php get_category_link($c->cat_ID);?>"><?php echo $c->cat_name;?></a></h2>
        <div class="row">
        <?php
        while (have_posts()) {
            the_post();
            if( $count<8 && $currentId!=$post->ID) {
                $count++;
                get_content();
            }
        } ?> 
        </div> <?php
        ob_end_flush();
    }
?>