wordpress 缩略图_如何在WordPress主题中创建张贴缩略图的网格显示

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 gallery 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 post thumbnails in your WordPress theme.

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

Note: you need to have a fair understanding of CSS and how the WordPress loop work.

注意：您需要对CSS以及WordPress循环的工作方式有一定的了解。

Before we begin, lets take a look at what we are trying to accomplish:

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

If you notice, the posts on this page are being displayed in a grid. There is a border on the posts on the left hand side, but not on the right hand side. With a normal post loop, all posts follow the same styling, so you will have a right border on both posts which would look weird. Also notice, the spacing are pretty symmetric. Which is again not possible with the normal loop to do for doing something like this. Now that you can see what we are trying to accomplish, lets take a look on how to accomplish it.

如果您注意到，此页面上的帖子将显示在网格中。 左侧的柱子上有一个边框，但右侧没有。 在正常的帖子循环中，所有帖子都采用相同的样式，因此您在两个帖子上都会有一个看起来很奇怪的右边框。 还要注意，间距是相当对称的。 普通循环再也无法做到这一点。 现在您可以看到我们要完成的任务，让我们来看看如何完成它。

First thing you need to do is make sure that your theme has WordPress post thumbnails turned on. You should also think about how you want to resize your WordPress images because you will be needing it.

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

Once you have got the thumbnails and sizes setup, lets get this thing started. Lets setup our loop queries:

设置好缩略图和尺寸后，就可以开始使用了。 让我们设置循环查询：

<?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();
?>

The code above seems pretty straight forward because we have made inline comments. One thing that you probably would need to edit is posts_per_page variable to suit your needs. You can also add other query parameters if you so desire. Now that we got the loop started, lets look at how we want to display the posts inside it.

上面的代码看起来很简单，因为我们已经进行了内联注释。 您可能需要编辑的一件事是符合您需要的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 additional image size. You will probably have to replace the size-name with your own size that you created.

我们通过检查计数器是否为1来开始代码，这表示显示左侧网格。 我们简单地进入并使用自定义CSS类“ griditemleft”启动div。 在其中添加了帖子缩略图和帖子标题。 您可以添加或减去任何循环元素(例如节选，日期，作者信息，评论数等)。 注意：在缩略图中，我们称呼为其他图像尺寸 。 您可能必须用自己创建的尺寸替换size-name。

After the first grid, we added an elseif that looks to see if the $counter matches the number specified in our $grids (which it should because we will be on the second post). If the counter matches, then we can show our right grid which starts with a custom css class “griditemright”. Notice after we close the griditemright div, we are adding a clear class. This we will explain when we get to the CSS part.

在第一个网格之后，我们添加了elseif，以查看$ counter是否与$ grids中指定的数字匹配(之所以这样，是因为我们将在第二篇文章中)。 如果计数器匹配，则可以显示以自定义CSS类“ griditemright”开头的右侧网格。 注意，在关闭griditemright div之后，我们将添加一个清除类。 我们将在到达CSS部分时对此进行解释。

After the loop is done with this, we reset the counter to 0, so it can start again in the next row.

循环完成后，我们将计数器重置为0，因此它可以在下一行再次开始。

We can simply end the loop that we started by adding this code:

我们可以简单地通过添加以下代码结束循环：

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

The code above basically is continuing the counter until it hits the limit that is specified in our query_post variable. The reason why we didn’t add the post navigation code above is because many folks use a plugin or different display method for this. So we are leaving it open for you to decide for yourself.

上面的代码基本上在继续计数器直到达到我们的query_post变量中指定的限制。 我们之所以没有添加上面的导航代码，是因为许多人为此使用了插件或其他显示方法。 因此，我们让您自行决定。

So our final loop code will look like this:

因此，我们的最终循环代码将如下所示：

<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>

Now that we have the PHP code ready, lets look at how we are going to style it.

现在我们已经准备好了PHP代码，让我们看看如何对其进行样式设置。

Our default output would look like this:

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

<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>

Here are the classes that you need to modify:

这是您需要修改的类：

#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;}

We hope that this tutorial steers you in the right direction towards making a grid loop display for your WordPress posts.

我们希望本教程将引导您朝正确的方向迈向为WordPress帖子制作网格循环显示。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-create-a-grid-display-of-post-thumbnails-in-wordpress-themes/

wordpress 缩略图