開始使用 WordPress 子主題？

已發表: 2016-06-22

在本教程中，您將學習如何創建 WordPress 子主題。 如果您是 WordPress 新手並且不知道什麼是 WordPress 子主題，我會解釋一切。

WordPress 主題是一堆 PHP、JavaScript 和 CSS 文件的集合。 簡而言之，使用 WordPress 主題，您可以更改博客的外觀和感覺。 WordPress 主題可以非常強大。

高級 WordPress 主題提供了許多高級特性和功能。 提供數以千計的免費和高級 WordPress 主題。

您可以從頭開始創建 WordPress 主題，也可以基於另一個主題創建 WordPress 主題。 每個版本的 WordPress 都預裝了 WordPress 主題，如果您不喜歡預裝的 WordPress 主題，您可以安裝另一個 WordPress 主題，也可以創建一個子主題。

為什麼選擇 WordPress 兒童主題？

創建 WordPress 子主題意味著您採用現有主題並基於它創建自己的主題。 子主題繼承了原始主題的大部分功能，稱為父主題。

兒童主題節省了大量的工作和時間。 從頭開始創建 WordPress 主題需要花費大量時間，有時需要提前了解 HTML、CSS、PHP 並且是必需的。 使用子主題，您可以進行很多修改。

如果您對所使用的 WordPress 主題提供的自定義、選項和功能不滿意，那麼您可以創建一個子主題。 即使您想對您的 WordPress 主題進行一次更改，您也應該創建一個子主題或使用 CSS 編輯器插件。

您可以直接編輯現有的 WordPress 主題文件，但是當您進行更新時，您將丟失所有自定義項。 這就是為什麼你需要一個兒童主題。

您可以使用 WordPress 子主題做什麼

使用 WordPress 子主題，您可以添加任意數量的功能。 由你決定。 如果您想更改標題或鏈接的字體大小或顏色，可以使用 CSS 輕鬆完成。

您可以添加新的導航菜單、註冊新的側邊欄、為產品創建自定義頁面或添加對自定義 Web 字體的支持。

你需要什麼：

現在您知道了什麼是 WordPress 子主題以及為什麼要創建子主題，是時候學習如何創建 WordPress 子主題了。

這不是必需的，但建議設置本地 WordPress 安裝以用於開發和學習目的。 通過本地 WordPress 安裝，您可以快速輕鬆地測試您的新插件和主題。

本地安裝 WordPress 的方法有很多，如果你是 MAC 用戶，可以使用 MAMP，Windows 用戶可以使用 XAMPP、WAMP 或 Bitnami WordPress 安裝程序。

  • 如何使用 WAMP 服務器安裝 WordPress
  • 如何使用 MAMP 安裝 WordPress
  • 如何使用 Bitnami Stack 安裝 WordPress

如果您是絕對的初學者，您可以下載並安裝 Bitnami WordPress 堆棧，以在您的 MAC 或 PC 上創建一個功能齊全的 WordPress 網站。

我個人更喜歡 WAMP 服務器進行本地開發。 在 WAMP 上安裝 WordPress 並不難，您可以閱讀教程或觀看視頻來學習如何使用 WAMP、XAMPP 或 MAMP 安裝 WordPress。

您還需要一個代碼編輯器來編輯主題文件。 Sublimetext、Brackets、Atom 是少數流行的代碼編輯器。

如何創建 WordPress 子主題？

一旦您的本地 WordPress 網站準備就緒，我們就可以開始創建我們的子主題了。 如果您使用 WAMP 服務器，請轉到您的 WAMP 安裝目錄 > WWW > WordPress > wp-content > 主題文件夾。

在 WordPress 主題文件夾中，創建一個新文件夾並將其命名為 twentysixteen-child 或任何您喜歡的名稱，例如 InstantShift。 我們將使用二十六主題作為父主題。 這意味著我們的子主題將基於 TwentySixteen 主題。

對於每個子主題，我們需要兩個文件。

  • functions.php
  • style.css

在您的二十六子主題文件夾中創建這兩個文件。 現在在文本編輯器中打開您的文件，為了快速訪問，您可以在文本編輯器側邊欄中拖動您的二十六子文件夾。 打開 style.css 文件並添加以下代碼。

[CSS]
/*
主題名稱：InstantShift
描述：InstantShift 的 26 個兒童主題。
作者：塔希爾陶斯
作者 URI：http://www.instantshift.com
模板：二十六
版本：0.1
*/
[/css]

子主題需要以上標記。 如果沒有帶有必要標記的樣式表，WordPress 將無法識別您的子主題。

我想，你可以理解一切。 沒有什麼好解釋的。 我的孩子主題名稱是 InstantShift，但您可以隨意命名您的孩子。 最重要的是模板：二十六。 這是我們父主題的名稱。 確保拼寫正確。

如果您使用任何其他主題作為父主題，只需將 Template: twosixteen 更改為Template: parent-theme-name 。

在樣式表標題中，我們還可以添加更多信息，但這不是必需的。 現在登錄到您的 WordPress 儀表板。 轉到外觀 > 主題。 您應該看到 InstantShift 主題沒有任何屏幕截圖，因為我們沒有為我們的子主題添加任何屏幕截圖。

將鼠標懸停在 InstantShift 主題上，然後單擊主題詳細信息按鈕。 這是我的孩子主題截圖。

Child Theme

如果您可以看到此屏幕，則表示您的子主題已準備就緒。 現在我們可以開始自定義我們的主題了。 激活這個新主題並訪問您博客的前端。 您將看到沒有任何樣式的所有內容。

別擔心。 這是正常的。 我們看不到任何樣式，因為我們沒有包含父主題樣式表文件。 讓我們確保我們的子主題的樣式表正常工作。 在您的子主題的 style.css 文件中添加以下代碼。

[CSS]
身體{
背景顏色：#E7F5FB；
}
[/css]

保存您的 style.css 文件，重新加載本地 WordPress 網站的首頁，您應該會看到淺藍色背景色。

註冊父主題的樣式表

我們不想從頭開始創建所有樣式。 我們將在子主題的 style.css 文件中添加一些新樣式。 現在讓我們在子主題中添加父主題的 stye.css 文件。

打開 functions.php 文件並在子主題的 functions.php 文件中添加以下代碼。

[php]
<?php

// 父主題樣式 //
// https://codex.wordpress.org/Child_Themes //

功能主題入隊樣式（）{
$parent_style = '父樣式';
ks29so_enqueue_style($parent_style, get_template_directory_uri() . '/style.css' );
ks29so_enqueue_style('兒童風格',
get_stylesheet_directory_uri() 。 '/style.css',
數組（$parent_style）
);
}
add_action('ks29so_enqueue_scripts', 'theme_enqueue_styles');
[/php]

現在，如果您重新加載本地 WordPress 站點，您將看到具有所有 TwentySixteen 樣式的正常主題。

就這樣。 您已經成功創建了您的第一個子主題。 您還為正文添加了新的背景顏色。

但是我們並沒有創建我們的子主題來簡單地改變身體的背景。 讓我們開始定制我們的主題。

覆蓋父主題樣式

自定義標題：

默認情況下，二十六主題的標題有很多填充。 讓我們更改填充並為站點標題添加新的背景顏色。 在您的子主題的 style.css 文件中添加以下代碼，保存您的文件並重新加載您網站的前端以查看更改。

[CSS]
.site-header {
填充：0 4.5455%；
背景：#CDDC39；
邊距底部：2em；
}
[/css]

在這裡，您可以看到添加新樣式之前和之後的站點標題屏幕截圖。

Theme Header

自定義主導航

現在讓我們更改主導航菜單項的背景顏色。 我喜歡使用 Chrome 開發者工具來編輯我的 CSS 樣式。

使用 Chrome 開發工具編輯網頁後，您可以從 Chrome 開發工具中復制新代碼並粘貼到子主題的 style.css 文件中。

打開您的子主題的 style.css 文件並在其中添加以下代碼。

[CSS]
#菜單標題&gt; 李{
背景：RGBA（185、202、22、0.97）；
margin-right: 4px !important;
邊框半徑：5px；
}
[/css]

在這裡，您可以看到我們新標題的屏幕截圖。 我們很容易用兒童主題定制我們的主題。

Theme Header Navigation

最後的話

現在您知道如何創建 WordPress 子主題了。 這非常簡單易行。 通過對 HTML 和 CSS 的基本了解，您可以完全改變您網站的設計。

您還可以使用子主題添加新的導航菜單、小部件區域、對新字體的支持等。 但是我們不能在一篇文章中涵蓋所有內容。

如果你想學習 WordPress 主題開發，你應該從 WordPress 子主題開始。 學習主題定制的基礎知識。