WordPress 主題在塑造網站的外觀和功能方面起著至關重要的作用。它們定義了內容的顯示方式，並提供各種設計選項來建立獨特的網站。多年來，WordPress 主題有了長足的發展，從我們現在所說的經典主題開始。
經典主題在很長一段時間內都是標準主題，依賴於 PHP 模板，需要一定的編碼知識才能進行定製。這些主題提供了極大的靈活性，但對於那些網路開發新手來說可能具有挑戰性。後來，WordPress 5.9 的釋出標誌著一個重大轉變，即引入了區塊主題。
WordPress 經典主題與區塊主題
經典主題是 WordPress 主題的傳統型別。它們通過使用 PHP 編寫的模板檔案、CSS 來設計風格，並使用 JavaScript 來增加功能，從而定義網站的整體外觀和感覺。這些高度可定製的主題多年來一直是 WordPress 網站的支柱。
另一方面，區塊主題是一種較新的 WordPress 主題型別，用於支援全站編輯（FSE）功能。與傳統主題不同，它們使用區塊來構建網站的所有部分，包括頁首、頁尾和內容區域。這使得在 WordPress 編輯器中直接設計和定製網站的方式更加直觀。
經典主題和區塊主題的主要區別在於
- 自定義– 經典主題需要 PHP 和一定的編碼技能，而塊狀主題使用視覺化編輯器，更易於自定義。
- 靈活性– 經典主題為開發人員提供了更多靈活性，而區塊主題則注重易用性和可訪問性。
- 編輯– 經典主題可通過主題檔案和 WordPress 定製器進行編輯。塊主題則可以完全通過區塊編輯器進行編輯。
選擇開發哪種型別的主題
在經典主題和區塊主題之間做出選擇取決於你的需求和技術水平。如果你是一名開發人員，希望獲得最大的靈活性，那麼經典主題可能是你的首選。但是，如果您更喜歡使用者友好和視覺化的建站方式，區塊主題則是一個不錯的選擇。
這兩類主題各有所長，適合不同型別的使用者和專案。瞭解這兩種主題的核心區別有助於您做出明智的決定，選擇最適合您網站需求的主題。
本文旨在幫助你理解並掌握經典主題和區塊主題的核心概念，讓你能夠有效地建立和定製 WordPress 主題。
瞭解主題結構
無論是經典主題還是區塊主題，瞭解它們的結構都是有效定製 WordPress 網站的關鍵。
在探索每個主題的結構之前，你應該知道所有 WordPress 主題都儲存在 WordPress 安裝的wp-content/themes目錄中，每個主題都有自己的資料夾。
經典主題結構
經典主題由幾個關鍵檔案和目錄組成，用於建立網站的外觀和功能。其中兩個主要檔案是
style.css– 這是定義主題視覺樣式的主要樣式表。它的頂部包含主題的後設資料（如名稱、作者和版本），後面是主題樣式的 CSS 規則。index.php– 這是用於在主頁上顯示內容的主要模板檔案。它是其他模板檔案可能丟失時的備用檔案。
除此以外，還有其他幾個重要檔案可以實現模組化設計，確保網站的不同部分可以輕鬆定製和維護。雖然這些檔案是可選的，但它們被視為標準檔案：
header.php– 該檔案包含主題的標題部分，包括網站標題、徽標和導航選單。它位於每個頁面的頂部，確保頁面標題的一致性。footer.php– 該檔案包含主題的頁尾部分，通常包括版權資訊和頁尾導航。它位於每個頁面的底部，為整個網站提供一致的頁尾。functions.php– 該檔案用於為主題新增自定義功能。它可以註冊選單、呼叫樣式和指令碼，並新增主題支援功能，如帖子縮圖和自定義背景。從本質上講，它是主題自定義和增強功能的控制中心。page.php、single.php、archive.php等 – 這些模板檔案定義了不同型別內容的結構，如頁面、單篇文章和存檔。
注：您可以參考這篇詳細的文章，逐步瞭解如何建立經典 WordPress 主題。
區塊主題結構
區塊主題由幾個關鍵檔案和目錄組成，這些檔案和目錄專門用於區塊和 FSE 功能。主要檔案和資料夾有
theme.json– 該檔案對於配置主題的設定、樣式和自定義功能至關重要。它為區塊定義了全域性樣式和設定，提供了一種集中管理主題外觀和行為的方式。它取代了大量的自定義 PHP 程式碼，可以輕鬆配置顏色、排版、間距等。style.css– 雖然大部分樣式都在theme.json中處理，但與經典主題類似，style.css仍用於宣告主題的後設資料，如主題名稱、作者、版本和描述。templates/– 該目錄包含定義網站不同部分佈局的 HTML 檔案。這些檔案包括主頁的 index.html、單篇文章的single.html、頁面的page.html等模板。每個檔案都使用塊構建。parts/– 該目錄包含模板中可重複使用的部分，如頁首和頁尾。這些部分可以包含在多個模板中，確保整個網站的一致性。
區塊樣板雖然不是必須的，但在開發高階主題時也很重要。模式是預定義的區塊佈局，可以插入到頁面和帖子中，為建立複雜的設計提供了一種快速方法。
有了區塊主題，你就可以決定不手動建立主題結構。您可以使用建立區塊主題外掛簡化設定過程，該外掛可提供所有必要的檔案和細節。
建立區塊主題外掛
填寫完詳細資訊後，就會在wp-content/themes目錄中建立一個新的主題資料夾，新主題會出現在 WordPress 管理後臺的外觀>主題下。您可以在 style.css 元描述設定中新增更多主題細節。
WordPress 主題的模板層次結構
模板層次結構決定了 WordPress 使用哪種模板檔案來顯示不同型別的內容。經典主題和塊主題遵循類似的層次結構，但使用的檔案型別不同：經典主題使用 PHP 檔案，而區塊主題使用 HTML 檔案。
模板層次結構遵循特定的順序來決定使用哪個模板檔案。如果 WordPress 找不到特定的模板檔案，它就會移動到層次結構中的下一個。
例如，當 WordPress 需要顯示一篇部落格文章時，它會首先查詢文章型別的特定模板，如 single-{post-type}.php 或 single-{post-type}.html。如果該檔案不存在，它會檢查通用的 single.php 或 single.html。如果這兩個檔案都不存在，WordPress 將返回到最通用的模板 index.php 或 index.html。
同樣的過程也適用於其他型別的內容。對於靜態頁面，WordPress 會首先檢查分配給該頁面的任何自定義模板。如果沒有，WordPress 會根據頁面的標題（如 page-about.php 或page-about.html）或 ID（page-42.php 或page-42.html ）尋找模板。如果沒有這些特定模板，WordPress 就會使用一般的 page.php 或 page.html。如果連這個也沒有，WordPress 就會使用 index.php 或 index.html。
建立模板
在 WordPress 中建立模板可以讓您自定義網站上不同型別內容的顯示方式。無論您使用的是經典主題還是區塊主題，建立過程都包括設定必要的檔案，並根據您的需要進行配置。
讓我們為這兩種主題設定一個頁面模板。
經典主題頁面模板
經典主題使用 PHP 建立頁面模板。具體操作如下
- 建立模板檔案– 使用文字編輯器在主題目錄下建立一個新的 PHP 檔案，並將其命名為
page.php。 - 新增模板程式碼– 編寫必要的 PHP 程式碼，以定義頁面模板的結構和內容。這通常包括 WordPress 模板標籤，用於顯示頁面內容。
- 包含頁首和頁尾 – 通過新增
get_header()和get_footer()函式，確保模板包含頁首和頁尾。這將使頁面佈局與網站其他部分保持一致。
以下是 page.php 的示例：
<?php get_header(); ?> <main> <h1><?php the_title(); ?></h1> <div><?php the_content(); ?></div> </main> <?php get_footer(); ?>
在本例中，模板包括頁首，顯示頁面標題和內容，然後包括頁尾。
注：確保已宣告 header.php 和 footer.php 模板。在過往的指南中瞭解更多關於它們如何工作的資訊。
區塊主題頁面模板
在塊主題中，可以通過 WordPress 網站編輯器或在模板目錄中建立 page.html 檔案來建立頁面模板。
建立該檔案後，您可以通過導航到網站編輯器（WordPress 面板中的外觀>編輯器）來設計佈局。
使用區塊編輯器新增和排列區塊，設計頁面佈局。您可以為頁面標題、特色圖片和內容新增區塊。根據您的設計偏好自定義每個區塊。
使用區塊編輯器自定義頁面模板
對佈局滿意後，儲存模板。WordPress 會在您的主題目錄中自動生成相應的 HTML 檔案。
設計主題風格
為 WordPress 主題設計風格是定義網站視覺外觀的關鍵一步。經典主題和塊主題都提供了強大的自定義樣式方法，但它們的方法有所不同。
經典主題的樣式
在經典主題中，樣式通常使用 CSS 進行處理。下面介紹如何為經典主題設計樣式：
經典主題的主要樣式表是 style.css 檔案。該檔案包含定義主題外觀的所有 CSS 規則。它也是你宣告主題後設資料的地方，例如主題名稱、作者、版本和描述。
為確保正確載入 CSS，需要在 functions.php 檔案中使用 wp_enqueue_style() 函式呼叫樣式表。
function my_theme_enqueue_styles() {
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
這一步對於保持 WordPress 的正確標準和確保正確應用樣式至關重要。
此外，您還可以直接在style.css檔案中新增自定義 CSS，或為主題的不同部分建立單獨的 CSS 檔案。自定義 CSS 也可以使用<style>標籤嵌入到單個模板檔案中，不過這種做法一般不太常見，只推薦用於特定的、孤立的樣式。
對於更高階的樣式，你可以使用 CSS 前處理器，如 SASS 或 LESS。通過這些工具，你可以編寫更易於維護和模組化的 CSS，從而更輕鬆地管理和擴充套件主題樣式。
樣式化區塊主題
區塊主題樣式主要通過 theme.json 檔案和塊編輯器來管理。
theme.json 檔案是為主題配置全域性樣式和設定的中心位置。該檔案允許你以結構化的 JSON 格式定義顏色、排版、間距和其他樣式，提供了一種集中管理主題外觀和行為的方法。在 theme.json 中定義的全域性樣式適用於整個網站，確保外觀和感覺的一致性。
除了 theme.json，您還可以使用區塊編輯器將自定義樣式直接應用到區塊中。區塊編輯器可以讓你實時看到變化，並直觀地調整設計，而無需手動編寫程式碼。這讓整個過程更容易操作，尤其是對於那些喜歡視覺化介面而非編碼的人來說。
雖然 theme.json 檔案可以處理大部分樣式，但你仍然可以使用 CSS 進行更精細的控制。自定義 CSS 可以新增到 style.css 檔案中，也可以使用區塊編輯器直接新增到各個區塊中。
theme.json 檔案的一個示例可能包括調色盤、排版和區塊樣式的設定，這樣就可以輕鬆管理和自定義主題的設計。
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073aa"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#005177"
}
]
},
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "12px"
},
{
"name": "Normal",
"slug": "normal",
"size": "16px"
}
]
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#333333"
},
"typography": {
"fontFamily": "Arial, sans-serif"
}
}
}
注：您可以檢視專業定製 WordPress 區塊主題指南中進一步瞭解 theme.json 的強大功能。
自定義主題
自定義 WordPress 主題可讓您定製網站的外觀和功能，以滿足特定需求和偏好。經典主題和區塊主題都提供了各種自定義方法，但它們的方法各不相同。
自定義經典主題
經典主題提供了幾種自定義網站外觀和感覺的方法：
- 主題定製器 – WordPress 主題定製器是一個易於使用的介面，讓您可以在不接觸任何程式碼的情況下更改主題的外觀。您可以通過外觀>自定義訪問它。它提供修改網站標識、顏色、選單、小工具等選項。在儲存之前，可以實時預覽更改。
- 自定義 CSS – 要進行更具體的樣式修改，可以直接在主題定製器的額外的 CSS 部分新增自定義 CSS。這種方法非常適合在不編輯主題檔案的情況下進行細微調整。
- 子主題 – 如果需要進行大量修改，建議使用建立子主題的方法。子主題繼承了父主題的功能，允許你覆蓋或新增新的樣式和功能。這樣可以確保在更新父主題時保留你的自定義設定。
- 主題檔案 – 高階使用者可以直接編輯主題檔案，如
header.php、footer.php和functions.php，以進行更重要的更改。不過，這種方法需要對 PHP 和 WordPress 模板層次結構有很好的瞭解。 - 外掛 – 有許多外掛可以擴充套件主題的自定義功能。例如，頁面生成器外掛（如 Elementor）可讓您無需編碼即可建立複雜的佈局。
自定義區塊主題
由於強調 FSE，塊狀主題提供了一種更直觀和使用者友好的自定義方法：
- 網站編輯器 – WordPress 網站編輯器（外觀>編輯器）是自定義塊狀主題的主要工具。它允許你使用視覺化介面修改網站的各個方面，包括頁首、頁尾、模板和單個區塊。更改會立即應用，因此可以輕鬆檢視調整對網站設計的影響。
- 全域性樣式 – 區塊主題使用
theme.json檔案定義全域性樣式。你可以在全域性範圍內自定義顏色、排版、間距等，確保網站的一致性。網站編輯器還可以讓你直觀地調整這些設定。 - 可重複使用的區塊和樣板 – 您可以建立可重複使用的區塊和模式，以保持一致性並簡化設計流程。可重複使用的區塊可以儲存並插入到任何文章或頁面中，而區塊樣板則提供了預定義的佈局，可以根據需要進行定製。
- 自定義模板 – 有了區塊主題，你可以直接在網站編輯器中為不同型別的內容建立自定義模板。這樣，您無需編寫任何程式碼，就能定製特定頁面或文章型別的佈局和設計。
- 外掛 – 與經典主題一樣，塊主題也可以使用外掛進行擴充套件。許多外掛旨在增強區塊編輯器的功能，提供額外的區塊、模式和自定義選項。
小結
定製 WordPress 主題可以讓您的網站獨一無二、功能強大。經典主題依靠主題定製器、自定義 CSS、子主題和直接檔案編輯來實現靈活性。區塊主題則使用站點編輯器和theme.json，以獲得更直觀的視覺效果。
這兩種方法都提供了強大的工具，無論你喜歡編碼還是視覺化定製，都可以根據自己的需要定製網站。
評論留言