WordPress： 建立 Child Theme
最近想說要讓blog提升質感，所以改了部落格的佈景主題，雖然改了之後確實美化不少，但基本上都還是跟原本的主題一樣，增加的功能並不多，好用的功能會有限制，需要付費購買進階主題功能。
wordpress可以自行修改主題程式碼，也可以加入自己建立的主題，通常可以利用引入原主題的版面樣式，製作屬於自己子佈景主題，這樣就可以在不動到原本程式的情況下，增加自己的程式，並把程式碼分開管理了。
接下來就稍微把一些知識及過程紀錄一下。
基本名詞定義
以下說明是節錄自官網的文件
- 父佈景主題 (Parent Theme)
A parent theme is a complete theme which includes all of the required WordPress template files and assets for the theme to work. All themes – excluding child themes – are considered parent themes.
具有完整主題所需的程式範本文件 (不包括子佈景主題)，即稱作「父佈景主題」。
- 子佈景主題 (Child Theme)
A child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files. Using a child theme lets you upgrade the parent theme without affecting the customizations you’ve made to your site.
引入父佈景主題所有功能的主題稱作「子佈景主題」。其作用可將自訂程式
子佈景主題的特點
- 建立自己的程式碼
- 自定的程式與原主題分開
- 父佈景主題更新不會影響自定程式
- 節省開發時間
- 學習如何建立主題的入門方式
建立子佈景主題
以下步驟使用Ashe當作父佈景主題
-
在
wp-content\themes建立子佈景主題資料夾 ashe-child -
建立樣式檔
style.css。在樣式檔中，開頭必須加入子主題的資訊聲明，包含父主題資訊，才能讓wordpress知道這是一個子主題。
相關的資訊如下：
/*
Theme Name: Ashe Child
Theme URI: wp/wp-content/themes/ashe-child/
Author: yang10001
Author URI: https://yang10001.yia.app/
Description: Ashe Child Theme
Template: ashe
Version: 1.0.0
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.en.html
Tags: blog, custom theme
Text Domain: ashechild
*/其中子主題必需要添加的內容有兩個
- Theme Name (主題名稱)
- Template (範本名稱)
對於子主題而言，只要有style.css就可以成立了。
- 建立子佈景的縮圖
screenshot.png(方便後台系統查看)
- 加入原主題的版面樣式
分成兩種方式
- 加在建立的
style.css中
import url("../ashe/style.css");- 建立
function.php並加入以下程式碼
<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
$parenthandle = 'parent-style'; // This is 'ashe-style' for the Ashe theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}- 把父主題ashe資料夾中的
index.php、get_header.php複製到子主題ashe-chile中，這樣就在原有的首頁樣式進行修改。