在每4个帖子之后添加div,然后每2个帖子添加一个响应循环

时间:2017-01-05 作者:Mathieu Préaud

我目前正在为我的索引帖子页面编写Wordpress循环。循环在4列中显示帖子(每个帖子的宽度为25%,因此在同一行上有4篇帖子),我的目的是在每四篇帖子后插入两个div<div style="clear:both;"></div><div style="separator"></div>. 目前它工作正常,但我没有找到让PHP代码响应的方法。

例如:当窗口宽度为<=1100px,我的帖子的宽度(在我的css媒体查询中)为50%,这意味着在同一行上有两篇帖子。所以我需要改变$counter % 4 == 0$counter % 2 == 0, 在每两个帖子后添加两个div。

代码如下:

$counter = 1;

if ( have_posts() ) :
  while ( have_posts() ) : the_post();

    get_template_part( \'template-parts/content\', \'index-posts\' );

    if ($counter % 4 == 0) :
      echo \'<div style="clear:both;"></div><div class="news-separator"></div>\';
    endif;

    $counter++;

  endwhile;
endif;
wp_reset_query();
我是PHP的新手,所以我非常感谢您在这方面的帮助。

非常感谢!

1 个回复
最合适的回答,由SO网友:rudtek 整理而成

在1100px以下使用@媒体时,需要通过css将div设置为50%。然后,它们将以每行2个的速度加载。您还可以向分隔符中的代码添加一个仅显示1100px以上的类,并为每2个添加第二个if语句,该语句将隐藏在1100px以上的所有内容中。鉴于我们看不到实际的循环代码,我无法建议将css应用于哪个div

相关推荐

如何将Java脚本添加到Custom-Page.php模板?

如何将javascript添加到自定义页面。php模板?如何使从w3schools ajax教程获得的以下javascript在自定义页面上工作。php模板?任何帮助都将不胜感激。工作javascript包含在以下HTML中:<!DOCTYPE html> <html> <style> table,th,td { border : 1px solid black; border-collapse: collapse;&#x