首頁 » 網站架設相關 » 架站教學 » [佈景主題]主題7:如何建立子佈景主題(child theme)?

[佈景主題]主題7:如何建立子佈景主題(child theme)?

什麼是子佈景主題(child theme)? 一個可以自訂且需要繼承父佈景(parent theme)功能的佈景主題! 其主要好處為當parent theme由於安全性/修正問題/增加功能等因素的更新而不會覆蓋了所有的修改! 簡單來說, 就不會因為更新的動作而影響原先自訂佈景主題上的任何改變!

一開始利用[Child Theme Configurator]此外掛來建立子佈景主題, 在Wordpress(WP)後台中,[外掛]->[安裝外掛]的搜尋欄中輸入此外掛名稱,如下圖所示, 然後立即安裝/啟用. 當子佈景主題功能建立完成後, 可以把此外掛停用/或是刪除, 以避免外掛過多而影響主機的效能.

啟用在WP後台裡的[工具]–>[子佈景主題]功能,此外掛已有中文化! 下圖為此外掛一開始的畫面, 一開始在紅色框中有一個下拉式選單, 可以挑選要建立子佈景主題的上一層父佈景主題.挑選好之後, 按下[分析]按鈕.然後這裡可以更改子佈景主題的[資料夾名稱], 預設是父佈景主題加上”-child”, 這裡範例主題是generatepress, 所以此外掛自動加入完整名稱為–>generatepress-child, 其他選項以預設為主. 而此選項才是真正子佈景主題的詳細資訊! 可以隨意更改! 最後按下[Create New Child Theme]按鈕之後,就完成建立子佈景主題!此時回到Cpanel主機後台,在路徑wp-content/themes/,可以看到多了一個與父佈景主題名稱相似的資料夾,也就是[generatepress-child]. 此子佈景主題資料夾裡, 包含了三個檔案:style.css/screenshot.png/functions.php!

style.css–>修改有關CSS樣式內容.

screenshot.png–>此佈景主題的安裝畫面.

functions.php–>增加相關佈景主題的功能.一般會把原先父佈景主題的screenshot.png圖檔抓下來編輯,增加一個易於了解的名稱來區分不同的佈景主題, 或是自訂隨意的圖片也可以, 改好之後,別忘了上傳到子佈景主題的資料夾裡.

然後到WP後台,[外觀]–>[佈景主題],啟用子佈景主題, 到這裡就完成了!接下來,就可以開始修改或增加功能到子佈景主題了! 這是一開始的網站畫面.

然後到Cpanel主機裡/wp-content/themes/generatepress-child/中,直接開啟style.css編輯, 輸入紅色框中的內容, 其中.entry-title a:link為標題連結,而.entry-summary為文章內容,完成之後,記得存檔!

如何修改佈景主題, 也可以參考這裡!

此時,回到網站前端,就可以看到新的網站畫面了!

總結:

除了CSS的調整, 也可以有更多的調整,像是footer.php–>主要用於修改網站最下方相關資訊!一開始把父佈景主題中的footer.php這一個檔案copy到[佈景主題資料夾]中, 然後就直接在哪裡做修改就可以了!

而要增加功能時, 只要把代碼直接增加到[佈景主題資料夾]中的functions.php裡就行了! 這裡切勿把原先的父佈景主題中的functions.php這個檔案copy進來, 會導致網站無法再使用! 如果發生了, 只要在Cpanel裡把子佈景主題資料夾移除或是再重新上傳一份原有的functions.php就可以了!

[溫馨提醒]做任何網站的變動更改之前, 請先備份!

Share via:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *