每次升級主題總是有人問都修改了什麼,因為很多人根據自己的喜好對主題進行了個性化修改,雖然我也作了記錄,但具體修改了什麼文件以及修改了哪個樣式屬性還真沒辦法詳細記錄。那麼如何將主題升級到最新版本,而又能保留自己個性的修改呢?答案很簡單,使用 WordPress 子主題功能,升級後無需再次修改原主題,只需要啓用並修改子主題就可以了,下面就以 ruike 主題為例,創建一個 Ality 主題的子主題。
一、在 WordPress 主題目錄 (themes) 新建一個主題文件夾,名稱任意,比如:ruike-child 。
二、將 ruike 主題的樣式文件 style.css 和 css 目錄 (因為 ruike 主題有部分樣式文件和字體圖標在這個 CSS 目錄中) 及圖片目錄 img,一起復制到新建的主題文件夾 ruike-child 中,也可以將之前修改過 style.css 複製過來。
三、打開復制過來的 style.css 文件,在文件頭部添加:
這個是關鍵,其中的 ruike 名稱必須與父主題文件夾名稱相同,而且父主題 ruike 也必須與新建的子主題同在 WordPress 主題目錄 (themes) 中。
其它內容酌情修改,最終如下:
|
/* Theme Name: ruike-child Theme URI: http://www.xhsay.com/ Author: luke Author URI: http://www.xhsay.com/ Description: 子主題。 Template:ruike Version: 1.0 */ |
四、登錄後台外觀→主題中啓用這個子主題 ruike-child 之後,就可以根據自己的喜好修改其中的樣式。
父主題樣式可以通過下面形式加載:
|
1 |
@import url("../ruike/style.css"); |
代碼必須寫在所有樣式之前,也就是文件頭的後面,子主題樣式文件中只需添加自己修改的部分即可。
比如:將導航菜單改為紅色,修改下面 5 個選擇器樣式:
|
#site-nav { background:#d03f42; } #site-nav li { border-right:1pxsolid#f64f53; border-left:1pxsolid#a12e30; } #site-nav li a:hover, #site-nav li a:active { background:#a52d30; } #site-nav.current_page_item , #site-nav .current-menu-item { background:#a12e30; } #site-nav li a:hover, #site-nav li a:active { background:#a12e30; } |
子主題繼承父主題所有功能,可以在子主題中新建一個 functions.php 文件,增加新的功能,或者去掉父主題的部分功能。
還可以將父主題其它模板文件比如 index.php 、 single.php 、 archive.php 等複製過來,進行個性化修改。