你決定創(chuàng)建一個區(qū)塊主題，但不知道從哪里開始？在本文中，我將帶大家一起了解一下區(qū)塊主題的文件結(jié)構(gòu)。區(qū)塊主題中可以包含哪些目錄和文件，其中哪些是必需的，它們都有哪些作用。
首先，建議你下載Twenty Twenty Four 主題，我們可以基于這個主題，根據(jù)我們的需求，修改創(chuàng)建自己的區(qū)塊主題。
重要提示：本文假定你是一名經(jīng)驗豐富的 WordPress 開發(fā)人員，但不熟悉區(qū)塊主題。也許你過去只使用過經(jīng)典主題。我也不會進(jìn)一步解釋如何創(chuàng)建和修改區(qū)塊主題文件。本文的目的只是向你展示組成區(qū)塊主題的各個文件及其用途。
區(qū)塊主題結(jié)構(gòu)
一個基本的區(qū)塊主題由一個文件夾組成，文件夾內(nèi)有一個 style.css 文件和一個 templates/index.html 文件。更強(qiáng)大的主題的結(jié)構(gòu)可能與下面的截圖類似。
下面的表格列出了構(gòu)成 WordPress 區(qū)塊主題的所有必需和可選文件夾和文件。
必需文件夾
區(qū)塊主題必須包含以下文件夾：
| 文件夾名稱 | 說明 |
|---|---|
| templates | 此文件夾包含主要模板文件。該文件夾內(nèi)需要有一個 index.html 文件。 |
可選文件夾
從技術(shù)上講，你可以在區(qū)塊主題中添加任何文件夾。以下是您可以添加的可選文件夾，WordPress 會將其用于特定用途。
| 文件夾名稱 | 說明 |
|---|---|
| parts | 放置全局模板部件。 |
| patterns | 放置自定義區(qū)塊模版。 |
| styles | 放置自定義樣式（皮膚）。 |
必需文件
下面兩個文件是一個基礎(chǔ)的WordPress必需的文件。
| 文件名 | 說明 |
|---|---|
style.css | 該文件包含主題的 “頁眉”，為 WordPress 提供有關(guān)主題的信息，如名稱、描述、版本等。我們可以查看官方的style.css 文檔來了解如何正確設(shè)置該文件。 |
templates/index.html | 這是主要文件，如果沒有其他模板，該文件將用于顯示存檔、文章或頁面。 |
WordPress.org 資源庫所需的文件
如果你打算將區(qū)塊主題上傳到 WordPress 存儲庫，則需要在區(qū)塊主題中包含以下文件。
| 文件名 | 說明 |
|---|---|
readme.txt | 該文件為 WordPress 提供主題信息，如描述、安裝說明、鳴謝、許可證、版權(quán)、更新日志及其他。WordPress.org 代碼庫沒有關(guān)于主題 readme.txt 文件的任何文檔，但它與插件的 readme.txt 文件基本相同。 |
screenshot.png | 該文件是WordPress儀表盤頁面 “外觀”>”主題 “下顯示屏幕截圖。即使你不是為 WordPress.org 存儲庫創(chuàng)建主題，我也建議你包含這個文件，因為它看起來比空白的正方形更漂亮。 |
可選文件
從技術(shù)上講，任何文件或文件夾都可以添加到區(qū)塊主題中，因此請記住這一點。不過，你可以在區(qū)塊主題中添加一些特定的文件夾和文件，以完成各種任務(wù)。
| 文件名 | 說明 |
|---|---|
rtl.css | 你可以在主題中加入一個 rtl.css 文件，如果網(wǎng)站的語言方向是從右到左，該文件就會自動加載?，F(xiàn)在，你應(yīng)該不需要這個文件了，因為你可以通過現(xiàn)代屬性編寫方向感知 CSS。比如使用 margin-inline-end 代替 margin-right。 |
theme.json | 該文件用于定義區(qū)塊主題的全局設(shè)置和樣式。雖然這是一個可選文件，但你可能會為每個區(qū)塊主題創(chuàng)建一個。請參閱官方的 theme.json 文檔。 |
functions.php | 該文件始終處于加載狀態(tài)，可用于為區(qū)塊主題添加 PHP 代碼。你也可以在該文件包含其他 PHP 文件。在一個簡單的區(qū)塊主題中，如果 style.css 文件中包含實際的 CSS，你可能只需要使用此文件來引入該文件（如果你的 style.css 文件只用于定義主題信息，則不需要引入）。 |
templates/{file-name.html} | 上面我們提到了 templates/index.html 文件是必需的，但我們也可以在 templates 文件夾中添加其他文件來定義網(wǎng)站不同部分的布局。 |
parts/{file-name.html} | 在 parts 文件夾中，你可以包含 HTML 文件來注冊區(qū)塊模板部分。這些模板可在其他模板中使用，并可在網(wǎng)站編輯器中進(jìn)行全局修改。在基本的區(qū)塊主題中，你可能會包含 parts/header.html 和 parts/footer.html。 |
patterns/{file-name.php}。 | 如果你想創(chuàng)建可重復(fù)使用的模板區(qū)塊（又稱模式），可以在 patterns 文件夾中為每個模式放置一個文件。請注意，模式是 PHP 文件，而不是 HTML 文件。 |
styles/{file-name}.json | 你可以在 styles 文件夾中放置 JSON 文件，為主題注冊 “皮膚”。每個文件的編碼都與 theme.json 文件相同，并可對皮膚進(jìn)行任何修改。 |
區(qū)塊主題模板文件列表
創(chuàng)建區(qū)塊主題時，你不會只有一個 templates/index.html 文件。你需要為網(wǎng)站的不同部分創(chuàng)建不同的布局。以下是您可以添加到區(qū)塊主題中的不同模板文件列表。WordPress 會根據(jù)訪問頁面自動選擇并顯示合適的模板。區(qū)塊主題的模板繼承規(guī)則和經(jīng)典主題一樣，熟悉開發(fā)經(jīng)典主題的開發(fā)者應(yīng)該很容易掌握。
我們可將以下模板文件添加到區(qū)塊主題的模板文件夾中，以修改網(wǎng)站各部分的顯示方式。
| 文件名 | 說明 |
|---|---|
home.html | 用于 “主頁 “頁面的文件。在 WordPress 中，”主頁 “是顯示最新文章的頁面。因此，如果你使用的是靜態(tài)主頁，并在“設(shè)置”>”閱讀 “下定義了文章頁面，那么該文件將用于文章頁面，而不是靜態(tài)頁面。 |
singular.html | 查看單篇文章（標(biāo)準(zhǔn)和自定義）時使用的文件。這是 single.html 文件或 single-{post_type} 文件的備用文件。 |
single.html | 用于顯示單個文章的文件。 |
single-{post_type}.html | 查看特定自定義文章類型文章時使用的文件。 |
archive-{post_type}.html | 查看文章類型存檔時使用的文件。該存檔頁面只有在自定義文章類型 has_archive 參數(shù)設(shè)置為 true 時才會存在。 |
page.html | 查看標(biāo)準(zhǔn)頁面時使用的文件。 |
category.html | 查看單一類別存檔時使用的文件。 |
tag.html | 查看單個標(biāo)簽存檔時使用的文件。 |
author.html | 查看作者存檔時使用的文件。 |
date.html | 顯示基于日期的存檔（如 site.com/2024/）時使用的文件。出于搜索引擎優(yōu)化的原因，一般建議顯示這些存檔。 |
archive.html | 用于顯示分類、標(biāo)簽或日期存檔（如果不存在上述更具體的存檔）的文件。 |
search.html | 用于搜索結(jié)果頁面的文件。 |
attachment.html | 查看圖片或視頻等單個附件時使用的文件。出于搜索引擎優(yōu)化的考慮，建議禁用這些存檔。 |
image.html | 顯示單張圖片頁面時使用的文件。該文件將覆蓋 attachment.html 文件。 |
404.html | 顯示 404 錯誤頁面時使用的文件。 |
區(qū)塊主題非常簡單！
正如你所看到的，創(chuàng)建區(qū)塊主題所需的文件很少，但可選文件卻很多。區(qū)塊主題文件和模板結(jié)構(gòu)其實非常簡單易懂。希望如果你有點迷茫，這篇指南能幫到你。
如果你有任何疑問或問題，請在下面的評論中告訴我。
