你想在网格布局中显示WordPress帖子吗?
在WordPress中显示你的文章时，网格布局给你更多的灵活性。这在创建自定义页面时很有帮助。
在本文中，我们将向您展示如何在站点的任何位置以网格布局轻松显示WordPress文章。
有道翻译错误代码（103）：翻译文本过长。
这个方法需要对如何向WordPress添加代码有一些基本的了解。如果你以前没有这样做过，那么看看我们关于如何在WordPress中复制和粘贴代码的指南。
在添加代码之前，您需要创建一个将用于post网格的新图像大小。要了解更多信息，请参阅我们关于如何在WordPress中创建额外图像大小的指南。
接下来，您需要找到要添加代码片段的WordPress主题文件。例如，您可以将其添加到single.php中，这样它就会出现在所有文章的底部。
您还可以创建一个自定义页面模板，并使用它来用缩略图显示您的博客文章网格布局。
要了解更多信息，请参阅我们的WordPress模板层次结构备查单，以帮助找到正确的主题模板文件。
一旦你完成了这些，你就可以开始向WordPress添加代码了。由于代码段相当长，我们将逐节分解它。
首先，将以下代码片段添加到主题模板文件中。 & lt; ?Php $counter = 1;//启动计数器$grids = 2;//每行网格数全局$query_string;//需要这个来使分页工作/*设置我们的自定义查询(在这里我们设置它显示每页12个帖子，并消除所有粘性帖子*/query_posts($query_string . string . string . string . string . string . string . string . string . string . string . string . string . string . string . string . string . string . string。”,caller_get_posts = 1, posts_per_page = 12 ‘);如果(have_posts()):虽然(have_posts ()): the_post(); ?在
强WPCode
这个代码片段设置后循环查询。你可以改变‘posts_per_page’变量，如果您喜欢，可以在每页显示更多帖子。
然后，将以下代码片段添加到主题模板文件中。 & lt; ?php//显示左边栏($counter == 1):?>& lt; div类=“griditemleft"祝辞& lt; div类=“postimage"祝辞& lt; a href =“& lt; ?php the_permalink ();“?”;title =“& lt; ?php the_title_attribute ();“?,在& lt; ?php the_post_thumbnail(“category-thumbnail”);祝辞;& lt; / a>& lt; / div>& lt; h2> & lt; a href =“& lt; ?php the_permalink ();“?”;title =“& lt; ?php the_title_attribute ();“?,在& lt; ?php标题();这样祝辞;& lt; / a> & lt; / h2>& lt; / div> & lt; ?php//显示右侧栏($counter == $grids):?><div class="griditemright">& lt; div类=“postimage"祝辞& lt; a href =“& lt; ?php the_permalink ();“?”;title =“& lt; ?php the_title_attribute ();“?,在& lt; ?php the_post_thumbnail(“category-thumbnail”);祝辞;& lt; / a>& lt; / div>& lt; h2> & lt; a href =“& lt; ?php the_permalink ();“?”;title =“& lt; ?php the_title_attribute ();“?,在& lt; ?php标题();这样祝辞;& lt; / a> & lt; / h2>& lt; / div> & lt; div类=“clear"祝辞& lt; / div> & lt; ?php$counter = 0;endif;?>
WPCode
这个代码片段为我们的帖子创建了两列，并将显示标题和帖子图像。它还创建了一个CSS类，我们稍后将向您展示如何对其进行样式化。
它还引用了‘postmage ’，因此您需要将其更改为您之前创建的图像大小的名称。
之后，在末尾添加以下代码片段。 & lt; ? php计数器+ +美元;endwhile; / /后导航代码hereendif; ?在
强WPCode
这个代码片段只是关闭循环。它还提供了添加帖子导航的选项，但大多数网站所有者使用不同的插件，所以我们没有包含它，以避免代码冲突。
这里’这是最终代码片段的外观。
& lt; div id =“gridcontainer"祝辞& lt; ?Php $counter = 1;//启动计数器$grids = 2;//每行网格数全局$query_string;/ /需要这个分页工作/ *设置自定义查询(在这里我们设置每页显示12的帖子和消除所有棘手的帖子)* (query_string美元/查询_文章。”,caller_get_posts = 1, posts_per_page = 12 ‘);If (have_posts()): while(have_posts()): the_post();在& lt; ?php//显示左边栏($counter == 1):?>& lt; div类=“griditemleft"祝辞& lt; div类=“postimage"祝辞& lt; a href =“& lt; ?php the_permalink ();“?”;title =“& lt; ?php the_title_attribute ();“?,在& lt; ?php the_post_thumbnail(“category-thumbnail”);祝辞;& lt; / a>& lt; / div>& lt; h2> & lt; a href =“& lt; ?php the_permalink ();“?”;title =“& lt; ?php the_title_attribute ();“?,在& lt; ?php标题();这样祝辞;& lt; / a> & lt; / h2>& lt; / div> & lt; ?php//显示右侧栏($counter == $grids):?><div class="griditemright">& lt; div类=“postimage"祝辞& lt; a href =“& lt; ?php the_permalink ();“?”;title =“& lt; ?php the_title_attribute ();“?,在& lt; ?php the_post_thumbnail(“category-thumbnail”);祝辞;& lt; / a>& lt; / div>& lt; h2> & lt; a href =“& lt; ?php the_permalink ();“?”;title =“& lt; ?php the_title_attribute ();“?,在& lt; ?php标题();这样祝辞;& lt; / a> & lt; / h2>& lt; / div> & lt; div类=“clear"祝辞& lt; / div> & lt; ?php $ counter = 0; endif;在& lt; ? php计数器+ +美元;endwhile; / /分页可以在这里如果你想it.endif; ?祝辞& lt; / div>
强WPCode
现在,你们# 8217;你需要添加以下CSS来你的网站,确保你的文章网格显示好只
如果你没有# 8217;t这样做过,那么看到导游如何轻松地添加自定义CSS到你的WordPress站点。#gridcontainer{margin: 20px 0;宽度:100%;}#gridcontainer h2 a{color: #77787a;}#gridcontainer .griditemleft{float: left;宽度:278 px;}#gridcontainer .griditemright{float: left;宽度:278 px;} # gridcontainer .postimage{保证金:0 0 0 10 px;}
强WPCode
您可以修改不同的CSS选择器,看看他们如何改变你的博文循环的不同元素。
我们希望这篇文章能帮助你学习如何在网格布局中显示你的WordPress文章。你可能也想看看我们关于如何选择最好的网页设计软件的指南，以及我们的专家为小企业挑选的最好的实时聊天软件。
和
RSS