如何在网格布局中显示您的 WordPress 帖子

您想以网格布局显示 wordpress 帖子吗？

网格布局为您在 WordPress 中显示帖子时提供了更大的灵活性。这在创建自定义页面时非常有用。

在本文中，我们将向您展示如何在网站上的任何位置以网格布局轻松显示 WordPress 帖子。 

你什么时候需要 WordPress 的网格布局？

每个WordPress 主题都支持博客文章的传统垂直布局，这适用于大多数类型的网站。但是，这种布局可能会占用大量空间，尤其是当您有很多帖子时。

如果您要为网站创建自定义主页，那么您可能需要使用网格布局来显示您最近的帖子。

这将为您提供更多空间来向主页添加其他元素。

另外，您的帖子网格将突出显示您的特色图像，因此具有视觉吸引力且可点击。您还可以使用帖子网格来展示您的创意组合和其他类型的自定义内容。

许多杂志主题和摄影主题已经使用基于网格的布局来显示帖子。但是，如果您的主题不支持此功能，那么您需要添加它。 

话虽如此，让我们向您展示如何在网格布局中显示 WordPress 帖子。只需使用下面的快速链接即可直接跳至您要使用的方法。

• 使用 WordPress 块编辑器创建网格布局
• 使用 Post Grid 插件创建网格布局
• 使用 SeedProd 页面构建器创建网格布局
• 通过向 WordPress 添加代码来创建网格布局

视频教程

https://www.youtube.com/embed/_2VK0bPuTqo?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent订阅 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您更喜欢书面说明，请继续阅读。

方法 1. 使用块编辑器创建 WordPress Post 网格布局

通过此方法，您可以使用WordPress 块编辑器以帖子网格布局简单地显示帖子和缩略图。有一个内置的后网格块，可让您创建自己的网格。 

为此，请打开要编辑的页面，然后单击“加号”添加块按钮并搜索“查询循环”，然后单击该块以添加它。

此块将您的帖子循环添加到您的页面。 

然后，单击块顶部的“开始空白”选项以创建帖子网格。 

根据您想要在帖子网格中显示的信息类型，这会提供一些不同的选择。

我们将选择“图像、日期和标题”选项，但您可以选择您喜欢的任何内容。

之后，将鼠标悬停在图像上并选择“网格视图”选项。

这会将您的列表变成帖子网格。

接下来，您可以自定义要显示的信息。

首先，我们要删除块底部的分页。为此，只需单击它，然后单击“三点”选项菜单。

然后，单击“删除分页”。

这会自动从块中删除该元素。

您可以以同样的方式从帖子中删除日期，或者为访问者留下更多帖子信息。

接下来，我们将添加到帖子缩略图和帖子标题的链接。

只需单击帖子缩略图，然后打开右侧选项面板中的“帖子链接”开关即可。

然后，对您的帖子标题执行相同的操作。

完成后，单击“更新”或“发布”按钮以使您的帖子网格生效。

现在，您可以访问您的WordPress 网站来查看新的 WordPress 帖子网格。

您可以将此块添加到任何页面或帖子。如果您想使用它作为您的博客存档页面，那么您可以参阅我们的指南，了解如何在 WordPress 中为博客文章创建单独的页面。

方法 2. 使用 Post Grid 插件创建 WordPress Post Grid 布局

此方法提供了一种添加可自定义帖子网格的简单方法，您可以将其添加到网站上的任何位置。

您需要做的第一件事是安装并激活Post Grid插件。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的指南。

激活后，您需要访问帖子网格»添加新内容以创建您的第一个帖子网格。

然后，给你的帖子网格一个标题。这不会出现在您页面上的任何位置，只是为了帮助您记住。 

在此下方，您会发现帖子网格设置分为带有多个选项卡的不同部分。 

首先，您需要单击“查询帖子”选项卡。您可以在此处定义要在“帖子类型”框中显示的帖子类型。

默认情况下，它只会显示帖子，但您可以添加页面甚至自定义帖子类型。

之后，您需要单击“布局”选项卡。

然后，单击“创建布局”按钮。这将在新窗口中打开。

您需要为您的布局命名。然后，单击“常规”选项，它将打开标签列表。 

这些标签是将显示在您的帖子网格中的信息。 

我们将选择“带链接的缩略图”选项和“带链接的帖子标题”选项。 

然后，单击“发布”或“更新”以保存您的布局。

现在，返回到上一个选项卡中的原始帖子网格编辑器，将有一个新的布局选项可供您选择。

只需单击屏幕底部“项目布局”部分中的新布局即可。

接下来，单击“项目样式”选项卡。您可以在此处设置网格的大小。 

默认设置应该适用于大多数网站，但如果不适用，您可以在此处更改它们。

完成后，单击页面顶部的“发布”按钮，您的网格就可以添加到您的WordPress 博客中了。

现在，您需要单击“短代码”选项卡，然后将短代码复制到“发布网格短代码”框中。

科威旅游管理系统源码

系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

150

查看详情

之后，打开要显示帖子列表的页面，然后单击“加号”添加阻止按钮。

然后，搜索“短代码”并选择“短代码”块。

接下来，将您之前复制的短代码粘贴到框中。

然后，单击“更新”或“发布”按钮。

现在，您可以查看页面以实时查看 WordPress 帖子网格布局。 

方法 3. 使用 SeedProd 页面构建器插件创建 WordPress Post 网格布局

创建后网格布局的另一种方法是使用SeedProd页面构建器插件。它是市场上最好的拖放式 WordPress 页面构建器，已被超过 100 万个网站使用。

SeedProd 可以帮助您轻松创建自定义页面，甚至完全自定义 WordPress 主题，而无需编写任何代码。您可以使用该插件创建任何您想要的页面，例如404 页面、即将推出的页面、登陆页面等等。

要了解更多信息，请参阅有关如何在 WordPress 中创建自定义页面的指南。

在 SeedProd 构建器中，当您自定义页面时，只需单击页面上任意位置的加号“添加部分”按钮即可。

这将弹出一个添加新块的选项。

接下来，将“帖子”块拖动到您的页面，它会自动将帖子列表添加到您的页面。 

现在，您可以使用左侧选项面板自定义此块。

首先，向下滚动到“布局”部分。您可以在此处设置博客文章网格的列数，并打开“显示特征图像”和“显示标题”开关。

接下来，向下滚动到“显示摘录”开关和“显示阅读更多”开关，然后将其关闭以创建简单的博客文章网格布局。

如果您想自定义配色方案、文本等，请单击左侧栏顶部的“高级”选项卡。 

然后，单击“文本”下拉菜单并进行更改。

您可以根据需要继续自定义页面和博客文章网格布局。 

完成后，单击“保存”按钮，然后选择页面顶部的“发布”下拉列表以使更改生效。

现在，您可以在网站上查看新的帖子网格。 

方法 4. 通过向 WordPress 添加代码来创建 WordPress Post 网格布局 

此方法需要对如何向 WordPress 添加代码有一些基本了解。如果您以前没有这样做过，请参阅我们关于如何在 WordPress 中复制和粘贴代码的指南。

在添加代码之前，您需要创建一个将用于帖子网格的新图像尺寸。要了解更多信息，请参阅有关如何在 WordPress 中创建其他图像尺寸的指南。

接下来，您需要找到要在其中添加代码片段的正确 WordPress 主题文件。例如，您可以将其添加到 single.php 中，这样它就会出现在所有帖子的底部。 

您还可以创建自定义页面模板并使用它来显示带有缩略图的博客文章网格布局。

要了解更多信息，请参阅我们的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();?>

由

在 WordPress 中一键使用

此代码片段设置后循环查询。如果您愿意，您可以更改“posts_per_page”变量以在每页显示更多帖子。

然后，将以下代码片段添加到您的主题模板文件中。

<?php//Show the left hand side columnif($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 columnelseif($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;?>

由

在 WordPress 中一键使用

此代码片段为我们的帖子创建两列，并将显示标题和帖子图像。它还创建了一个 CSS 类，稍后我们将向您展示如何设置样式。 

它还引用“postimage”，因此您需要将其更改为之前创建的图像尺寸的名称。 

之后，在末尾添加以下代码片段。

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

由

在 WordPress 中一键使用

此代码片段只是关闭循环。它还提供了添加后导航的选项，但大多数网站所有者为此使用不同的插件，因此我们没有包含它以避免代码冲突。 

最终代码片段的外观如下。

<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 columnif($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 columnelseif($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>

由

在 WordPress 中一键使用

现在，您需要将以下 CSS 添加到您的网站，以确保您的帖子网格正常显示。 

如果您以前没有这样做过，请参阅我们的指南，了解如何轻松地将自定义 CSS 添加到您的 WordPress 网站。

#gridcontainer{     margin: 20px0;      width: 100%; }#gridcontainer h2a{     color: #77787a;      font-size: 13px;}#gridcontainer .griditemleft{     float: left;      width: 278px;      margin: 040px40px0;}#gridcontainer .griditemright{     float: left;      width: 278px;}#gridcontainer .postimage{     margin: 0010px0;}

由

在 WordPress 中一键使用

您可以修改不同的 CSS 选择器以查看它们如何更改后循环的不同元素。

我们希望本文能帮助您了解如何以网格布局显示 WordPress 帖子。您可能还想查看我们有关如何选择最佳网页设计软件的指南，以及我们专家为小型企业精选的最佳实时聊天软件。

以上就是如何在网格布局中显示您的 WordPress 帖子的详细内容，更多请关注php中文网其它相关文章！