- 首页
- PHP
- 带有 Bootstrap 3 列的网格视图中的 Wordpress 帖子
带有 Bootstrap 3 列的网格视图中的 Wordpress 帖子
[英] Wordpress posts in grid view with Bootstrap 3 columns
本文介绍了带有 Bootstrap 3 列的网格视图中的 Wordpress 帖子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现博客"页面 (index.php) 上所有 WordPress 帖子的 3x3 网格视图.我正在基于 Bootstrap 3 构建站点.因此循环必须使用 PHP 创建列和行.
我想将它设置成行，以便每一行都重置潜在的高度差异.引导网格看起来像这样:
<div class="col-sm-4">content</div><div class="col-sm-4">content</div><div class="col-sm-4">content</div>
<div class="row"><div class="col-sm-4">content</div><div class="col-sm-4">content</div><div class="col-sm-4">content</div>
<div class="row"><div class="col-sm-4">content</div><div class="col-sm-4">content</div><div class="col-sm-4">content</div>
由于缺乏正确设置循环的 PHP 技能，我尝试了自己的方法，想出了 3 次(修改偏移量):
<?php query_posts('posts_per_page=1&offset=0');while (have_posts()) : the_post();?><div class="row"><div class="col-sm-4 blog-post thumb"><?php get_template_part('模板/内容', get_post_format());?>
<?php endwhile;?><?php query_posts('posts_per_page=1&offset=1');while (have_posts()) : the_post();?><div class="col-sm-4 blog-post thumb"><?php get_template_part('模板/内容', get_post_format());?>
<?php endwhile;?><?php query_posts('posts_per_page=1&offset=2');while (have_posts()) : the_post();?><div class="col-sm-4 blog-post thumb"><?php get_template_part('模板/内容', get_post_format());?>
<?php endwhile;?>
它有明显的缺点:
- 很多不必要的 PHP 请求/循环
- 无法按类别、标签等过滤
你能帮我创建 PHP 循环吗?
我发现的最相关的问题是这个，但是列布局有点歪斜！
非常感谢！菲利普
解决方案
最简单的方法是使用一个容器，将所有内容放入其中，然后通过 js 等高.
PHP
<?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?><div class="col-sm-4 blog-post thumb"><?php get_template_part('模板/内容', get_post_format());?><?php endwhile?>
JS:
function equalHeight(group) {最高 = 0;group.each(function() {thisHeight = $(this).height();如果(这个高度 > 最高){最高 = 这个高度；}});group.each(function() { $(this).height(tallest); });}$(document).ready(function() {equalHeight($(".thumb"));});
如果没有选择，你可以做某事.像这样:
PHP
<?php$count=0;query_posts('posts_per_page=9');while (have_posts()) : the_post();?><div class="col-sm-4 blog-post thumb"><?php get_template_part('模板/内容', get_post_format());?>
<?php$count++;if($count == 3 || $count == 6 ) echo '</div><div class="row">';终了；?>
I'm trying to achieve a 3x3 grid view of all the WordPress posts on the "blog" page (index.php). I'm building the site based on Bootstrap 3.
Therefore the loop has to create the columns and rows with PHP.
I'd like to have it set up in rows, so that potential height differences are being reset every row. The bootstrap grid would look like this:
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
Lacking the PHP skills for setting up the loop properly, I tried hacking my way around, coming up with 3 times this (modifying the offsets):
<?php query_posts('posts_per_page=1&offset=0'); while (have_posts()) : the_post(); ?>
<div class="row">
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile; ?>
<?php query_posts('posts_per_page=1&offset=1'); while (have_posts()) : the_post(); ?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile; ?>
<?php query_posts('posts_per_page=1&offset=2'); while (have_posts()) : the_post(); ?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
</div>
<?php endwhile; ?>
It has obvious disadvantages:
- a lot of unnecessary PHP requests/loops
- filtering by categories, tags, etc doesn't work
Could you help me out with creating the PHP loop?
The most related question I found is this, but the column layout is somehow skewed!
Thanks a lot! Philipp
解决方案
The easiest would be to use one container and put all the contetn items in it, then equal their height via js like that.
PHP
<?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile?>
JS:
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
$(document).ready(function() {
equalHeight($(".thumb"));
});
If thats no option, you could do sth. like that:
PHP
<div class="row">
<?php
$count=0;
query_posts('posts_per_page=9');
while (have_posts()) : the_post();
?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php
$count++;
if($count == 3 || $count == 6 ) echo '</div><div class="row">';
endwhile;
?>
</div>
这篇关于带有 Bootstrap 3 列的网格视图中的 Wordpress 帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
