WordPress Loop 是 WordPress 網站顯示內容不可或缺的一部分。如果您想自定義網站的某些部分（或者想涉足 WordPress 開發），您就需要了解 WordPress Loop。
無論你是從未聽說過 WordPress Loop，還是已經有了一些基本的瞭解，這篇文章都會讓你快速掌握關於 WordPress Loop 的所有知識。
我們將解釋它是什麼，以及為什麼使用 Loop 會非常有用。然後，我們將逐步向您展示如何在 PHP 模板（經典主題）中使用迴圈，以及在較新的區塊主題中使用查詢迴圈區塊。
什麼是WordPress Loop？
WordPress Loop 是 WordPress 用來在網站上顯示內容的方式。傳統上，它是 PHP 程式碼，您可以使用模板標籤對其進行自定義，不過較新的 WordPress 區塊主題使用查詢迴圈區塊而不是PHP。
用更專業的術語來說，Loop 查詢網站資料庫以獲取每篇文章的資料，然後根據模板顯示這些資料。要控制這個模板，你可以使用各種模板標籤或區塊，這取決於你使用的是 PHP 還是查詢迴圈區塊。
例如，您有一個列出最新部落格文章的頁面，比如您的主部落格列表頁面：
- 首先，迴圈將檢查是否存在任何文章。
- 如果有文章，它將根據模板顯示第一篇文章。
- 然後，它會檢查是否存在另一篇文章。如果存在另一個文章，它將再次“迴圈”模板，並根據同一模板顯示第二個文章。
- 它會繼續“迴圈”您的文章，直到沒有更多文章為止（或遇到其他限制，如分頁規則）。
下面是閃電博部落格中迴圈的前端示例–每個突出顯示的方框都是“迴圈”的另一次迭代。可以看到，所有六個方框都使用了相同的模板。
WordPress 迴圈示例
WordPress何時使用迴圈來顯示內容？
WordPress 依靠迴圈在任何列出多個內容的頁面（文章、頁面、自定義文章型別等）上顯示內容。
以下是 WordPress 使用迴圈的一些主要情況，但這並不是一個完整的列表：
- 顯示最近文章的網站主頁
- 主部落格列表頁
- 分類列表頁面
- 標籤列表頁面
- 搜尋結果頁面
- 自定義文章型別列表頁面
從技術上講，WordPress 也可以使用迴圈來顯示單個內容。在這些情況下，“迴圈”會在查詢到第一個專案後結束。
然而，當大多數人想到 WordPress 迴圈時，他們想到的是它在多個專案中“迴圈”，以某種列表的形式顯示它們。
WordPress迴圈可以用來做什麼？
學習如何編輯和操作 WordPress 迴圈，可以幫助您使用 WordPress 構建更加友好、動態的網站。
以下是使用 WordPress 迴圈改進網站的三種主要方式…
控制如何顯示基本的文章內容和後設資料
自定義 WordPress Loop 的最常見原因是控制網站內容的基本佈局。
例如，您想控制部落格列表頁面的佈局。通過操作 WordPress 迴圈，您可以控制重要元素的佈局，如文章標題、內容、作者、後設資料（如釋出日期）等。
使用條件，您還可以為不同型別的內容建立不同的佈局。例如，您可以使用一種佈局來列出“新聞”類別的文章，而使用另一種佈局來列出“訪談”類別的文章。
這樣就可以針對網站上不同型別的內容優化設計，為訪問者創造良好的體驗。
插入自定義欄位資料，構建更具活力的網站
瞭解如何使用 WordPress 迴圈還可以幫助您使用 WordPress 構建更多動態型別的內容網站。
例如，假設您想建立一個房地產列表網站。作為其中的一部分，您想建立一個頁面，通過您建立的“房屋”自定義文章型別列出可出售房屋的資訊。
如果您只使用主題自帶的預設文章列表設計，那麼它只會顯示標題和內容等基本資訊，就像顯示普通部落格文章一樣。
通過編輯“房屋”文章型別的 WordPress 迴圈並新增相關模板標籤，您可以在其中包含您使用的自定義欄位的資訊，例如每棟房屋的臥室和浴室數量、面積等。
在文章列表中插入非文章內容（如廣告）
學習如何使用 WordPress 迴圈還可以幫助您在網站內容列表中插入非動態內容。這些內容不是從 WordPress 資料庫中提取的。
例如，您想在列表中的每篇文章之間插入橫幅廣告（或其他型別的靜態內容）。通過編輯迴圈，您可以輕鬆地在佈局中的任意位置注入廣告。
使用WordPress迴圈的兩種方法
在現代 WordPress 主題開發中，與 WordPress Loop 互動的方式取決於您使用的主題型別。
過去，所有的 WordPress 主題都是基於 PHP 模板的，因此您需要在這些主題模板檔案中使用 PHP 與 Loop 進行互動。如今，這類主題被稱為經典 WordPress 主題。
大多數流行的 WordPress 主題仍在使用這種經典方法，這意味著您將使用 PHP 來使用 WordPress Loop。經典主題包括 Astra、GeneratePress、Kadence、Neve、OceanWP 等。
不過，在站點編輯器上構建的新 WordPress 區塊主題不再像經典主題那樣使用 PHP 模板檔案，因此如果使用區塊主題，就不能使用 PHP 來定製 Loop。相反，這些新的區塊主題使用一個特殊的“查詢迴圈”區塊來定製 WordPress 迴圈。
您可以檢視我們的最佳區塊主題列表，瞭解一些使用這種方法的熱門主題示例。
下面，我們將帶您使用這兩種方法來使用 WordPress Loop：
- 如果您使用的是經典主題，您將使用 PHP 與 Loop 進行互動。
- 如果您使用的是區塊主題，您將使用查詢迴圈區塊方法與迴圈進行互動。
如果你不確定自己使用的是哪種主題，可以檢視 WordPress 面板中外觀選單下的選項：
- 如果你看到其他選項，如自定義、小工具和主題檔案編輯器，那麼你使用的是經典主題。
- 如果只看到編輯器選項而沒有其他選項，通常意味著你使用的是區塊主題。
如何在經典主題中使用WordPress Loop（程式碼）
如果您使用的是經典 WordPress 主題，您可以在主題的 PHP 模板檔案中使用 WordPress 迴圈。
下面是一個最基本的 WordPress 迴圈實現示例：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); the_title( '<h2>', '</h2>' ); the_post_thumbnail(); the_excerpt(); endwhile; else: _e( 'Sorry, no posts matched your criteria.', 'textdomain' ); endif; ?>
為了幫助您理解這段程式碼的作用，我們將其分為三個部分：
- 開啟迴圈
- 使用模板標籤控制顯示內容
- 關閉迴圈
然後，我們將進入稍微高階一點的主題，即使用條件語句根據不同情況調整迴圈。
如何開始WordPress迴圈
要開啟 WordPress 迴圈，需要四個元素：
<?php– 這將告訴你的網路伺服器，你將使用 PHP。if ( have_posts() )– 這將告訴伺服器，它應該檢查網站資料庫中是否有符合查詢條件的文章，如果有，就執行下面的程式碼。如果沒有文章，可以使用 else 語句新增一些後備文字，我們將在下面介紹。while ( have_posts() )– 這將告訴您的伺服器，只要有文章要顯示，就應該一直迴圈。這個限制一般由你在“設定”→“閱讀”區域中設定。例如，如果您將網站配置為每頁最多顯示 10 篇文章，那麼伺服器將一直迴圈顯示 10 篇文章（只要您釋出了至少 10 篇文章）。the_post();– 這將告訴伺服器從網站資料庫中實際獲取每篇文章的資料。您可以使用模板標記來控制這些資料的顯示，我們將在下一節介紹。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
如何控制WordPress迴圈內容
開啟 WordPress 迴圈後，您可以使用模板標籤來控制每篇文章要包含的資訊，以及這些內容的總體佈局*。
注：當然，你還可以使用 HTML 和 CSS 來幫助你完成這項工作。包括如何在 WordPress 中使用 CSS。
您在 Loop 中使用的模板標籤將在每篇顯示的文章中重複使用。
以下是一些最常用的模板標記，您可能需要使用它們：
- the_title()
- the_content()
- the_excerpt()
- the_post_thumbnail()
- the_author()
- next_post_link()
- the_ID()
- the_meta()
- the_shortlink()
- the_tags()
- the_time()
- previous_post_link()
- the_category()
如果您正在構建更多的自定義 WordPress 網站，您可以在 WordPress 迴圈中包含來自自定義欄位的資料。最簡單的方法是通過高階自定義欄位（ACF）、Meta Box 或Pods 等外掛來實現，這些外掛都有自己的模板標籤功能，您可以在WordPress迴圈中使用。
例如，我們來看看一個簡單迴圈的語法，它只顯示標題、特色圖片縮圖和每篇文章的摘錄。
如下所示：
// first, we need to open the loop as we showed you in the previous section <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); // now, we can use template tags to control what information to display for each post the_title( '<h2>', '</h2>' ); the_post_thumbnail(); the_excerpt();
如何結束WordPress迴圈
要關閉 WordPress 迴圈，您需要關閉 while 迴圈、if 語句和 PHP。
為了處理WordPress無法返回任何文章的情況，您可以在關閉 if 語句之前新增一個 else 語句。
下面是關閉迴圈的示例，其中新增了 else 語句，以處理沒有文章匹配查詢的情況。
// first, we need to open the loop as we showed you in the previous section <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); // now, we can use template tags to control what information to display for each post the_title( '<h2>', '</h2>' ); the_post_thumbnail(); the_excerpt(); // once we're finished with the template tags, we can now close the loop endwhile; else: // this tells your site what to do if no posts match the query _e( 'Sorry, no posts matched your criteria.', 'textdomain' ); endif; ?>
在WordPress迴圈中使用條件控制行為
瞭解了迴圈的基本結構後，您就可以開始以更高階的方式使用它了。
使用條件語句是最好的入門方法之一。這些語句可以讓你輕鬆地針對不同型別的內容調整 Loop 的行為，比如在我們之前的例子中，你可以使用一種佈局來列出“訪談 ”類別中的文章，而另一種佈局則用於“新聞”類別中的文章。
以下是一些可以使用的條件標記：
- is_home()
- is_admin()
- is_single()
- is_page()
- is_page_template()
- is_category() 或 in_category()
- is_tag()
- is_author()
- is_search()
- is_404()
- has_excerpt()
如果您點選上面的連結，就可以看到如何針對不同型別的條件修改 WordPress 迴圈的程式碼示例。
例如，使用 in_category，對 ID 為“3”的類別中的文章應用不同的 <div> 樣式。
<?php // Start the Loop. if ( have_posts() ) : while ( have_posts() ) : the_post(); /* * See if the current post is in category 3. * If it is, the div is given the CSS class "post-category-three". * Otherwise, the div is given the CSS class "post". */ if ( in_category( 3 ) ) : ?> <div class="post-category-three"> <?php else : ?> <div class="post"> <?php endif; // Display the post's title. the_title( '<h2>', ';</h2>' ); // Display a link to other posts by this posts author. printf( __( 'Posted by %s', 'textdomain' ), get_the_author_posts_link() ); // Display the post's content in a div. ?> <div class="entry"> <?php the_content() ?> </div> <?php // Display a comma separated list of the post's categories. _e( 'Posted in ', 'textdomain' ); the_category( ', ' ); // closes the first div box with the class of "post" or "post-cat-three" ?> </div> <?php // Stop the Loop, but allow for a "if not posts" situation endwhile; else : /* * The very first "if" tested to see if there were any posts to * display. This "else" part tells what do if there weren't any. */ _e( 'Sorry, no posts matched your criteria.', 'textdomain' ); // Completely stop the Loop. endif; ?>
如何在區塊主題中使用WordPress迴圈（站點編輯器）
如上所述，WordPress 區塊主題使用站點編輯器來控制主題模板，而不是 PHP 模板檔案。
因此，如果您使用的是區塊主題，就不能使用 PHP 來定製 WordPress 迴圈。取而代之的是使用查詢迴圈區塊。
不過基本原理是一樣的。
從本質上講，您將使用查詢迴圈區塊來開啟迴圈。在 Query Loop 區塊中有一個 Post Template 容器和其他用於分頁和“無結果”的容器。
然後，您將在文章模板容器中新增 WordPress 主題區塊，以控制每個迴圈項的佈局，而不是像使用 PHP 那樣使用模板標記。
如何新增查詢迴圈區塊
首先，進入網站編輯器（外觀 → 編輯器），建立或編輯相關模板。您也可以將迴圈新增到單個內容中，例如您想列出文章的單個頁面。
無論哪種方式，你都可以先新增查詢迴圈區塊。然後，你可以單擊“選擇”使用主題中現有的迴圈模式，或單擊“從空白開始”從空白畫布開始。
在本例中，我們將選擇從空白開始。
如何新增查詢迴圈區塊。
然後，您可以選擇幾種不同的啟動方式，最簡單的選擇是隻顯示每個專案的標題和內容。
如何選擇迴圈的起始變體。
完成上述操作後，您就可以使用查詢迴圈區塊側邊欄中的設定來控制您想在迴圈（“查詢”）中包含的內容。
預設情況下，它會列出普通文章，但你也可以更改文章型別，列出其他型別的內容。您還可以更改順序並使用篩選器只查詢特定的內容，如具有特定類別的內容、來自特定作者的內容等。
如何自定義 Loop 的查詢。
如何自定義迴圈模板
現在，您可以使用主題部分的區塊來進一步自定義查詢迴圈中的文章模板。同樣，這些區塊的基本作用與 PHP 程式碼中的模板標記相同。
例如，如果您想顯示每篇內容的作者，可以在需要顯示作者姓名的地方新增作者姓名區塊。
如何自定義 Loop 的模板。
您還會發現其他相關專案區塊，如精選圖片、日期、類別、標籤等。
如果檢視大綱，就會發現所有這些區塊都位於“文章模板 ”組中。
檢視查詢迴圈區塊的結構。
還有其他組來控制分頁和查詢不返回結果的情況。
使用WordPress迴圈的提示
由於迴圈是 WordPress 不可分割的一部分，任何錯誤都可能給網站帶來問題。尤其是在使用 PHP 模板時，語法錯誤可能會觸發“您的網站出現嚴重錯誤”訊息。
為了避免出現問題，這裡有一些提示…
在本地開發環境中進行實驗和學習
如果這是你第一次使用 WordPress Loop，你可能會想嘗試和玩弄不同的概念，以進一步瞭解它是如何工作的。
為安全起見，您可以使用本地 WordPress 開發環境，它為您提供了一個由本地計算機驅動的安全沙盒。
在實時網站的暫存環境中工作
如果您正在為一個實時 WordPress 網站開發 WordPress Loop，我們強烈建議您在將更改應用到實時 WordPress 網站之前，先在暫存網站上完成所有工作。
驗證一切正常後，您就可以輕鬆地將暫存更改推送到網站的正式版本。
替代直接使用WordPress迴圈的外掛
如果您覺得直接使用 WordPress Loop 有點困難，那麼有幾款流行的外掛可以為您提供其他“迴圈”內容的方法，而無需使用 PHP 或查詢迴圈區塊。
以下是一些可供參考的 WordPress 迴圈外掛，但這絕不是一份完整的清單。
Elementor Pro
Elementor 是一款流行的視覺化拖放頁面生成器外掛。使用 Elementor Pro，你可以獲得完整的主題構建功能，使用 Elementor 設計主題模板檔案。2022 年，Elementor 為 Elementor Pro 新增了迴圈生成器功能，讓你可以使用 Elementor 的視覺化介面控制和自定義“迴圈”內容。
我們撰寫了完整的 Elementor 使用指南，以及大量其他 Elementor 內容。
Bricks
Bricks 是另一款流行的 WordPress 視覺化網站構建工具。作為其眾多設計工具的一部分，它包括自己的查詢迴圈構建器，該構建器使用簡化的程式碼方法，並在圖形介面中提供大量附加選項。
我們還有一份關於使用 Bricks 構建 WordPress 網站的指南。
WP Show Posts
WP Show Posts 沒有前兩個外掛那麼靈活。不過，如果你正在尋找一種簡單的方法來列出各種格式的 WordPress 文章，它可能是最簡單的工具。
它是免費的，與流行的 GeneratePress 主題來自同一個開發商。雖然開發者不再為外掛新增新功能，但他仍在維護外掛的現有功能。
小結
要提升 WordPress 開發技能，就必須瞭解 WordPress 迴圈。Loop 是 WordPress 顯示內容不可或缺的一部分；學習如何使用 Loop 可以讓您更好地控制如何在網站上顯示內容。
儘管如此，較新的 WordPress 區塊主題不再像經典主題那樣依賴 PHP 模板，因此您可能不需要使用 PHP 來使用 Loop。相反，如果你正在接受區塊主題運動，你可以使用查詢迴圈區塊來實現類似的效果。
無論如何，學習如何更有效地使用 WordPress Loop 都會讓您受益匪淺。
評論留言