根据媒体查询显示每页的帖子?

Show posts per page based on a media query?

提问人:DanG 提问时间:3/4/2021 最后编辑:DanG 更新时间:3/4/2021 访问量:416

问:

我在我的首页(预告片)上有这个平铺图像循环到另一个存档页面上的完整内容列表。

样式如下

320px 到 650px,瓷砖是屏幕的 100%。

650px 到 950px,磁贴占屏幕的 50%(并排 2 个)。

最大宽度为 950px,图块占屏幕的 33.333%(并排 3 倍)。

最初,我将posts_per_page设置为 12,因此网格格式看起来很棒,其中 2、3、6、9、12 在此布局中都非常出色。

然而,客户和我一致认为,预告片的瓷砖太多了,他想把它恢复到最多 8 或 9 个。问题是,在 650px 到 950px 的范围内,我现在得到了丑陋的单块综合症。因为 9 不是 2 的倍数。

在下面的(args)代码中,有没有办法根据媒体查询排列每页的帖子?理想的情况是 8 个显示到 950 像素,然后在更大的屏幕上显示 9 个。

感谢任何建议。

<?php
    $injuries_args = array(
        'post_type' => 'injuries',
        'post_status' => 'publish',
        'posts_per_page' => '9'
    );
    $loop_one = new WP_Query($injuries_args);
?>
PHP wordpress 帖子

评论

0赞 Justinas 3/4/2021
Php 不关心媒体查询,当遇到特殊大小时,你的前端应该触发重新加载。
1赞 cabrerahector 3/4/2021
你可以通过AJAX加载你的网格,传递一个参数,让PHP知道查看器的分辨率,并动态地改变项目的数量......但这不是一个很好的解决方案,因为它对 RWD 并不完全友好:如果有人调整浏览器大小,那么你就会回到最初的问题,因为项目将再次看起来“丑陋”。一个好的折衷方案:与您的客户交谈并建议显示 6 个帖子(并确保向他们解释您为什么建议这样做。
0赞 DanG 3/4/2021
好的,谢谢,按照建议,我将拉回 6 个图块。我很好奇是否有可能以另一种方式进行。感谢您的帮助。
0赞 cabrerahector 3/4/2021
好吧,您可以触发 AJAX 调用以在每次调整窗口大小时获取帖子(好吧,在调整大小以获得更好的性能之后),正如上面的 Justinas 建议的那样,以实现您想要的,但随后您还需要动态更新分页链接(上一页、下一页、1、2、3 等),以便下一页链接列出正确的帖子。这是一个麻烦的IMO,哈哈,但如果你愿意走这条路,值得探索。(但是,如果网格之后没有下一个/上一个分页链接,那么这当然不是什么大问题。

答: 暂无答案