WordPress 循環解釋：它是什麼以及它是如何工作的

循環是 WordPress 的核心部分。 沒有它，您將看不到任何 WordPress 網站上的內容。 它負責確保文章出現在博客頁面和檔案中，以及單個頁面上的靜態內容。

如果您是主題設計師，您將無法學習如何使用它。 但是，作為一個普通的 WordPress 用戶，您甚至可能不知道它的存在。

為了緩解這種情況，在這篇文章中，我們將詳細解釋 WordPress 循環。 我們將介紹它是什麼以及它是如何工作的，以及在 WordPress 中的哪裡可以找到它。 您還將學習如何創建自己的，並查看一些 WordPress 循環示例以鞏固您對它的理解。

什麼是 WordPress 循環（以及在哪裡找到它）？

如果您要簡要解釋 WordPress 循環是什麼，它只是在 WordPress 網站的頁面上獲取和輸出內容的標記。 無論是靜態頁面、帖子、博客頁面還是存檔——WordPress 從數據庫中提取內容並將其顯示在頁面上的任何地方都涉及到循環。

但是，為什麼它首先被稱為循環？

因為它會反復運行。 另外，正如您將在下面看到的，它實際上由一個 PHP 循環組成。

WordPress 循環多久運行一次？

直到沒有任何東西可以顯示。 即使在靜態頁面上，它也會循環顯示可用內容。 但是，在這種情況下，它會在一次通過後停止。

WordPress 循環是什麼樣的？

為了更清楚地說明我們在說什麼，讓我們看一個示例並逐步進行。 這是一個簡單的 WordPress 循環的示例：

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

如果您已經了解 PHP 或者是 WordPress 開發人員，那麼理解它應該沒有任何問題。 但是，對於其他所有人，讓我們一一回顧。

• if ( have_posts() ) : — 這是一個使用 have_posts() 函數的if語句。 如果語句在編程中很常見，它們只是說“如果以下條件適用，則繼續”。 在這種情況下，條件是have_posts() ，它只是檢查是否存在任何可以顯示的帖子。
• while ( have_posts() ) : — 這一行是一個while循環，標誌著 WordPress 循環的開始。 只要條件為真，它就會執行它包含的代碼。 同樣，條件是 WordPress 是否有任何帖子。 它返回true的頻率取決於管理界面中 WordPress 設置中設置的帖子數量。
• the_post(); — 這是循環執行的代碼。 這是一個 WordPress 函數，它調用下一篇文章的所有可用數據並將其保存以準備顯示。 為此，我們有很多模板標籤，我們將在下面討論。
• // Display content here — 此處是我們放置標記的位置，該標記確定要顯示內容的哪一部分以及以何種方式顯示。 它通常是 PHP 和 HTML 的混合體。 我們沒有在這裡展示它，因為它更複雜，我們稍後會討論它。
• endwhile; — 在完成我們需要它做的事情后關閉while循環的一段代碼。
• endif; — 與上面相同，但對於if語句。

所以，基本上結構如下：檢查帖子是否存在，然後從數據庫中提取必要的數據並以預先確定的方式顯示，只要有有效的帖子顯示就重複此操作。

替代語法

一件快速的事情，你有時也會看到這樣寫的循環：

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

這與上面的示例完全相同，只是使用了另一種 PHP 語法。 你使用哪一個真的取決於你。 為了一致性起見，我們將繼續第一個變體。

在哪裡可以找到 WordPress 循環？

每當頁面上出現內容時，循環總是在工作的事實已經回答了在哪裡可以找到 WordPress 循環。 答案在顯示內容的主題的每個模板文件中。

或者，根據您的主題架構，它也可能在模板部分中。 這些是包含常用代碼片段（例如循環）的模板文件。 它們可以被拉入其他文件，而不是每次都重用相同的代碼片段。

例如，如果你打開二十一二十一主題的page.php文件，你可以看到，在這裡，循環被分成了幾部分。 雖然它從文件本身開始，但確定如何輸出數據的部分位於名為content-page.php的模板部分中。

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

WordPress 模板層次結構決定了系統使用哪個文件來顯示什麼類型的頁面，並且每個文件需要包含一個循環或對您可以找到它的位置的引用。

這也意味著循環在單個文件中可能看起來不同，這意味著在不同的頁面上。 例如，在存檔中，您可能只想顯示帖子摘錄，而在主博客頁面上，您可能希望顯示整個帖子（直到“閱讀更多”鏈接）。 為此，您需要不同類型的標記，這就是循環在home.php和archive.php中看起來不一樣的原因。

如何創建循環

為了創建一個循環，您基本上可以從我們上面剖析的簡單代碼開始。 這真的是標準循環。 這裡又是：

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

棘手的部分是我們遺漏的部分：決定內容顯示的部分。 為此，如前所述，您通常混合使用 HTML 和 PHP。 例如，下面是您如何告訴 WordPress 吐出包含在<article>標記中的帖子，該標記具有自定義類和 id，標題為h1標題，以及特色圖像和內容。

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

上面突出的一件事是有很多用下劃線寫的標籤。 這些是 WordPress 模板標籤，它們提供了調用內容公共部分的快捷方式。 在這裡，我們使用the_title()顯示帖子標題，使用the_post_thumbnail() () 顯示特色圖像，使用 the_content( the_content()顯示主要內容。 還有更多，例如the_excerpt()或the_category() 。 您可以在此處找到選項列表。

另一個對 WordPress 循環很重要的事情是條件標籤。 您會看到它們在與循環相關的標記中大量使用，以僅在某些條件下顯示某些內容。 例如，將the_post_thumbnail()包裝到條件語句中以防止 WordPress 在不存在特色圖像時嘗試將其放在頁面上是很常見的。

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

我們在下面有更多示例。 要了解有關條件標籤的更多信息，請查看 WordPress Codex。

WordPress 循環的示例

作為本教程的最後一部分，我們將介紹一些有關如何使用 WordPress 循環的示例。

二十二十一主題

在查看二十一二十一主題時，首先突出的是它大量使用模板部分。 所有標準模板文件，如page.php 、 single.php甚至index.php在文件內開始循環，然後使用get_template_part將內容顯示卸載到其他文件。 在這種情況下，分別是content-page.php 、 content-single.php和content.php 。 以下是single.php的縮短版本作為示例：

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

這在其他文件中也可見。 例如，頁眉和頁腳也有自己的模板部分。 您可以在其他地方看到對循環內的引用。 例如，如果您查看content-single.php ，您可以在末尾看到對author-bio.php模板部分的調用。

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

除此之外，這是相對標準的公平：

1. 打開具有自定義 id 和類的<article> HTML 元素
2. 創建文章標題元素，該元素輸出包裝在 h1 標題中的標題，並使用為二十一二十一定制的功能顯示特色圖像
3. 隨後使用包含the_content()模板標籤的entry-content元素來輸出單個帖子內容
4. 包括分頁標記和帶有另一個二十一二十一功能的條目頁腳，用於顯示帖子元信息
5. 最後，在它自己的模板部分有前面提到的對作者簡介的調用

二十個 WordPress 默認主題

如果您回到第一個 WordPress 默認主題二十，並使用 subversion 存儲庫查看版本 1.0 中的文件，您可以看到處理循環和模板文件是如何隨著時間的推移而發展的。 那時，許多模板文件都包含自己完整的 WordPress 循環，而不是將它們外包給可重用的模板部分。 您可以在主題的page.php中清楚地看到這一點。

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

onecolumn-page.php也是如此，它是一個控制主題提供的自定義頁面模板的文件。 還值得注意的是，它使用了對循環的較舊調用，該調用當時寫在一行中。

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

在現代主題中，您通常會看到它像前面看到的那樣分散在幾行中，以提高代碼的可讀性。

二十個主題也有一個獨立的loop.php文件，它太長了，無法在不超過我的字數限制的情況下包含在此處。 它分為三個部分，控制幾種類型的帖子（圖片庫、 Asides類別的帖子、所有其他帖子）的顯示。 其中每一個都由if和else語句進一步細分，以解釋不同的情況，如存檔和搜索頁面。

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

整個事情包含一個相當複雜的邏輯，這就是為什麼它出來相當長和復雜的原因。 我很高興我們今天有其他處理這些問題的方法，我建議您查看它以查看您不想模仿的 WordPress 循環示例。

順便說一句，如果您認為我對當時的開發人員過於苛刻，請放心，他們同意我的評估。 只需查看loop.php關閉循環的開發人員評論。

 <?php endwhile; // End the loop. Whew. ?>

WordPress 查詢循環塊

您可能沒有意識到它是一個相對較新的 Gutenberg 功能，但塊編輯器（以及擴展的全站點編輯）現在也有一個包含 WordPress 循環的塊。 它被稱為查詢循環塊，您可以像任何其他塊一樣將其添加到您的站點。 最簡單的方法是添加正斜杠並輸入其名稱，例如/queryloop 。 點擊回車，它將出現在頁面上。

該塊允許創建 PHP 循環而無需編寫代碼。 它將自動顯示您網站上的最新帖子。 除此之外，它還有幾個自定義選項。 首先，該塊帶有許多預設佈局。 您可以通過箭頭循環瀏覽它們，也可以單擊“網格”選項一次查看它們。

選擇您喜歡的任何一個，或者如果您已經到達您最喜歡的選項，請單擊“選擇”以完成選擇。 重要的是要注意佈局由塊模式組成，因此預先安排了單個塊的組。 這也意味著您可以根據需要對它們進行不同的排列，它們仍然是正常的塊。 使用箭頭或單擊並按住拖動選項將它們移動到您想要的位置。

此外，每個塊（通常是每個塊組）在主編輯器屏幕和側邊欄中也帶有它們常用的選項。 在這裡，您可以更改它們的顏色、字體大小、格式等。

一旦滿意，如果您發布或預覽頁面，您將看到您的自定義 WordPress 查詢循環出現在其上。 因此，即使您不是 WordPress 開發人員並且不懂 PHP，您仍然可以利用循環提供的功能。

簡而言之 WordPress 循環

循環是任何 WordPress 專業人士都必須熟悉的東西。 但是，即使您是一個比較隨意的用戶，了解它的工作原理仍然不是一個壞主意。 如果您願意，它可能更容易解決問題或創建自定義頁面模板。

在這篇文章中，我們已經討論了循環是什麼，它駐留在哪裡，並詳細分解了它。 我們還了解瞭如何從默認主題和新查詢塊創建自己的循環和示例。 到目前為止，您知道創建和自定義 WordPress 循環所需的一切。

您最喜歡 WordPress 循環的什麼用途？ 請在下面的評論中分享您的想法！

圖片：Jonny Gios/Unsplash、Tine Ivanic/Unsplash