如何在網(wǎng)格布局中顯示您的 WordPress 帖子

您想以網(wǎng)格布局顯示 wordpress 帖子嗎？

網(wǎng)格布局為您在 WordPress 中顯示帖子時(shí)提供了更大的靈活性。這在創(chuàng)建自定義頁(yè)面時(shí)非常有用。

在本文中，我們將向您展示如何在網(wǎng)站上的任何位置以網(wǎng)格布局輕松顯示 WordPress 帖子。?

你什么時(shí)候需要 WordPress 的網(wǎng)格布局？

每個(gè)WordPress 主題都支持博客文章的傳統(tǒng)垂直布局，這適用于大多數(shù)類(lèi)型的網(wǎng)站。但是，這種布局可能會(huì)占用大量空間，尤其是當(dāng)您有很多帖子時(shí)。

如果您要為網(wǎng)站創(chuàng)建自定義主頁(yè)，那么您可能需要使用網(wǎng)格布局來(lái)顯示您最近的帖子。

這將為您提供更多空間來(lái)向主頁(yè)添加其他元素。

另外，您的帖子網(wǎng)格將突出顯示您的特色圖像，因此具有視覺(jué)吸引力且可點(diǎn)擊。您還可以使用帖子網(wǎng)格來(lái)展示您的創(chuàng)意組合和其他類(lèi)型的自定義內(nèi)容。

許多雜志主題和攝影主題已經(jīng)使用基于網(wǎng)格的布局來(lái)顯示帖子。但是，如果您的主題不支持此功能，那么您需要添加它。?

話(huà)雖如此，讓我們向您展示如何在網(wǎng)格布局中顯示 WordPress 帖子。只需使用下面的快速鏈接即可直接跳至您要使用的方法。

• 使用 WordPress 塊編輯器創(chuàng)建網(wǎng)格布局
• 使用 Post Grid 插件創(chuàng)建網(wǎng)格布局
• 使用 SeedProd 頁(yè)面構(gòu)建器創(chuàng)建網(wǎng)格布局
• 通過(guò)向 WordPress 添加代碼來(lái)創(chuàng)建網(wǎng)格布局

視頻教程

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

如果您更喜歡書(shū)面說(shuō)明，請(qǐng)繼續(xù)閱讀。

方法 1. 使用塊編輯器創(chuàng)建 WordPress Post 網(wǎng)格布局

通過(guò)此方法，您可以使用WordPress 塊編輯器以帖子網(wǎng)格布局簡(jiǎn)單地顯示帖子和縮略圖。有一個(gè)內(nèi)置的后網(wǎng)格塊，可讓您創(chuàng)建自己的網(wǎng)格。?

為此，請(qǐng)打開(kāi)要編輯的頁(yè)面，然后單擊“加號(hào)”添加塊按鈕并搜索“查詢(xún)循環(huán)”，然后單擊該塊以添加它。

此塊將您的帖子循環(huán)添加到您的頁(yè)面。?

然后，單擊塊頂部的“開(kāi)始空白”選項(xiàng)以創(chuàng)建帖子網(wǎng)格。?

根據(jù)您想要在帖子網(wǎng)格中顯示的信息類(lèi)型，這會(huì)提供一些不同的選擇。

我們將選擇“圖像、日期和標(biāo)題”選項(xiàng)，但您可以選擇您喜歡的任何內(nèi)容。

之后，將鼠標(biāo)懸停在圖像上并選擇“網(wǎng)格視圖”選項(xiàng)。

這會(huì)將您的列表變成帖子網(wǎng)格。

接下來(lái)，您可以自定義要顯示的信息。

首先，我們要?jiǎng)h除塊底部的分頁(yè)。為此，只需單擊它，然后單擊“三點(diǎn)”選項(xiàng)菜單。

然后，單擊“刪除分頁(yè)”。

這會(huì)自動(dòng)從塊中刪除該元素。

您可以以同樣的方式從帖子中刪除日期，或者為訪(fǎng)問(wèn)者留下更多帖子信息。

接下來(lái)，我們將添加到帖子縮略圖和帖子標(biāo)題的鏈接。

只需單擊帖子縮略圖，然后打開(kāi)右側(cè)選項(xiàng)面板中的“帖子鏈接”開(kāi)關(guān)即可。

然后，對(duì)您的帖子標(biāo)題執(zhí)行相同的操作。

完成后，單擊“更新”或“發(fā)布”按鈕以使您的帖子網(wǎng)格生效。

現(xiàn)在，您可以訪(fǎng)問(wèn)您的WordPress 網(wǎng)站來(lái)查看新的 WordPress 帖子網(wǎng)格。

您可以將此塊添加到任何頁(yè)面或帖子。如果您想使用它作為您的博客存檔頁(yè)面，那么您可以參閱我們的指南，了解如何在 WordPress 中為博客文章創(chuàng)建單獨(dú)的頁(yè)面。

方法 2. 使用 Post Grid 插件創(chuàng)建 WordPress Post Grid 布局

此方法提供了一種添加可自定義帖子網(wǎng)格的簡(jiǎn)單方法，您可以將其添加到網(wǎng)站上的任何位置。

您需要做的第一件事是安裝并激活Post Grid插件。有關(guān)更多詳細(xì)信息，請(qǐng)參閱我們有關(guān)如何安裝 WordPress 插件的指南。

激活后，您需要訪(fǎng)問(wèn)帖子網(wǎng)格?添加新內(nèi)容以創(chuàng)建您的第一個(gè)帖子網(wǎng)格。

然后，給你的帖子網(wǎng)格一個(gè)標(biāo)題。這不會(huì)出現(xiàn)在您頁(yè)面上的任何位置，只是為了幫助您記住。?

在此下方，您會(huì)發(fā)現(xiàn)帖子網(wǎng)格設(shè)置分為帶有多個(gè)選項(xiàng)卡的不同部分。?

首先，您需要單擊“查詢(xún)帖子”選項(xiàng)卡。您可以在此處定義要在“帖子類(lèi)型”框中顯示的帖子類(lèi)型。

默認(rèn)情況下，它只會(huì)顯示帖子，但您可以添加頁(yè)面甚至自定義帖子類(lèi)型。

之后，您需要單擊“布局”選項(xiàng)卡。

然后，單擊“創(chuàng)建布局”按鈕。這將在新窗口中打開(kāi)。

您需要為您的布局命名。然后，單擊“常規(guī)”選項(xiàng)，它將打開(kāi)標(biāo)簽列表。?

這些標(biāo)簽是將顯示在您的帖子網(wǎng)格中的信息。?

我們將選擇“帶鏈接的縮略圖”選項(xiàng)和“帶鏈接的帖子標(biāo)題”選項(xiàng)。?

然后，單擊“發(fā)布”或“更新”以保存您的布局。

現(xiàn)在，返回到上一個(gè)選項(xiàng)卡中的原始帖子網(wǎng)格編輯器，將有一個(gè)新的布局選項(xiàng)可供您選擇。

只需單擊屏幕底部“項(xiàng)目布局”部分中的新布局即可。

接下來(lái)，單擊“項(xiàng)目樣式”選項(xiàng)卡。您可以在此處設(shè)置網(wǎng)格的大小。?

默認(rèn)設(shè)置應(yīng)該適用于大多數(shù)網(wǎng)站，但如果不適用，您可以在此處更改它們。

完成后，單擊頁(yè)面頂部的“發(fā)布”按鈕，您的網(wǎng)格就可以添加到您的WordPress 博客中了。

現(xiàn)在，您需要單擊“短代碼”選項(xiàng)卡，然后將短代碼復(fù)制到“發(fā)布網(wǎng)格短代碼”框中。

之后，打開(kāi)要顯示帖子列表的頁(yè)面，然后單擊“加號(hào)”添加阻止按鈕。

然后，搜索“短代碼”并選擇“短代碼”塊。

接下來(lái)，將您之前復(fù)制的短代碼粘貼到框中。

然后，單擊“更新”或“發(fā)布”按鈕。

現(xiàn)在，您可以查看頁(yè)面以實(shí)時(shí)查看 WordPress 帖子網(wǎng)格布局。?

方法 3. 使用 SeedProd 頁(yè)面構(gòu)建器插件創(chuàng)建 WordPress Post 網(wǎng)格布局

創(chuàng)建后網(wǎng)格布局的另一種方法是使用SeedProd頁(yè)面構(gòu)建器插件。它是市場(chǎng)上最好的拖放式 WordPress 頁(yè)面構(gòu)建器，已被超過(guò) 100 萬(wàn)個(gè)網(wǎng)站使用。

SeedProd 可以幫助您輕松創(chuàng)建自定義頁(yè)面，甚至完全自定義 WordPress 主題，而無(wú)需編寫(xiě)任何代碼。您可以使用該插件創(chuàng)建任何您想要的頁(yè)面，例如404 頁(yè)面、即將推出的頁(yè)面、登陸頁(yè)面等等。

要了解更多信息，請(qǐng)參閱有關(guān)如何在 WordPress 中創(chuàng)建自定義頁(yè)面的指南。

在 SeedProd 構(gòu)建器中，當(dāng)您自定義頁(yè)面時(shí)，只需單擊頁(yè)面上任意位置的加號(hào)“添加部分”按鈕即可。

這將彈出一個(gè)添加新塊的選項(xiàng)。

接下來(lái)，將“帖子”塊拖動(dòng)到您的頁(yè)面，它會(huì)自動(dòng)將帖子列表添加到您的頁(yè)面。?

現(xiàn)在，您可以使用左側(cè)選項(xiàng)面板自定義此塊。

首先，向下滾動(dòng)到“布局”部分。您可以在此處設(shè)置博客文章網(wǎng)格的列數(shù)，并打開(kāi)“顯示特征圖像”和“顯示標(biāo)題”開(kāi)關(guān)。

接下來(lái)，向下滾動(dòng)到“顯示摘錄”開(kāi)關(guān)和“顯示閱讀更多”開(kāi)關(guān)，然后將其關(guān)閉以創(chuàng)建簡(jiǎn)單的博客文章網(wǎng)格布局。

如果您想自定義配色方案、文本等，請(qǐng)單擊左側(cè)欄頂部的“高級(jí)”選項(xiàng)卡。?

然后，單擊“文本”下拉菜單并進(jìn)行更改。

您可以根據(jù)需要繼續(xù)自定義頁(yè)面和博客文章網(wǎng)格布局。?

完成后，單擊“保存”按鈕，然后選擇頁(yè)面頂部的“發(fā)布”下拉列表以使更改生效。

現(xiàn)在，您可以在網(wǎng)站上查看新的帖子網(wǎng)格。?

方法 4. 通過(guò)向 WordPress 添加代碼來(lái)創(chuàng)建 WordPress Post 網(wǎng)格布局?

此方法需要對(duì)如何向 WordPress 添加代碼有一些基本了解。如果您以前沒(méi)有這樣做過(guò)，請(qǐng)參閱我們關(guān)于如何在 WordPress 中復(fù)制和粘貼代碼的指南。

在添加代碼之前，您需要?jiǎng)?chuàng)建一個(gè)將用于帖子網(wǎng)格的新圖像尺寸。要了解更多信息，請(qǐng)參閱有關(guān)如何在 WordPress 中創(chuàng)建其他圖像尺寸的指南。

接下來(lái)，您需要找到要在其中添加代碼片段的正確 WordPress 主題文件。例如，您可以將其添加到 single.php 中，這樣它就會(huì)出現(xiàn)在所有帖子的底部。?

您還可以創(chuàng)建自定義頁(yè)面模板并使用它來(lái)顯示帶有縮略圖的博客文章網(wǎng)格布局。

要了解更多信息，請(qǐng)參閱我們的WordPress 模板層次結(jié)構(gòu)備忘單，以幫助找到正確的主題模板文件。

完成此操作后，您就可以開(kāi)始向 WordPress 添加代碼。由于代碼片段相當(dāng)長(zhǎng)，我們將逐節(jié)分解。

首先，將以下代碼片段添加到主題模板文件中。

<?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 中一鍵使用

此代碼片段設(shè)置后循環(huán)查詢(xún)。如果您愿意，您可以更改“posts_per_page”變量以在每頁(yè)顯示更多帖子。

然后，將以下代碼片段添加到您的主題模板文件中。

<?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 中一鍵使用

此代碼片段為我們的帖子創(chuàng)建兩列，并將顯示標(biāo)題和帖子圖像。它還創(chuàng)建了一個(gè) css 類(lèi)，稍后我們將向您展示如何設(shè)置樣式。?

它還引用“postimage”，因此您需要將其更改為之前創(chuàng)建的圖像尺寸的名稱(chēng)。?

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

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

由

在 WordPress 中一鍵使用

此代碼片段只是關(guān)閉循環(huán)。它還提供了添加后導(dǎo)航的選項(xiàng)，但大多數(shù)網(wǎng)站所有者為此使用不同的插件，因此我們沒(méi)有包含它以避免代碼沖突。?

最終代碼片段的外觀如下。

<?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 中一鍵使用

現(xiàn)在，您需要將以下 CSS 添加到您的網(wǎng)站，以確保您的帖子網(wǎng)格正常顯示。?

如果您以前沒(méi)有這樣做過(guò)，請(qǐng)參閱我們的指南，了解如何輕松地將自定義 CSS 添加到您的 WordPress 網(wǎng)站。

#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 選擇器以查看它們?nèi)绾胃暮笱h(huán)的不同元素。

我們希望本文能幫助您了解如何以網(wǎng)格布局顯示 WordPress 帖子。您可能還想查看我們有關(guān)如何選擇最佳網(wǎng)頁(yè)設(shè)計(jì)軟件的指南，以及我們專(zhuān)家為小型企業(yè)精選的最佳實(shí)時(shí)聊天軟件。