本章開始從使用者操作進入主題開發。你會建立一個最小可啟用的 WordPress 佈景主題，理解主題必要檔案、模板載入方式，以及如何用子佈景主題安全覆寫既有主題。
能建立自訂主題骨架，理解 style.css、index.php、functions.php 的角色，並能建立子佈景主題保留客製化修改。
6.1 自訂佈景主題基礎
一個最小 WordPress 主題至少需要 style.css 與 index.php。style.css 的檔頭讓 WordPress 辨識主題，index.php 則是最基本的模板檔。
建立主題資料夾
wp-content/themes/wp2026-basic/
├── style.css
├── index.php
└── functions.phpstyle.css 檔頭範例：
/*
Theme Name: WP2026 Basic
Author: minhuangyuntech
Version: 1.0.0
Text Domain: wp2026-basic
*/主題檔頭欄位說明
style.css 檔頭不是註解而已，WordPress 會讀取這些資訊來顯示主題名稱、作者與版本。常見欄位如下：
Theme Name：主題顯示名稱，必要欄位。Author：主題作者或團隊名稱。Description：主題用途說明。Version：版本號，方便部署與快取更新。Text Domain：多語系翻譯識別名稱，通常與主題資料夾一致。
主題資料夾名稱建議使用小寫英文、數字與連字號，例如 wp2026-basic，避免空白與特殊符號造成路徑問題。
拆分 header 與 footer
實務主題不會把所有 HTML 寫在 index.php。頁首與頁尾是全站共用區塊，應拆成 header.php 與 footer.php，再用 get_header()、get_footer() 載入。
<!-- header.php -->
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header class="site-header">
<a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
</header><!-- footer.php -->
<footer class="site-footer">
<p>© <?php echo esc_html(date('Y')); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>wp_head() 與 wp_footer() 非常重要，WordPress 與外掛會透過它們插入樣式、腳本與必要標記。缺少這兩個函式，很多外掛功能會失效。
輸出文章列表
<?php get_header(); ?>
<main>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>上面的範例是最基本的文章列表。實務上還需要補上「查無資料」狀態，避免頁面空白：
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- 文章輸出 -->
<?php endwhile; ?>
<?php else : ?>
<p>目前沒有文章。</p>
<?php endif; ?>載入樣式與腳本
不要在模板中硬寫 CSS 或 script 路徑，應透過 wp_enqueue_scripts 載入。
add_action('wp_enqueue_scripts', 'wp2026_enqueue_assets');
function wp2026_enqueue_assets() {
wp_enqueue_style('wp2026-style', get_stylesheet_uri(), [], '1.0.0');
}如果主題有獨立 JavaScript 檔案，可以一起註冊。最後一個參數設為 true，代表把腳本放在頁尾載入，通常對效能較友善。
wp_enqueue_script(
'wp2026-main',
get_template_directory_uri() . '/assets/js/main.js',
[],
'1.0.0',
true
);Template Hierarchy 入門
WordPress 會依網址與內容類型自動尋找模板檔，這套規則稱為 Template Hierarchy。常見對應如下：
- 首頁文章列表：
home.php，找不到時使用index.php。 - 單篇文章：
single.php，找不到時使用singular.php或index.php。 - 頁面：
page.php，找不到時使用singular.php或index.php。 - 分類封存：
category.php，找不到時使用archive.php或index.php。
理解這套規則後，你就能知道「新增哪個檔案可以控制哪種頁面」。
6.2 子佈景主題的運用
子佈景主題 (Child Theme) 可以繼承父主題，並只覆寫需要修改的部分。這樣父主題更新時，你的客製化檔案不會被覆蓋。
建立子主題
/*
Theme Name: WP2026 Child
Template: twentytwentysix
Version: 1.0.0
*/Template 必須填父主題資料夾名稱，而不是主題顯示名稱。
在子主題載入樣式
子主題若要載入自己的樣式，建議在子主題的 functions.php 使用 wp_enqueue_scripts。不要使用舊式 @import，因為它較不利於效能。
add_action('wp_enqueue_scripts', 'wp2026_child_enqueue_styles');
function wp2026_child_enqueue_styles() {
wp_enqueue_style(
'wp2026-child-style',
get_stylesheet_uri(),
[],
'1.0.0'
);
}在子主題中，get_stylesheet_directory_uri() 指向子主題；get_template_directory_uri() 指向父主題。兩者在主題開發中很常被混淆。
覆寫模板檔案
若子主題中建立與父主題同名的模板檔，例如 single.php，WordPress 會優先使用子主題版本。這讓你可以只改需要的模板，而保留父主題其他功能。
如果只是改顏色或間距，用 CSS 即可；如果要改 HTML 結構，才需要覆寫模板。覆寫越多，未來父主題更新時需要檢查的範圍也越大。
何時用子主題
- 只想微調現有主題的樣式或模板。
- 客戶網站使用商業主題，仍需要保留更新能力。
- 不想從零建立完整主題。
本章練習
- 建立一個名為
wp2026-basic的主題並啟用。 - 讓首頁列出文章標題與摘要。
- 使用
functions.php載入樣式。 - 建立一個子主題，覆寫父主題的部分樣式。