如何在WordPress主題中創建張貼縮略圖的網格顯示


在創建WordPress網站設計時,您是否曾想過創建帖子的網格顯示? 網格佈局非常適合以媒體為中心的網站,例如我們的WordPress畫廊或其他展示類型的網站。 像Genesis這樣的主題框架已經有一個預先構建的Grid Loop系統。 但是,如果您嘗試在自定義WordPress主題中進行網格顯示,那麼我們將為您提供幫助。 在本文中,我們將向您展示如何在WordPress主題中創建帖子縮略圖的網格循環顯示。

注意:您需要對CSS以及WordPress循環的工作方式有一個公平的了解。

在開始之前,讓我們看一下我們要完成的工作:

網格柱顯示

如果您注意到,此頁面上的帖子將顯示在網格中。 柱子的左側有一個邊框,但右側沒有。 在正常的帖子循環中,所有帖子都採用相同的樣式,因此您在兩個帖子上都會有一個看起來很奇怪的右邊框。 還要注意,間距是相當對稱的。 普通循環再也無法做到這一點。 現在您可以看到我們要完成的工作,讓我們來看看如何完成它。

您需要做的第一件事是確保您的主題已打開WordPress帖子縮略圖。 您還應該考慮如何調整WordPress圖像的大小,因為您將需要它。

設置好縮略圖和尺寸後,就可以開始使用了。 讓我們設置循環查詢:


上面的代碼看起來很簡單,因為我們已經進行了內聯註釋。 您可能需要編輯的一件事是posts_per_page變量,以滿足您的需求。 如果需要,還可以添加其他查詢參數。 現在我們開始了循環,讓我們看一下我們如何顯示其中的帖子。

			
" title="">

" title="">

" title="">

" title="">

我們通過檢查計數器是否為1來開始代碼,這表示顯示左側網格。 我們只需進入並使用自定義CSS類“ griditemleft”開始div。 在其中添加了帖子縮略圖和帖子標題。 您可以添加或減去任何循環元素(例如節選,日期,作者信息,評論數等)。 注意:在縮略圖中,我們正在調用其他圖像尺寸。 您可能必須用自己創建的尺寸替換size-name。

在第一個網格之後,我們添加了elseif,以查看$ counter是否與$ grids中指定的數字匹配(之所以這樣,是因為我們將在第二篇文章中)。 如果計數器匹配,則可以顯示以自定義CSS類“ griditemright”開頭的右側網格。 注意,在關閉griditemright div之後,我們將添加一個清除類。 我們將在到達CSS部分時對此進行解釋。

循環完成後,我們將計數器重置為0,因此它可以在下一行再次開始。

我們可以簡單地通過添加以下代碼結束循環:


上面的代碼基本上將繼續計數器直到達到我們的query_post變量中指定的限制。 我們之所以沒有添加上面的導航代碼,是因為許多人為此使用了插件或其他顯示方法。 因此,我們讓您自行決定。

因此,我們的最終循環代碼將如下所示:

" title="">

" title="">

" title="">

" title="">

現在我們已經準備好了PHP代碼,讓我們看看如何設計它的樣式。

我們的默認輸出如下所示:

Post Image

Post Title

Post Image

Post Title

這是您需要修改的類:

#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帖子製作網格循環顯示。