Question

在网站上工作，我遇到了一些困难。我真的很难或者没有完成我想要完成的任务！

因此，有一个名为'references'的部分，每个项目属于一行（4行）。

在我的静态页面上，它看起来像这样：

<div id="references-tiles">
        <div class="reference">
          <div class="reference-figure malmberg"></div>
        </div>
        <div class="reference">
            <div class="reference-figure malmberg"></div>
        </div>
    ****<div class="references-row"></div>****
        <div class="reference">
          <div class="reference-figure port"></div>
        </div>
        <div class="reference">
            <div class="reference-figure malmberg"></div>
        </div>
    ****<div class="references-row"></div>****

        <div class="reference">
            <div class="reference-figure malmberg"></div>
        </div>
  </div>

引用行的作用类似于分隔符

每个引用必须是一个帖子，不幸的是wordpress不会这样工作

循环播放并以相同的方式显示它们（仅限项目）

        <div id="references-tiles">
            <?php
            $query = new WP_Query( array( 'category_name' => 'References' ) );

            if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
                $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); ?>
                <div class="reference">
                   <div class="reference-figure" style="background-image: url('<?php echo $image[0]; ?>')"></div>
                </div>
            <?php endwhile; endif; ?>
        </div>

我无法弄清楚如何以某种方式控制，将参考项添加到行中。我尝试使用一些模数语句，如：

if ($referenceCount % 4 == 0)
elseif ($referenceCount % 3 == 0)
elseif ($referenceCount % 2 == 0)
else

但这并没有成功，因为只要我在循环中，每个项目都可以分开，但不会添加到现有的行中。

有办法吗？也许循环遍历循环，在数组中添加每个引用项，并且根据总共有多少项，我可以将它们删除。或者使用循环4次并根据模数，将一个引用项添加到一行？但我想这会让网站变得有点慢......

抱歉英语不好，我不清楚，我很乐意尝试更好地解释自己！

问候并感谢！ IT-学生

Answer 1

您应该在循环中添加一个计数器。

<div id="references-tiles">
    <?php
    $query = new WP_Query( array( 'category_name' => 'References' ) );

                // Add a counter vvvvv
    if ($query->have_posts()) : $i = 1; while ($query->have_posts()) : $query->the_post();
        $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); ?>
        <div class="reference">
           <div class="reference-figure" style="background-image: url('<?php echo $image[0]; ?>')"></div>
        </div>

        <!-- If the counter is evenly divisible by 2, add a new row -->
        <?php if ( $i % 2 === 0 ) : ?>
            <div class="references-row"></div>
        <?php endif; ?>

    <!-- Increment the counter -->
    <?php $i++; endwhile; endif; ?>
</div>

Answer 2

您可以在返回的$query数组

上使用array_chunk

注意：这些示例使用基金会的网格系统来更好地显示结果。

<?php 
/**
 * The second argument for array_chunk takes the size of the chunks
 * ie: the number of columns you want to display per row
 */
$columnsPerRow = 4;

$query = new WP_Query( array( 'category_name' => 'References' ) );

if($query->have_posts()) : foreach(array_chunk($query->get_posts(), $columnsPerRow) as $posts) : ?>

<div class="row">
<?php foreach($posts as $post) : setup_postdata($post); ?>
    <div class="columns small-6 medium-4">
        <?php 
         /**
          * Fetch the post thumbnail
          * to be used as a background
          */
         $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID )); 
         ?>
        <div class="panel" style='background:url("<?php echo $thumbnail[0]; ?>")'>&nbsp;</div>
    </div>
<?php endforeach; ?>
</div> <!-- end row -->

<?php 
 endforeach;
 endif;
 wp_reset_postdata();
 ?>

Answer 3

你不需要使用计数器，wordpress在循环中有一个计数器。

<?php if ($query->current_post%2) { ?>
    <div class="references-row"></div>
<?php } ?>

确保此代码在循环内部和结束之前。

Wordpress，显示特定行

3 个答案: