WordPress 佈景主題製作實例（上）

本章進入完整佈景主題製作實例。你會把前端版面拆成 WordPress 可維護的模板檔，建立頁首、頁尾、文章列表與基本版面結構，讓靜態頁面逐步變成可由後台管理內容的主題。

8.1 深入探討佈景主題的設計

主題設計的第一步不是寫程式，而是拆解頁面：哪些區塊會重複出現？哪些內容由後台文章提供？哪些屬於全站設定？這些判斷會影響模板檔案如何分工。

主題檔案規劃

wp2026-theme/
├── style.css
├── functions.php
├── header.php
├── footer.php
├── index.php
├── single.php
├── page.php
└── assets/
    ├── css/
    └── js/

header.php 與 footer.php 放全站共用區塊，文章列表放在 index.php，單篇文章放在 single.php，靜態頁面放在 page.php。

從靜態 HTML 拆成模板

靜態 HTML 通常有固定頁首、內容區與頁尾。轉為 WordPress 主題時，先把頁首移到 header.php，頁尾移到 footer.php，中間內容交給不同模板處理。

<?php get_header(); ?>
<main class="site-main">
  <?php while (have_posts()) : the_post(); ?>
    <article>
      <h1><?php the_title(); ?></h1>
      <?php the_content(); ?>
    </article>
  <?php endwhile; ?>
</main>
<?php get_footer(); ?>

8.2 進階佈景主題設計

完成基本模板後，可以加入主題支援功能、選單位置、縮圖尺寸與資源載入流程，讓主題更接近實務需求。

註冊主題功能

add_action('after_setup_theme', 'wp2026_theme_setup');
function wp2026_theme_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('html5', ['search-form', 'gallery', 'caption']);
    register_nav_menus([
        'primary' => '主選單',
        'footer' => '頁尾選單',
    ]);
}

版面與樣式維護

主題樣式應該有一致命名與結構。建議把全站容器、按鈕、文章卡片、導覽列與表單樣式拆成可重用的 class，避免在模板中寫大量 inline style。

本章練習

1. 把一份靜態首頁拆成 header.php、footer.php 與 index.php。
2. 註冊主選單並在頁首輸出。
3. 讓文章列表顯示精選圖片、標題、日期與摘要。