在创建WordPress网站设计时，您是否有过创建帖子网格显示的冲动？网格布局非常适合以媒体为中心的网站，例如我们的WordPress图库或其他展示类型网站。像Genesis这样的主题框架已经有一个预先构建的Grid Loop系统。但是，如果您尝试在自定义WordPress主题中进行网格显示，那么我们随时为您提供帮助。在本文中，我们将向您展示如何在WordPress主题中创建帖子缩略图的网格循环显示。

注意：您需要对CSS以及WordPress循环的工作方式有一个公平的理解。

在开始之前，让我们看一下我们要完成的工作：

Grid Post Display

如果您注意到，此页面上的帖子将显示在网格中。左侧的柱子上有边框，但右侧没有边框。使用正常的帖子循环，所有帖子都遵循相同的样式，因此您将在两个帖子上都有一个看起来很奇怪的右边框。另请注意，间距非常对称。对于做这样的事情，用普通循环再次做不到这一点。现在您可以看到我们要完成的任务，让我们来看看如何实现它。

您需要做的第一件事是确保您的主题已启用WordPress帖子缩略图。您还应该考虑如何调整WordPress图像的大小，因为您将需要它。

一旦你有缩略图和大小设置，让我们开始这件事。让我们设置循环查询：

<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . "&caller_get_posts=1&posts_per_page=12");

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

上面的代码似乎很简单，因为我们已经进行了内联注释。您可能需要编辑的一件事是posts_per_page变量以满足您的需求。如果您愿意，还可以添加其他查询参数。现在我们开始循环了，让我们看一下我们想要在其中显示帖子的方式。

<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("category-thumbnail"); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("category-thumbnail"); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>

我们通过检查计数器是否为1来启动代码，这意味着显示我们的左网格。我们只是进入并使用自定义css类“griditemleft”启动div。在里面我们添加了帖子缩略图和帖子标题。您可以添加或减去任何循环元素（例如摘录，日期，作者信息，评论计数等）。注意：在我们的缩略图中，我们调用了额外的图像大小。您可能必须使用您自己创建的大小替换size-name。

在第一个网格之后，我们添加了一个elseif，用于查看$ counter是否与我们的$ grid中指定的数字相匹配（因为我们将在第二个帖子中这应该）。如果计数器匹配，那么我们可以显示正确的网格，该网格以自定义css类“griditemright”开头。在关闭griditemright div之后请注意，我们正在添加一个清晰的类。我们将在解释CSS部分时进行解释。

完成循环后，我们将计数器重置为0，这样它就可以在下一行重新开始。

我们可以通过添加此代码简单地结束我们开始的循环：

<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

上面的代码基本上是继续计数器，直到它达到我们的query_post变量中指定的限制。我们之前没有添加帖子导航代码的原因是因为许多人使用插件或不同的显示方法。因此，我们将让您自行决定。

所以我们的最终循环代码如下所示：

<div id="gridcontainer">
<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work


/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . "&caller_get_posts=1&posts_per_page=12");


if(have_posts()) :	while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("category-thumbnail"); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("category-thumbnail"); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
</div>

现在我们准备好了PHP代码，让我们看一下我们如何设计样式。

我们的默认输出如下所示：

<div id="gridcontainer"> 
<div class="griditemleft"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="griditemright"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="clear"></div> 
</div>

以下是您需要修改的类：

#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}

评论被关闭。