Question

我有一个wordpress循环，可以在div中输出我的帖子。那些div有这些类.col1,.col2,.col3。输出如下：

enter image description here

现在我需要将这些div包装在 单包装 div中。

例如，所有.col1都应该包含在一个包含.left类的包装div中，.col2应该包含一个包含类.middle和{{1}的div应该用div类'.coll3'包装。

我不知道我的页面中会有多少div。

所以最终输出应如下所示：

我的循环看起来像这样：

.right

这可以仅在没有<?php $col = 1; // Let's create first column. if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?php post_class( 'col' . $col ); ?> id="post-<?php the_ID(); ?>"> <?php if ( 1 === $col ) {// If column 1 create first row. echo '<div class="row">'; } ?> <?php if ( 2 === $col ) {// If column 2 create second row. echo '<div class="row2">'; } ?> <?php if ( 3 === $col ) {// If column 3 create third row. echo '<div class="row3">'; } ?>  <?php get_template_part( 'template-parts/content', 'three-columns' ); ?> <?php /* Close Three Column Layout Div's */ if ( 1 === $col ) { $col = 2; echo '</div>'; } else if ( 2 === $col ) { $col = 3; echo '</div>'; } else if ( 3 === $col ) { $col = 1; echo '</div>'; } endwhile; ?> <?php else : ?> <?php get_template_part( 'template-parts/content', 'none' ); ?> <?php endif;?>的情况下使用PHP完成吗？谢谢!!

Answer 1

首先将数据分成3列，然后逐个构建列，然后按顺序渲染。

function buildCols( $posts ){
    for($i = 0; $i < count($posts); $i += 3) {
        $threeColArray[] = array_slice($posts, $i, 3);
    }
    return $threeColArray;
}

Answer 2

您需要重新组织输出帖子的方式。不是逐行循环，而是需要将其更改为列方式，这样您就可以正确地创建外部<div>元素。

想象一下，你有10个帖子。而不是按顺序循环遍历它们，从1到10，您需要将它们分组为3个块（对于三个列），然后迭代每个列。

Old: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
New: (1, 4, 7, 10) (2, 5, 8) (3, 6, 9)

以下是一个关于如何做到这一点的简单示例，以及使用正确的类形成<div>元素：

$posts = range(1, 10); // Collect all of your posts into an array, as an example I'm just using numbers.

$posts_reordered = ['left' => [], 'middle' => [], 'right' => []];

foreach(array_chunk($posts, 3) as $chunk) {
    $posts_reordered['left'][] = $chunk[0];     
    if(isset($chunk[1])) {
        $posts_reordered['middle'][] = $chunk[1];
    }
    if(isset($chunk[2])) {
        $posts_reordered['right'][] = $chunk[2];
    }
}

现在，您的帖子是按列而不是按行重新组织的，因此您可以打印所需的HTML：

$i = 1;
foreach($posts_reordered as $key => $column_posts) {
    $outer_div_class = ".$key"; // .left

    echo "<div class='$outer_div_class'>\n";

    foreach($column_posts as $post) {
        $inner_div_class = ".col$i";
        echo "\t<div class='$inner_div_class'>$post</div>\n\n";
    }

    echo "</div>\n";
    $i++;
}

这will output：

<div class='.left'>
    <div class='.col1'>1</div>

    <div class='.col1'>4</div>

    <div class='.col1'>7</div>

    <div class='.col1'>10</div>

</div>
<div class='.middle'>
    <div class='.col2'>2</div>

    <div class='.col2'>5</div>

    <div class='.col2'>8</div>

</div>
<div class='.right'>
    <div class='.col3'>3</div>

    <div class='.col3'>6</div>

    <div class='.col3'>9</div>

</div>

Answer 3

尝试这样的事情，如果帖子计数器可以被3整除，你可以结束列并开始一个新列：

<?php             
$post_counter = 1;
$col_counter = 1;
if ( have_posts() ) : ?>
    <div class="col--<?php echo $col_counter; ?>">
        <?php while ( have_posts() ) : the_post(); ?>

        <?php if ($post_counter % 3 == 0) : ?>
        <?php $col_counter++; ?>
        </div>
        <div class="col--<?php echo $col_counter; ?>">
        <?php endif; ?>

        <!--Get the Three Columns Content -->
        <?php get_template_part( 'template-parts/content', 'three-columns' ); ?>


        <?php $post_counter++; ?>
        <?php endwhile; ?>
    </div>
<?php endif;?>

Answer 4

首先请注意，由于你的文件很多是php，所以不需要为每一行保持打开和关闭php标签。

只需将cucumber --tags "not @ignore"放在文件的顶部即可。当您使用<?输出html时，甚至不需要关闭标记。然后，您将echo替换为:，将{替换为endif。它将使您的代码更清晰。

那说你应该只创建一个局部变量来存储div然后在一个单独的循环中打印内容。

这是一个粗略的想法：

在一个包装器div中用class包装多个div？

4 个答案: