•  寫作緣由: 

  子佈景主題的建立,提供了許多的好處,例如:
1.> 可以藉既有的佈景主題,建立客製化的功能,並且避免佈景主題更新導致的客製化功能消失問題。

2.> 建立此能力之後,您就可以使用WordPress的進階功能CSS程式庫,進一步改善您的佈景主題功能,而不是完全受限於佈景主題廠商所提供的功能範疇。

3.> 可以根據搜尋引擎最新的網站結構化資訊需求,客製化您的佈景主題功能,比其他同業網站更符合搜尋引擎的最新變化,提供最佳服務,對搜尋引擎優化的績效,搜尋者的搜尋解果體驗,以及搜尋引擎排名都有幫助。

  既然如此,且讓我們一起來學習,建立佈景主題的方法吧!

  目前建立佈景主題的方式很多,本文茲以最簡單的方式步驟教學,讓您可以事半功倍。最簡單的佈景主題建立方式,就是採用既有的外掛程式(plugin,又稱為插件),而作者所使用的是這個廣為採用,且目前最獲好評的【Child Theme Configurator】關於詳細使用方法,在此網頁有豐富的步驟教學影片可資參考。

  本文僅以簡要方式說明最基本的操作步驟教學,先滿足您的基本需求為主。

child-theme-tutorial-Child Theme Configurator plugin
搜尋、安裝並啟用child-theme-tutorial-Child Theme Configurator外掛程式

  敬請點擊【立即安裝】按鈕,安裝完畢之後,敬請點擊【啟用】按鈕,即可以開始該外掛程式,進行子佈景主題的簡單建立程序。

  接下來,敬請在WordPress控制台頁面左側邊欄點擊【工具】【子佈景主題】,如下圖所示。

child-theme-tutorial-get into control panel of child-theme-tutorial-Child Theme Configurator plugin
點選進入Child Theme Configurator 外掛的設定頁面

  則畫面就會更新,如下圖所示。

child-theme-tutorial-Child Theme Configurator plugin control panel
Child Theme Configurator plugin 控制台頁面

  如果您是就現有的主題佈景產生一子佈景主題,那麼就請點選步驟一的第一格選項,如上圖所示。接下來,步驟二當然就是點選您現已安裝的佈景主題(如尚不知如何安裝佈景主題,敬請參考拙作【如何不花一毛錢自行合法安裝主題佈景?】乙文),例如本教學範例點選現有的主題佈景之一,twenty fifteen,如下圖所示。

child-theme-tutorial-select theme
挑選佈景主題

  就可以點擊【分析】按鈕,點擊完畢之後,就會出現新畫面,如下圖所示。

child-theme-tutorial-setting up
進行基本設定

  第三項會告訴您此分析結果是成功還是失敗,通常已被廣為使用的佈景主題,都是成功的,因此在此就不特別教學關於失敗的案例。而成功的訊息,及如上圖所示,會出現【這個佈景主題檢測合格,可以作為子佈景主題使用。】的訊息。

  第四項是告訴您,目前這個子佈景主題的暫定名稱,如果您想修改,敬請在第七步驟的相關欄未進行修改,即可。

  至於第五項,本人建議的選項是【個別樣式表】,如此可以讓您:

  「將自訂樣式儲存為個別樣式表,並將子佈景主題既有樣式與上層佈景主題樣式進行合併成為基準樣式;如需保留既有的子佈景主題樣式而不是加以覆寫,請啟用這項設定。這項設定也能讓你自訂在載入主要樣式表後的其他樣式。」

  如下圖所示:

child-theme-tutorial-continue setting up
繼續完成基本設定

  第六項關於【請選取上層佈景主題樣式表的處理方式:】的選項,則建議第一個選項【使用 WordPress 樣式佇列】,如此可「讓這個外掛判斷合適的操作及相依性,並自動更新佈景主題函式相關檔案。」,相對而言,最適合初學者的使用。

  接下來,就來到第七個選項,【自訂子佈景主題名稱、說明、開發人員、版本等屬性:】在此部分,您可以自訂該新建的子佈景主題名稱,至於【
Twenty Fifteen Child
佈景主題網站】等其他項目,則不建議更動,畢竟這是該原始佈景主題的相關資訊。

  關於第八項【將上層佈景主題的 [選單]、[小工具] 及其他 [外觀自訂器] 相關設定複製至子佈景主題:】,個人的建議是勾選,但【請注意: 這項設定會將子佈景主題的 [選單]、[小工具] 及其他 [外觀自訂器] 相關設定,以上層佈景主題的設定加以取代。僅有在第一次設定子佈景主題時,才須要套用這項設定。】

  如下圖所示。

child-theme-tutorial-continue setting up
繼續完成基本設定

  第六項關於【請選取上層佈景主題樣式表的處理方式:】的選項,則建議第一個選項【使用 WordPress 樣式佇列】,如此可「讓這個外掛判斷合適的操作及相依性,並自動更新佈景主題函式相關檔案。」,相對而言,最適合初學者的使用。

  接下來,就來到第七個選項,【自訂子佈景主題名稱、說明、開發人員、版本等屬性:】在此部分,您可以自訂該新建的子佈景主題名稱,至於【
Twenty Fifteen Child
佈景主題網站】等其他項目,則不建議更動,畢竟這是該原始佈景主題的相關資訊。

  關於第八項【將上層佈景主題的 [選單]、[小工具] 及其他 [外觀自訂器] 相關設定複製至子佈景主題:】,個人的建議是勾選,但【請注意: 這項設定會將子佈景主題的 [選單]、[小工具] 及其他 [外觀自訂器] 相關設定,以上層佈景主題的設定加以取代。僅有在第一次設定子佈景主題時,才須要套用這項設定。】

  如下圖所示。

child-theme-tutorial-complete the setting up
完成基本設定

  接下來,懇請點擊【Create New Child Theme】按鈕,該外掛程式即會根據您的相關設定與選項的要求,為您自動產生子佈景主題了。

  接下來,敬請在WordPress控制台頁面左側邊點擊欄點擊【外觀】【佈景主題】按鈕,就會出現新畫面,如下圖所示。

child-theme-tutorial-select child theme
選定子佈景主題

  剛剛名為【貳零壹伍】(Twenty Fifteen)佈景主題,的確也相對應地產生了名為【Twenty Fifteen Child】的子佈景主題,可資選用。

  但是其外觀與原有的佈景主題非常相似,您也可以像上圖名為【Make Child】的子佈景主題一樣,自行編輯出不一樣的特徵圖片,只要您進入虛擬主機網站代管伺服器,檔案管理員頁面的【../wp-content/themes/twentyfifteen-child/】目錄下的screenshot.png檔案下載,經由圖片編輯軟體,例如GIMP或PhotoShop編輯圖片,再藉由前述的檔案管理員上傳編輯過的圖片,即可。

  如下圖所示。

child-theme-tutorial-upload featured picture of child theme
上傳修改好的子佈景主題圖示

  恭喜您!

  接這麼輕鬆又完成一項,畢生前所未有的新技能。

免費註冊訂閱築韻集團專業文章
免費註冊訂閱築韻集團專業文章

    不想漏接下次的精采文章嗎?

    敬請點擊上方圖案,免費註冊免費訂閱築韻集團專業文章,以後只要有新作出刊,您的電子信箱就會馬上收到通知。感恩!

免費註冊訂閱築韻集團專業文章
免費註冊訂閱築韻集團專業文章

    不想漏接下次的精采文章嗎?

    敬請點擊上方圖案,免費註冊免費訂閱築韻集團專業文章,以後只要有新作出刊,您的電子信箱就會馬上收到通知。感恩!

總公司地址:台灣省新竹縣竹北市福興路1028巷1號

台中分公司:台灣省台中市北屯區崇德路二段462號9樓之一

聯絡人:張世忠先生(0939-061-556)

電子信箱:mark.chang.1031@gmail.com

築韻空間美學工坊臉書粉絲團

築韻出版社臉書粉絲團

築韻集團YOUTUBE影片頻道

築韻集團FLICKR相簿圖庫