主页/知识/WordPress/内容详情

如何建立自定義WordPress主題：從零到一完整入門指南

3 分钟阅读时间
2026-03-12
2026-06-03
2,753
通过下方链接进行购物时，您无需支付额外费用，我就能获得佣金。.

理解 WordPress 主題的基礎架構

在開始編碼之前，理解一個 WordPress 主題的基本構成是至關重要的。一個主題不僅僅是一組樣式表，它是由一系列遵循特定標準的模板檔案組成的有機整體。這些檔案協同工作，告訴 WordPress 如何呈現你網站的內容。主題目錄通常位於 /wp-content/themes/，你建立的每個主題都應該擁有一個獨立的資料夾。

最基本的 WordPress 主題只需要兩個檔案：style.css 以及 index.php其中,style.css 不僅負責樣式，其檔案頭部註釋塊更是主題的“身份證”，用於向 WordPress 宣告主題的名稱、作者、描述等資訊。而 index.php 是預設的主模板檔案，當沒有更具體的模板匹配時，WordPress 會使用它來渲染頁面。

然而，一個功能完善的自定義主題會包含更多模板檔案，每個檔案對應特定的頁面或功能。例如，header.php 定義網站頭部區域，footer.php 定義底部區域，single.php 用于展示单篇文章。page.php 用于显示独立页面的。functions.php 則用於新增主題特有的功能和註冊各種元件。

推荐阅读 WordPress主題開發入門：從零開始構建你的第一個自定義主題。

WordPress 採用模板層級系統來決定為特定請求使用哪個模板檔案。這意味著你不需要為網站的每一個頁面都單獨寫程式碼。透過建立不同層級的模板檔案，你可以精確控制不同型別內容（如文章、頁面、分類目錄、作者頁面等）的顯示方式。掌握這個層級關係，是高效建立主題的關鍵。

UltaHost WordPress 主機
30天退款保證，無限頻寬與資料庫，免費的 DDoS 防護，購買3年優惠50%
UltaHost LOGO 访问页面

搭建自定義主題的開發環境

在動手建立檔案之前，建立一個本地開發環境是專業工作流程的第一步。這允許你在不影響線上網站的情況下進行開發和測試。你可以使用如 Local by Flywheel、XAMPP、MAMP 或 Docker 等工具快速在本地計算機上配置一個包含 Apache/Nginx、PHP 和 MySQL 的 WordPress 環境。

一旦本地環境就緒，你需要在 WordPress 安裝目錄的 wp-content/themes 資料夾下建立一個新的資料夾。這個資料夾的名稱就是你的主題的識別符號，建議使用小寫字母、數字和連字元，並且儘量不與現有主題重名，例如 my-custom-theme。

接下來，建立第一個必需的檔案：style.css。請務必在其頂部新增格式正確的主題資訊註釋塊。

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始创建的自定义 WordPress 主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

然後，建立同樣必需的 index.php 檔案。最初，它可以非常簡單，甚至只包含一句 HTML。

推荐阅读 入门级WordPress主题开发：从零开始构建自定义主题。

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1001>
    <h1>Hello, WordPress Theme Development!</h1>
    
</body>
</html>

此時，登入你的本地 WordPress 後臺，進入“外觀” -> “主題”，你應該能看到你的主題已經出現。啟用它，訪問網站首頁，你將看到上面程式碼輸出的簡單資訊。這標誌著你的自定義主題已經初步執行。

構建主題的核心模板檔案

擁有一個可執行的主題框架後，下一步是將其模組化，並利用 WordPress 的核心功能來處理動態內容。模組化的關鍵在於將可複用的部分拆分成獨立的模板檔案。

建立頭部和底部模板

首先，我們將 index.php 中的頭部和底部程式碼分離出去。建立一個新檔案命名為 header.php，將部分和的起始部分移動進去。

hostng.com 共享主机
高效能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候 24 小时专业内部支持，先进的安全措施包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 731 TB/月的带宽成本。
hosting.com标志 访问页面 
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
</head>
<body no numeric noise key 1004>

<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/zh-tw/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
    <p class="site-description"></p>
</header>

接著，建立 footer.php 檔案，包含頁尾內容和結束標籤。

<footer id="colophon" class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>

</body>
</html>

然後，修改 index.php，使用 WordPress 的模板引入函式來呼叫它們。

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 文章內容輸出將在這裡
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' );
    endif;
    ?&gt;
</main>

<?php get_sidebar(); // 如果存在侧边栏模板 ?>
<?php get_footer(); ?>

建立文章和頁面模板

為了實現文章和頁面的不同佈局，可以建立 single.php 來處理單篇文章，以及 page.php 來處理獨立頁面。它們的基本結構類似，但可以利用 WordPress 的條件標籤 is_single() 以及 is_page() 在必要時進行區分。
建立一个 functions.php 檔案至關重要，它用於增強主題功能。在此檔案中，你可以註冊選單、側邊欄（小工具區域）、新增主題支援的功能（如文章縮圖、定製標題標籤）以及排入樣式表和指令碼檔案。

推荐阅读 WordPress主題終極指南：從選擇、定製到開發的完整方案。

<?php
function my_custom_theme_setup() {
    // 让 WordPress 负责管理文档标题标签
    add_theme_support( 'title-tag' );
    // 启用文章和页面特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 排入自定义脚本
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );
?>

應用樣式與新增互動功能

即使是一個以功能為主的主題，也需要基本的樣式來保證可用性和可讀性。你可以在 style.css 主樣式表的基礎上進行擴充套件，建立響應式佈局和美觀的介面。

實現基本的響應式設計

從設定一些 CSS 重置和基礎樣式開始，然後為移動裝置優先的響應式設計制定媒體查詢。

InterServer 共享主机
虚拟主机的月费为1TB+5TB，价格为2.50美元。首月优惠价为1TB+5TB，价格为0.1美元。优惠码为"tryinterserver"。平台提供461个云应用脚本，一键安装便捷。
InterServer 标志 访问页面 
/* style.css */
/* 基础重置与样式 */
* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 移动端响应式 */
.site-header, .site-footer {
    padding: 1rem 0;
    text-align: center;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
    .site-main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
}

建立導航選單指令碼

為了讓移動端選單可互動，你可以建立一個簡易的 JavaScript 檔案。首先，在 header.php 中為選單按鈕新增 HTML 結構，然後在 /js/navigation.js 中新增控制邏輯。

// /js/navigation.js
document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.querySelector('.menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');

if (menuButton) {
        menuButton.addEventListener('click', function() {
            primaryMenu.classList.toggle('toggled');
            this.setAttribute('aria-expanded', 
                this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
            );
        });
    }
});

最後，你還可以利用 WordPress 的定製器 API 或建立主題選項頁面，為使用者提供一些簡單的自定義選項，例如站點顏色或 logo 上傳。這通常透過在 functions.php 请将下文翻译成中文，并详细说明翻译过程： add_theme_support 和相關的 API 函式來實現。

总结

從零開始建立自定義 WordPress 主題是一個系統性的學習過程，它要求你同時掌握 PHP、HTML、CSS、JavaScript 的基礎知識以及對 WordPress 核心架構和 API 的理解。整個過程從搭建基礎的 style.css 以及 index.php 開始，透過模組化分離出頭部、底部、側邊欄等模板檔案，利用模板層級系統精準控制內容顯示，並在 functions.php 中整合主題功能和註冊各類元件。最終，透過響應式 CSS 和必要的 JavaScript 指令碼，使主題變得美觀且互動友好。遵循這一路徑，你不僅能打造出獨一無二的網站外觀，更能深入理解 WordPress 的運作機制，為更高階的主題和外掛開發奠定堅實基礎。

常见问题解答（FAQ）

建立 WordPress 主題必須掌握哪些程式語言？

建立一個功能完整的 WordPress 主題，你需要掌握幾項核心技術。PHP 是最核心的，因為 WordPress 本身是用 PHP 編寫的，所有模板檔案和邏輯處理都離不開它。HTML 用於構建頁面結構，CSS 用於控制樣式和佈局，確保主題的美觀和響應式設計。JavaScript（通常是 jQuery）則用於新增前端互動效果，如選單切換、輪播圖等。

自定義主題與使用現有主題或頁面構建器有何主要區別？

自定義主題能提供最大程度的靈活性和獨特性，你可以完全控制網站的每一行程式碼、每一個功能和效能表現，可以打造出完全符合特定品牌和業務需求的網站，並且程式碼通常更精簡高效。而使用現有主題或頁面構建器雖然上手快，但可能伴隨大量冗餘程式碼、有限的定製選項、潛在的外掛依賴，以及較高的同質化風險。自定義主題更適合需要獨特品牌形象、特定功能或高效能要求的專案。

如何讓我的自定義主題符合 WordPress 官方的標準？

為了讓你的主題符合 WordPress 核心標準並有可能被收錄到官方目錄，你需要嚴格遵守《WordPress 主題開發手冊》。這包括：使用正確的模板層級結構、對所有動態資料輸出進行國際化（i18n）轉義和本地化處理、安全地處理所有使用者輸入和輸出、確保主題程式碼遵循 WordPress 編碼標準、提供無障礙訪問（A11y）支援，以及確保主題在核心功能開啟和關閉時都能正常工作（主題單元測試）。

開發主題時，functions.php 檔案的主要作用是什麼？

functions.php 檔案是你的主題的“功能工具箱”。它不用於生成頁面上的直接輸出，而是用於定義主題的功能和行為。其主要作用包括：透過鉤子（Hooks）新增或修改 WordPress 核心功能、註冊導航選單位置和側邊欄（小工具區）、為主題新增特色功能支援（如文章縮圖、自定義Logo）、以及安全地排入主題的樣式表和 JavaScript 指令碼檔案。它是連線你的主題外觀和 WordPress 後臺功能的關鍵橋樑。

下一步，该怎么做呢？

如果你正在搭建或优化WordPress网站，建议你继续阅读关于性能优化、插件配置和主题定制的相关内容。

延伸阅读与实用知识

下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。

标签：