當我們安裝好 WordPress 的佈景主題後,可能覺得對於字型大小不滿意,或是對於圖片的大小不滿意,想要針對目前的佈景主題去做一些小修改的時候,就要透過子主題的方式。
如果你只是把圖片、文字換掉,那個不是修改佈景主題,不需要去建立子主題,建立子主題的目的是要對原本的佈景主題客製化一些內容,或是要大幅度的修改程式碼,才會使用子主題。
難道不能直接修改佈景主題嗎?
當然不行!不過其實是可以,但是強烈建議不要這樣做,請不要直接去修改佈景主題的程式碼。因為
- 佈景主題更新的時候,你的修改會被蓋掉
- 不易管理。如果你直接修改佈景主題,因為你要在一堆 CSS 中去改你要的樣式,數個月之後,你絕對會忘記你改了哪些地方,會越來越亂。
建立子主題可以避免你的修改被蓋掉,對於管理上也會比較容易。
但如果你只是要修改 CSS 的話,你可以用佈景主題 -> 自訂 CSS 的功能就可以達成,不需要特別去建立子主題。好了,廢話不多說。
如何建立子主題?
有兩種方式:手動跟自動(被打)
手動建立子主題
你只需要在 WordPress 的目錄架構下依照標準建立即可。WordPress 的主目錄結構長這樣:
wp-admin/ wp-content/ wp-includes/ *.php
手動, 步驟一
請在本機建立一個資料夾,名稱可以自訂,通常名稱會命名為 (佈景的名稱)-child,裡面會存放我們等一下要上傳的檔案,我們以 2017 年的預設佈景主題 “twentyseventeen” 來示範,來見建立一個子佈景主題。我們先建立一個資料夾名稱叫做 “twentyseventeen-child”。
手動, 步驟二, 建立 style.css
在本機的 “twentyseventeen-child” 資聊夾內建立一個 txt 檔,請命名為 style.css,然後你把底下的文字包括 /* … */ 都複製到 style.css 內
/* Theme Name: Twenty Seventeen Child Theme URI: https://wordpress.org/themes/twentyseventeen/ Template: twentyseventeen Author: the WordPress team Author URI: https://wordpress.org/ Description: This is description. Tags: tags Version: 0.1.0 Updated: 2018-03-15 15:42:15 */
複製完之後,有兩個東西你要改,第一個是 “Theme Name”,改成你要顯示的子佈景主題名稱,第二個是 “Template” 改成你父主題的名稱(這邊的父主題就是 twentyseventeen)。
關於在 style.css 中使用 @import 的方式來載入父主題的 CSS,官方已經建議不要這樣使用,所以只需要有上述的內容即可, style.css 會透過 functions.php 來載入。
手動, 步驟三, 建立 functions.php
一樣在本機的 “twentyseventeen-child” 資料夾內建立一個 txt 文字檔,請一定要命名為 functions.php,把以下內容複製到文字檔內:
<?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } ?>
手動, 步驟四, 上傳到主機內, 並啟用子主題
作到這邊,你的 “twentyseventeen-child” 資料夾內應該會有兩個檔案:
"twentyseventeen-child" +-- style.css +-- functions.php
接下來只要把這個目錄上傳到您的主機內就可以了,用 FTP(可以用 Filezilla)登入主機之後,切換到 wp-content/themes/ 內,把整個 “twentyseventeen-child” 上傳上去,然後在 WordPress 後台啟用子主題就可以了。
自動建立子主題
你可能看完上面的一堆程式碼,可能會感到頭暈肚子痛,想放棄。沒關係,現在有外掛可以幫你自動建立子主題,你只需要安裝 “Child Theme Configurator” 這個外掛。
安裝完成後點選 工具 -> 子佈景主題 就可以看到這個外掛工具。
點選 上層/子佈景主題 分頁,選擇 建立子佈景主題 然後在下方的分析左邊下拉選單終點選你要建立的父主題,按下分析。
分析後若這個佈景主題可以建立子主題,就可以繼續選擇其他選項。若你對 CSS 熟悉的話再去調整其他的設定,不然請保留預設值,然後按下 “Create New Child Theme” 就完成了。
[content_block id=560 slug=%e7%b0%bd%e5%90%8d%e6%aa%94]