WordPress主題模板層次結構指南

WordPress主題模板層次結構指南

如果您想自定義主題或從頭開始構建新主題,瞭解WordPress主題模板層次結構的工作原理非常重要。

首先,這個WordPress系統有助於保持一切井井有條。一旦您知道所有主題模板檔案是什麼、它們的作用以及它們的優先順序如何,您將能夠改變WordPress網站外觀的幾乎所有方面。

在本文中,我們將解釋WordPress主題模板層次結構是什麼以及它是如何工作的。然後,我們將提供每種型別的WordPress頁面中涉及的模板檔案的完整細分(包括供參考的備忘單),以幫助您充分利用它們。

  1. WordPress主題模板層次結構簡介
  2. WordPress主題模板層次結構如何工作
  3. 在哪裡找到和更改WordPress主題模板檔案
  4. 按頁面型別劃分的WordPress主題模板層次結構細分
  5. 子主題適合WordPress模板層次結構的位置
  6. 使用WordPress模板標籤進行主題開發

WordPress模板層次結構簡介

通常,非動態網站使用靜態HTML和CSS檔案來呈現其內容。然而,WordPress是一個基於PHP程式語言的動態平臺。每個WordPress站點都會載入多個.php 檔案,每個檔案都控制特定部分或元件的外觀。

每當您載入某種型別的頁面時,內容管理系統 (CMS)都會查詢與其對應的模板檔案。

例如,如果您使用WordPress的搜尋功能並載入搜尋結果頁面,CMS將查詢兩個模板檔案:

  1. search.php,它控制搜尋結果頁面的外觀
  2. index.php,這是WordPress在每個層次結構中找不到頂部選項時使用的預設模板檔案

您有權訪問的模板檔案取決於您使用的主題。所有WordPress主題 都是模板、樣式表和其他元素(例如影象)的集合。所以在上面的例子中,如果你使用的主題包含一個search.php模板,WordPress 會找到並載入它。

在某些情況下,您可能會使用不包含要載入的頁面型別的模板檔案的主題。這就是WordPress模板層次結構的用武之地。它是一個內建系統,可以告訴 WordPress 要載入哪些模板檔案以及以何種順序載入。

對於搜尋頁面,如果WordPress找不到search.php檔案,它將向下移動到層次結構中的下一個檔案,即index.php。該 檔案是模板層次結構中每個分支的最終後備。

理論上,您可以擁有一個僅包含一個模板檔案的功能齊全的主題,即index.php

但是,在實踐中,具有單個模板檔案的主題幾乎不會包含任何樣式自定義,並且每種型別的頁面看起來都幾乎相同。除非這就是您的目標,否則瞭解WordPress模板層次結構是您作為主題開發人員可以採取的最重要的步驟之一。

WordPress模板層次結構如何工作

您可能知道,WordPress允許您根據要釋出的內容使用多種型別的頁面。您可以使用七個主要類別:

  1. 首頁
  2. 單個文章
  3. 單頁
  4. 自定義文章型別
  5. 搜尋結果頁面
  6. 類別和標籤頁面
  7. 404錯誤頁面

這些頁面中的每一個都有自己的自定義層次結構,這意味著它使用一組特定的模板檔案。

如果您快速瀏覽任何主題的資料夾,您通常會發現一組模板檔案。以下是部落格文章主題目錄中列出的模板檔案示例:

WordPress主題目錄中列出的模板檔案

WordPress主題目錄中列出的模板檔案

這是一個單一的文章頁面型別,這意味著它使用single.php檔案作為頁面上主要內容(部落格文章本身)的模板。

此外,它對每個頁面元素都有一個單獨的模板檔案,其中大部分你應該一眼就能識別出來,包括:

  • Header
  • Footer
  • Comments
  • Sidebar

重要的是要理解,儘管每種頁面型別都有自己的層次結構,但它們也經常共享通用模板檔案,例如header.php 和footer.php

如果您正在構建自己的主題,這意味著您可以為每種型別的頁面建立自定義樣式,同時還可以構建模板檔案以重複使用。

您還可以為適用於某些頁面型別的側邊欄和頁尾等元素建立自定義模板檔案。這種靈活性完全歸功於WordPress對模板的模組化方法。

當您切換主題時,您看到的佈局差異歸因於WordPress載入的新模板檔案。子主題也在WordPress主題層次結構中發揮作用,我們將很快討論。

在哪裡找到和更改WordPress模板檔案

.php檔案可以包含PHP程式碼和HTML標記(所有這些都可以編輯)。因此,WordPress模板檔案可以像您需要的那樣複雜。在許多情況下,WordPress使用的模板檔案是它們管理的元素的函式集合。

舉個例子,這裡快速瀏覽一下WordPress官方二〇二一主題使用的header.php模板檔案:

二〇二一主題header模板檔案

二〇二一主題header模板檔案

正如我們所提到的,每個WordPress主題都包含自己的一組模板檔案。您可以通過檔案傳輸協議 (FTP) 客戶端訪問網站根目錄中的資料夾來檢視您的主題包含哪些模板檔案。

這是以前的WordPress官方主題Twenty Twenty的樣子:

Twenty Twenty主題目錄和模板檔案

Twenty Twenty主題目錄和模板檔案

預設情況下,WordPress將載入位於主題主目錄(wp_content > Themes)或template-parts資料夾中的模板檔案。

如果您計劃建立多個模板檔案,我們建議您將主頁模板保留在主目錄中。對於更具體的模板檔案,例如全形頁面或側邊欄佈局,您可以使用子目錄。

掌握完整的WordPress模板層次結構的最佳方法是通過備忘單。在這種情況下,我們將向您展示模板層次結構的視覺化概覽,由WordPress Codex提供:

WordPress模板層次結構

WordPress模板層次結構

WordPress Codex包含大量有關模板層次結構的資訊,因此我們建議為該資源新增書籤。現在,讓我們深入瞭解每種頁面型別及其使用的模板檔案。

按頁面型別劃分的WordPress模板層次結構細分

WordPress 使用七種主要型別的頁面。在本節中,我們將討論它們中的每一個,併為您提供它們使用的模板檔案的細分。讓我們從頭版開始。

  1. 首頁模板檔案
  2. 單個文章
  3. 單頁
  4. 自定義文章型別
  5. 搜尋結果頁面
  6. 類別和標籤頁
  7. 404錯誤頁面

首頁模板檔案

您的WordPress主頁 是大多數使用者訪問您的網站時的第一站。實際上,從一個站點到另一個站點的首頁佈局可能會有很大差異。

但是,對於基本的首頁,WordPress會按順序查詢這三個模板檔案:

  1. front-page.php
  2. home.php
  3. index.php

如果您的主題不包含front-page.php模板檔案,WordPress將預設使用第二個選項,依此類推。與往常一樣,index.php檔案是WordPress沿模板決策樹製作的最後一站。

單個文章

單個WordPress文章使用單個文章模板層次結構。對於每篇博文的主要內容,WordPress會查詢以下檔案:

  1. single.php
  2. singular.php
  3. index.php

但是,如果您檢視模板備忘單,您會注意到在某些情況下會出現更復雜的層次結構。

這是因為WordPress允許您為單個文章和單個類別指定模板檔案,如果找不到這些選項中的任何一個,則預設為single.php 。

除了主模板檔案之外,您還有諸如header, footer, sidebars和comments等元素。正如我們之前提到的,這些元素中的每一個都可以有自己的模板檔案。

單頁

釋出後,單頁是大多數WordPress網站的生計。在大多數情況下,它們使用與您的首頁不同的模板,除非兩種型別的頁面都預設為index.php

以下是單頁模板層次結構的外觀:

  1. page.php
  2. singular.php
  3. index.php

儘管單個文章和頁面的模板層次結構相似,但存在一些關鍵差異。

首先,當涉及到頁面時,WordPress使用自定義檔案的get_page_templates() path,您可以使用它來更改或重定向預設頁面模板。

此外,您可以為特定的slug和 ID建立模板。如果您有page-{slug}.phppage-{id}.php檔案,WordPress 將嘗試按順序載入每個檔案,然後預設為page.php

自定義文章型別

您可以為您可能不想與頁面或帖子捆綁的各種內容建立自定義文章型別。自定義文章型別為您的內容提供了更高程度的組織,並且它們還具有自己的模板層次結構:

  1. archive-{post_type}.php
  2. archive.php
  3. index.php

自定義文章型別的模板層次結構不像整頁或文章那樣複雜。但是,WordPress允許您為每種自定義文章型別建立模板檔案,因此它們不必共享相同的確切佈局。

搜尋結果頁面

我們已經向您介紹了WordPress用於搜尋結果頁面的模板層次結構,因此讓我們簡要回顧一下它的外觀:

  1. search.php
  2. index.php

隨著我們遠離諸如文章或首頁等“複雜”頁面型別,WordPress模板層次結構變得更加簡單。

對於搜尋頁面,您通常不需要在結果本身之外包含太多元素。結構越簡單,層次結構通常越短。

類別和標籤頁

儘管許多網站不直接連結到它們,但WordPress會為您的標籤和類別生成集合頁面。taxonomy中的每個專案也有特定的子頁面。

考慮到具有大型內容庫的網站的分類法可能變得多麼複雜,這種層次結構涉及比平常更多的“步驟”:

  1. category–{slug}.php
  2. category-{id}.php
  3. category.php
  4. archive.php
  5. index.php

請注意,標籤使用相同的層次結構,除了在所有例項中“標籤”替換“類別”。

理論上,您可以為WordPress網站上的每個類別或標籤建立單獨的模板檔案,並通過slug或ID識別它們。然而,很少有網站真正經歷過所有這些麻煩。

如果您不打算讓訪問者瀏覽您的類別頁面,請隨意預設使用archive.php模板。

404錯誤頁面

有時,訪問者會嘗試訪問不存在的頁面。發生這種情況時,WordPress將返回404錯誤頁面

預設情況下,WordPress不提供自定義此頁面外觀的選項。但是,您可以通過模板檔案自己調整它的外觀。模板層次結構相當短:

  1. 404.php
  2. index.php

隨著您網站的增長,使用者可能會遇到404錯誤的例項也會隨之增長。針對這些情況使用自定義錯誤頁面可以幫助您告知訪問者頁面未載入的原因,將他們指向另一個方向,並減少挫敗感。

載入404模板檔案時,WordPress會在使用預設檔案之前查詢並載入您的自定義檔案。

子主題適合WordPress模板層次結構的位置

如果您喜歡自定義WordPress主題,最佳做法是使用子主題。子主題在WordPress模板層次結構中也佔有一席之地,但如果您檢視我們之前提供的備忘單,它並不明顯。

簡而言之,使用子主題會為您使用的任何頁面型別在模板層次結構中新增第二層。

假設您正在使用包含單個頁面的自定義模板檔案的子主題。以下是WordPress嘗試載入檔案的順序:

  1.  子主題內page.php
  2.  父主題中的page.php
  3.  子主題中的singular.php
  4.  父主題中的singular.php
  5.  子主題中的index.php
  6.  父主題中的index.php

如果WordPress可以在您的子主題中找到模板檔案的版本,那麼它將載入該版本,即使在父主題中有對應的模板檔案也是如此。在某些情況下,您可能會發現自己想要為您使用的主題自定義模板檔案,並且在這些情況下利用子主題是完美的。

與其他型別的自定義一樣,當您更新主題模板檔案時,您將丟失對它的更改。通過子主題新增這些更改將使您擺脫這種情況。

使用WordPress模板標籤進行主題開發

在WordPress開發中,您經常會遇到模板標籤,這是您可以用來動態生成和獲取資料的PHP函式。模板標籤通常是模板檔案的一部分,但它們不可互換。

WordPress在其程式碼中構建了數十個模板標籤,您可以在主題開發中使用這些標籤。一些例子包括:

  • get_header()
  • get_footer()
  • get_sidebar()
  • get_search_form()
  • 獲取模板部分()

這些標籤使您能夠從您正在使用的主題中收集模板檔案。實際上,這意味著您可以將特定元素新增到主模板檔案,例如front-page.phpindex.php

如果您想要一份可以在WordPress開發中使用的所有模板標籤的完整列表,請檢視WordPress Codex

在那裡,您將找到有關如何使用每個模板標記、它們的各個引數以及實際程式碼示例的說明。

小結

儘管WordPress模板層次結構乍一看可能看起來很複雜,但它歸結為一系列簡單的決策樹。每當您訪問WordPress網站時,CMS都會檢視您嘗試訪問的頁面型別,然後使用層次結構來確定要載入的模板檔案。

除了每種頁面型別的主要模板之外,您還可以為單獨的元素(例如頁首、頁尾和側邊欄)提供模板檔案。

這種模組化方法使您可以完全控制網站上每個頁面的外觀,並幫助您在WordPress開發過程中節省時間。

評論留言