WordPress 缩略图
When creating WordPress site designs, have you ever had the urge to create a grid display of posts? The grid layout works great for media centric sites such as our WordPress 画廊 or another showcase type site. Theme frameworks like Genesis already has a pre-built Grid Loop system. However, if you are trying to do a grid display in your custom WordPress theme, then we are here to help. In this article, we will show you how to create a grid loop display of 发布缩略图 in your WordPress theme.
在创建WordPress网站设计时，您是否曾想过创建帖子的网格显示？ 网格布局非常适合以媒体为中心的网站，例如我们的WordPress 画廊或其他展示类型的网站。 像Genesis这样的主题框架已经有一个预先构建的Grid Loop系统。 但是，如果您尝试在自定义WordPress主题中进行网格显示，那么我们将为您提供帮助。 在本文中，我们将向您展示如何在WordPress主题中创建发布缩略图的网格循环显示。
注意：您需要对 CSS 以及 WordPress 循环的工作原理有一定的了解。
注意：您需要对 CSS 以及 WordPress 循环的工作原理有一定的了解。
在开始之前，让我们先看看我们要实现的目标：
在开始之前，让我们先看看我们要实现的目标：
如果您注意到，此页面上的帖子正在网格中显示。左侧的柱子上有边框，但右侧没有。使用正常的帖子循环，所有帖子都遵循相同的样式，因此两个帖子上都会有一个右边框，这看起来很奇怪。另请注意，间距非常对称。对于这样的事情，普通循环又是不可能做到的。现在您已经了解了我们正在努力实现的目标，让我们来看看如何实现它。
如果您注意到，此页面上的帖子将显示在网格中。左边的柱子上有边框，右边的柱子上没有。在正常的帖子循环中，所有帖子的样式都相同，因此两个帖子上都会有一个看起来很奇怪的右边框。另请注意，间距相当对称。普通循环无法再执行此操作。现在您已经了解了我们要实现的目标，让我们看看如何实现它。
First thing you need to do is make sure that your theme has WordPress 帖子缩略图 turned on. You should also think about how you want to 调整 WordPress 图像的大小 because you will be needing it.
您需要做的第一件事是确保您的主题已打开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 变量以满足您的需求。如果您愿意，还可以添加其他查询参数。现在我们已经开始了循环，让我们看看如何显示其中的帖子。
上面的代码看起来很简单，因为我们已经对其进行了内联注释。您可能想要编辑的一件事是 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;
?>
We start the code by checking to see if the counter is 1 which means to show our left grid. We simply go in and start a div with a custom css class “griditemleft”. Inside it we added the post thumbnail and the post title. You can add or subtract any loop elements (such as excerpts, dates, author info, comment count etc). Notice: In our thumbnails, we are calling an 附加图像尺寸. You will probably have to replace the size-name with your own size that you created.
我们通过检查计数器是否为1来开始代码，这表示显示左侧网格。 我们简单地进入并使用自定义CSS类“ griditemleft”启动div。 在其中添加了帖子缩略图和帖子标题。 您可以添加或减去任何循环元素(例如节选，日期，作者信息，评论数等)。 注意：在缩略图中，我们称呼为其他图像尺寸 。 您可能必须用自己创建的尺寸替换size-name。
在第一个网格之后，我们添加了一个 elseif 来查看 $counter 是否与 $grids 中指定的数字匹配（它应该匹配，因为我们将在第二篇文章中）。如果计数器匹配，那么我们可以显示以自定义 css 类“griditemright”开头的右侧网格。请注意，在关闭 griditemright div 后，我们将添加一个清晰的类。我们将在讨论 CSS 部分时对此进行解释。
在第一个网格之后，我们添加了一个 elseif 来查看 $counter 是否与 $grids 中指定的数字匹配（这是因为我们将在第二篇文章中这样做）。如果计数器匹配，您可以显示以自定义 CSS 类“griditemright”开头的右侧网格。请注意，关闭 griditemright div 后我们将添加一个清除类。当我们进入 CSS 部分时我们会解释这一点。
循环完成后，我们将计数器重置为 0，这样它就可以在下一行再次开始。
循环完成后，我们将计数器重置为 0，以便它可以在下一行再次开始。
我们可以通过添加以下代码来简单地结束我们开始的循环：
我们只需添加以下代码即可结束循环：
<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>
上面的代码基本上是继续计数器，直到达到 query_post 变量中指定的限制。我们之所以没有添加上面的后导航代码，是因为许多人为此使用插件或不同的显示方法。因此，我们将其留给您自己决定。
上面的代码基本上是继续计数器，直到达到 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 代码，让我们看看如何设计它的样式。
现在我们已经准备好了 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;}
我们希望本教程能够引导您朝着正确的方向为您的 WordPress 帖子制作网格循环显示。
我们希望本教程能够引导您朝着正确的方向为 WordPress 帖子制作网格循环显示。
WordPress 缩略图