《WordPress》子主題

當挑好主題之後,有時候也會想要自己改一些東西,例如說像是更換背景、調整導覽列顏色、或是自訂標題的背景之類的,有些主題可能會沒有修改上述所說的這些功能,所以就要自己去CSS裡面增加,但是當主題更新之後,你原本修改的內容就都會被還原了,每次都要重新再做調整,這樣很累很麻煩。所以這時候就要創一個子主題並且繼承你原本的主題,這樣當主題更新之後,你在子主題所做修改就不會被還原了。那子主題要怎麼創建呢?

下面就一個步驟一個步驟地來教大家 ~~

 


 

一、建立子主題資料夾

一開始先找好自己要的主題,我這邊就以「貳零壹柒」這個主題來做範例,打開FTP進入放主題的資料夾(wp-content/themes),會看到一個twentyseventeen的資料夾就是我用來做示範的檔案,我們先在本機建好檔案再放上去,在桌面建一個twentyseventeen-child的資料夾

 

二、新增style.css檔案

一個主題或是子主題一定要有一個style.css檔案,所以在child這個資料夾下面新增一個style.css檔案。

接著打開style.css,我們要在這打上子主題的資訊以及是繼承哪個主題,這邊的話可以從父主題去複製過來

/*
Theme Name: 貳零壹柒 – child (主題名稱)
Theme URI: https://wordpress.org/themes/twentyseventeen/ (主題來源)
Author: WordPress team (作者)
Author URI: https://wordpress.org/ (作者網站)
Template: twentyseventeen (繼承主題的資料夾名稱)
Description: Extends Twenty Seventeen (主題描述)
Version: 1.4 (主題版本)
*/

@import url(‘../twentyseventeen(繼承主題的資料夾名稱)/style.css’); (繼承父主題的style.css)

 

三、將子主題壓縮(.zip)上傳

style.css檔案完成之後,將整個資料夾壓縮,副檔名選擇.zip,然後登入到你的後台

「外觀」→「佈景主題」→「新增」→「上傳佈景主題」→「選擇檔案」→「立即安裝」

最後出現這樣的畫面就代表安裝成功了

 

四、套用子主題

然後回到佈景主題頁面,你就會看到剛剛上傳的子主題已經在上面了,接著再啟用子主題,這時候你回到網站會發現都沒有變化,跟原來的主題一樣,這樣就是成功了

 

五、修改CSS樣式

子主題啟用成功之後,想要修改CSS的話,除了可以將檔案透過FTP下載下來修改完再上傳之外,也可以直接從後台去做修改,「外觀」→「主題編輯器」,在這裡就可以直接編輯CSS了

 

小提示、functions.php

主題的一些功能是在functions.php來做設定的,我們也可以在子主題新增一個functions.php檔案,這個檔案比較特別,不像其他header.php、index.php…之類的只要在子主題新增的話就會蓋過父主題的,而是會同時載入父主題以及子主題的functions.php,所以想額外新增一些功能的話,可以在子主題來做新增。

 

以上就是子主題的創建教學囉~~~

 

發表迴響