使用子主題的優點
- 安全更新：當父主題更新時，子主題所做的任何自訂都不會被覆蓋。這保護了你的變更免受父主題更新的影響。
- 易於自訂：子主題允許你安全地更改或增加父主題的功能和樣式，而不需要直接修改父主題的檔案。
- 學習和實驗：對於初學者來說，子主題是學習如何自訂和擴展主題的好方法，因為它提供了一個相對安全的環境來進行實驗。
- 保持父主題的功能：子主題繼承了父主題的所有功能和樣式，讓你可以在不失去原有功能的情況下進行更改。
- 更新父主題保持兼容性：當父主題更新以兼容最新的 WordPress 版本時，子主題也能從中受益。
step 1
進入themes資料夾(docker中/var/www/html/wordpress/wp-content/themes)
本篇使用主題名稱:twentytwentythree(可替換成其他)
建立一個資料夾，名稱為twentytwentythree-child
step 2
將父主題twentytwentythree資料夾內複製style.css 和 functions.php(如果沒有沒關係)到twentytwentythree-child
step 3
以下是父主題的style.css
/*
Theme Name: Twenty Twenty-Three
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Requires at least: 6.1
Tested up to: 6.4
Requires PHP: 5.6
Version: 1.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentythree
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
清空子主題style.css內所有內容，並貼上
/*
Theme Name: Twenty Twenty-Three Child
Theme URI: http://example.com/twenty-twenty-three-child/
Description: Twenty Twenty-Three Child Theme
Author: Your Name
Author URI: http://example.com
Template: twentytwentythree
Version: 1.0.0
*/
子主題需要修改以下幾點，將父主題的名稱放入才能對應到父主題
Theme name – 複製父主題的並在後方加上 Child(有一個空格)
Template – 與父主題的Text Domain相同
其他欄位為選填 (非必填)
step 4
如果有複製functions.php則開啟並清除所有內容，若父主題沒有則在twentytwentythree-child中建立新的functions.php
所有自訂及外部JS載入都須透過functions.php
載入父主題樣式，再載入子主題樣式
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // 這是父主題的樣式表的 handle。
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')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
載入bootstrap樣式
<?php
function bootstrap_enqueue_styles() {
wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'bootstrap_enqueue_styles');
Visited 5 times, 1 visit(s) today
發佈留言