如何創建 Divi 兒童主題

已發表: 2024-06-28

在建立網站時,有數千個(沒錯,是數千個!)WordPress 主題可供您選擇。 然而,大多數網頁設計師發現,雖然 WordPress 主題是一個不錯的起點,但他們想要更多的自訂,而創建子主題是實現這一目標的好方法。

子主題建構於父主題之上,並允許您新增或刪除自己的程式碼。 如果您想真正自訂您的 WordPress 網站,使用子主題是最好的方法,而 Divi 是最好的選擇之一。

廣告素材建立 Divi 子主題的最大原因是,當父主題更新時,您的網站不會受到任何影響。 從 Divi 創建子主題本質上充當安全網,始終在您的網站崩潰之前抓住您的網站! 但是,我有點超前了,所以讓我們從基礎開始。

在本文中,我將介紹:

  • Divi是什麼以及有什麼特點?
  • 如何創建 Divi 兒童主題(+免費兒童下載!)
  • 如何測試您的 Divi 子主題是否正常運作

讓我們深入了解一下。


Divi是什麼以及有什麼特點?

Divi 是來自 Elegant Themes 的 WordPress 主題,它允許您從頭開始使用不同的結構元素建立頁面。 這意味著您可以完全控制您正在建立的網站上的所有內容,因為它具有卓越的視覺化編輯器。

它還附帶數百種預製設計,因此,如果您沒有創建和自訂主題的經驗,不用擔心! 無論您是想要自訂第一個網站的初學者還是經驗豐富的開發人員,Divi 都能為您提供將想法變為現實的工具。

開發人員創建 Divi 子主題

Divi 有兩個建構器介面:WordPress 前端的視覺化編輯器和後端建構器。 在視覺化編輯器上,它使為客戶建立網站變得更加容易、更快、更愉快,因為您可以在頁面本身上進行編輯並即時查看您的編輯。 在後端,您正在編輯貼文內基於區塊的表示形式。 但是,您仍然可以新增模組,基本上可以像在視覺化編輯器中一樣執行所有操作。 根據您的喜好,在編輯器之間來回切換也很容易。

Divi 還具有三個主要結構元素,您可以按原樣使用它們,也可以根據您的特定規格進行自訂:部分、行和模組。

部分:這些是 Divi 建構器中最大的構建塊。 您可以將它們視為水平堆疊區塊,可以將您的內容分組為視覺上可區分的區域。 您建立的所有內容都從一個部分開始。

行:行是可以放置在部分內部的各種列佈局。 它們具有各種設置,可以通過單擊行左上角的設置圖標來訪問,並且可用於大大增加使用 Divi Builder 構建的佈局的多樣性,因為它們創建了模組所在的結構。

模組:模組包含不同的內容元素,例如圖像、內容、滑桿、圖庫、聯絡表單、CTA、部落格、表單、感言等。

現在您對 Divi 有了更好的了解,讓我們深入了解如何建立子主題。


如何創建 Divi 兒童主題

在開始自訂之前,您需要確保已安裝並啟動 Divi。 有兩種方法可以解決這個問題:

選項 1:使用 Flywheel + Divi 實現快速、輕鬆的安裝。

選項2: 手動方法(請依照以下兩個步驟)

第 1 步:在此處註冊並下載 Divi。 建立帳戶並登入後,您將被重定向到會員區域,然後轉到左側並找到「下載」標籤。 找到Divi並點擊“下載”。 這會將 zip 檔案中的 Divi 下載傳送到您的「下載」資料夾。

步驟 2:是時候登入您的 WordPress 網站了。 前往外觀 > 主題。 點擊右側的“新增”或“新增主題”。 點擊左上角的“上傳主題”按鈕。 選擇檔案並找到 Divi zip 檔案。 注意:將其保存在 zip 檔案中(不要解壓縮)。 點擊安裝。 安裝完成後,點擊“啟動”,它就會在您的網站上安裝並啟動! ?

現在,您已準備好建立 Divi 子主題! 建立 Divi 子主題有三種主要方法:下載免費子主題、使用外掛程式或手動編碼。

選項 1:下載免費的 Divi Child 主題文件

創建子主題最快(也是最簡單!)的方法之一是下載這個免費的 Divi 子主題。 它擁有您入門所需的所有必需品,以及供您根據自己的喜好進行客製化的空間! 下載下面的免費 Divi 兒童主題。

下載後,安裝 Divi,啟動它,然後就可以開始了! 就這麼簡單。 如果您喜歡以不同的方式建立 Divi 子主題,您可以隨時嘗試外掛程式。

選項 2:使用外掛程式建立 Divi 子主題

有許多外掛程式可幫助您建立 Divi 子主題。 以下是我個人最喜歡的一些:

  • 迪維兒童
  • 子主題配置器
  • Orbisius 的兒童主題創作者
兩隻手握住兩端有插件的繩索

迪維兒童

Divi Children 是專為 Divi 用戶開發的免費外掛程式。 它會自動為您完成繁重的工作,因此您可以專注於創意方面! Divi Children 創建的每個子主題都透過 WP 定制器提供了大量自訂功能。 在此處了解如何安裝此插件。

子主題配置器

該外掛程式是為希望能夠直接自訂子主題樣式表的 WordPress 使用者設計的。 使用此插件,您可以輕鬆識別並覆蓋您想要自訂的確切 CSS 屬性,分析器會掃描渲染的主題並自動配置您的子主題。 在此處了解有關此插件以及如何安裝的更多資訊。

Orbisius 的兒童主題創作者

該外掛程式可讓您從目前安裝在網站上的任何主題快速建立子主題。 使用此外掛程式,您可以從父主題建立無限數量的子主題,因此選項是無限的。 它具有兩個編輯器,您可以從一個主題中選擇片段並貼上到另一個主題。 談論定制! 在此處了解有關安裝此插件的更多資訊。

最後,如果外掛程式不適合您,始終可以選擇手動建立 Divi 子主題!

選項 3:手動建立 Divi 子主題

如果您是 WordPress 開發人員或只是喜歡挑戰,那麼這是創建 Divi 子主題的好方法。

一位開發人員尋求新工具來幫助他的網站。

步驟1:建立style.CSS文件

您可能知道,style.css 檔案用於告訴 WordPress 您的子主題的詳細信息,並且可用於添加自訂 CSS! 為此,請在電腦上建立一個資料夾並為其命名(讓您知道這是 Divi 子主題的名稱)。 從那裡,在該資料夾中建立一個檔案並將其命名為 style.css。

注意:確保您有文字或程式碼編輯器工具,否則命名該檔案將很困難!

第 2 步:將其新增至 style.css 檔案:

 /*
 主題名稱:迪維兒童主題
 主題 URI:https://www.elegantthemes.com/gallery/divi/
 描述:Divi 兒童主題
 作者:你的名字
 作者 URI:https://getflywheel.com/
 模板:迪維
 版本:1.0.0
*/

主題名稱、主題 URI、描述、作者、作者 URI 和版本都是可編輯的。 保持模板名稱不變! 如需更多自訂(並確保您的 Divi 子主題正常運作),請在此處新增任何自訂 CSS。

第三步:建立functions.php文件

在您已建立的資料夾中建立另一個檔案並將其命名為functions.php

然後,將此程式碼新增至您的新檔案中,並在最後一行下方新增您可能需要的任何自訂函數:

 <?php
函數 divi__child_theme_enqueue_styles() {
    wp_enqueue_style( '父樣式', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

第 4 步:建立螢幕截圖

這是一個重要的步驟,這樣您的網站就不會在 WordPress 主題頁面上出現圖像應有的空白區域,因此快速截圖是這裡的關鍵步驟! 截取螢幕截圖後,請繼續並確保尺寸為 880x660 像素,為 .png 或 .jpeg(都可以!),並且名稱為 [screenshot.png] 或 [screenshot.jpeg]。 然後,您將螢幕截圖圖像新增至主資料夾。

步驟5:壓縮資料夾並上傳

最後,將資料夾壓縮為 zip 檔案類型並上傳到 WordPress! 您將轉到“外觀” > “主題” > “上傳” ,然後按一下“啟動”。

瞧! 您已經成功創建了 Divi 兒童主題,並準備好根據您的喜好進行客製化。


如何測試您的 Divi Child 主題是否正常運作

為了測試您的子主題是否正常運作,請在子主題 style.css 檔案中新增一些 CSS 並儲存變更。 您應該在即時網站上看到這些更改,這樣您就知道它正在工作!

注意:您可能需要在私人瀏覽器中開啟頁面,以防頁面被快取。

請記住:您永遠不應該對您的即時網站進行更改,否則可能會破壞某些內容! 使用 Local,一個免費的本地開發應用程序,這樣您就可以停止調試本地環境,並花更多時間啟動漂亮的 WordPress 網站。 在此處了解有關本地的更多資訊。


結論

客製化是使用 WordPress 建立網站的最佳部分之一,雖然主題是很好的起點,但擁有像 Divi 這樣的子主題供您使用也是很好的。


免費Divi兒童主題下載

創建子主題最快(也是最簡單!)的方法之一是下載這個免費的 Divi 子主題。 它擁有您入門所需的所有必需品,以及供您根據自己的喜好進行客製化的空間! 下載下面的免費 Divi 兒童主題。