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

WordPress 主题开发：从零开始构建你的第一个自定义主题

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

理解WordPress主題的核心結構

在開始編寫程式碼之前，必須先理解一個WordPress主題的基石：模板檔案和樣式表。WordPress透過呼叫一系列特定的檔案來渲染網站的不同部分，這些檔案遵循標準化的命名約定。一個最小化的主題只需要兩個檔案：index.php（主要模板檔案）和style.css（核心樣式表和主題資訊檔案），但為了構建功能豐富的網站，我們需要更多。

style.css檔案不僅包含CSS規則，其檔案頭部的註釋塊還定義了主題的元資料，如主題名稱、作者、描述和版本。這是WordPress識別一個主題的方式。例如，一段基礎的頭部註釋如下：

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

除了核心檔案，一個典型的主題結構還包括header.php（站點頭部）、footer.php（站點底部）、sidebar.php（側邊欄）和functions.php（主題功能函式檔案）。理解如何將這些檔案透過模板標籤（如get_header(), get_footer()）模組化地組合，是高效開發的關鍵。

推荐阅读 WordPress 主题开发入门指南：从零开始打造属于你自己的网站界面。

建立主題檔案與目錄

首先，我們需要在WordPress安裝目錄下的wp-content/themes/位置建立一個新的資料夾。這個資料夾的名稱就是你的主題的識別符號，建議使用小寫字母、數字和連字元，例如my-first-theme所有主题文件都将存储于此处。

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

建立核心樣式表文件

正如前面所強調的，style.css是必需的。在主題資料夾中建立此檔案，並填寫完整的主題資訊頭部。之後，你可以開始編寫基礎的CSS來定義網站的外觀。為了避免瀏覽器預設樣式的干擾，通常從重置樣式開始。

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

構建主模板檔案

接下來，建立index.php。這是預設的、最重要的模板檔案。它的初步結構應包含對頭部、內容迴圈和底部的呼叫。模板標籤是WordPress的內建函式，用於插入動態內容。
一個極簡的index.php初始版本可能如下：

<main id="primary" class="site-main">
    <?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 文章内容将在这里输出
            the_title('<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?>
</main>

分解模板：頭部、底部與側邊欄

為了程式碼的複用和清晰，WordPress主題通常將頁面的通用部分分離到獨立檔案中。

實現站點頭部模板

建立 （注：此处"建立"可能指某个组织、项目或机构的创立过程。）header.php。這個檔案包含HTML文件的頭部（到標籤的開啟部分），以及網站頂部的導航區域。關鍵模板標籤包括bloginfo()用於獲取站點資訊，以及wp_head()鉤子，它允許外掛和主題在部分注入程式碼。
一個基本的header.php示例：

推荐阅读 WordPress主题开发完全指南：从零开始搭建自定义网站。

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body no numeric noise key 1005>

<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/zh-tw/</?php echo esc_url(home_url('/')); ?>"></a></h1>
        <p class="site-description"></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_class'     =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

實現站點底部模板

建立 （注：此处"建立"可能指某个组织、项目或机构的创立过程。）footer.php。它包含主內容區結束後的所有內容，如頁尾版權資訊，以及至關重要的wp_footer()鉤子呼叫，這對於許多外掛（如分析程式碼）的正常工作是必需的。

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

</body>
</html>

增強主題功能與自定義

functions.php是你的主題的“大腦”，用於新增功能、註冊特性（如導航選單、小工具區域）和排入指令碼樣式，而無需修改核心檔案。

註冊主題支援的功能

关于functions.php在中，您可以使用add_theme_support()函式來宣告主題支援的功能。例如，啟用文章縮圖（特色影象）和自定義標誌是現代主題的標配。

hostng.com 共享主机
高效能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候 24 小时专业内部支持，先进的安全措施包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 731 TB/月的带宽成本。
hosting.com标志 访问页面 
<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

排入樣式表與指令碼

正確的樣式和指令碼載入方式是使用wp_enqueue_style()以及wp_enqueue_script()创建一个函数，并将其挂载到wp_enqueue_scripts鉤子上。這確保了依賴關係得到管理，並避免了重複載入。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入主JavaScript文件
    wp_enqueue_script('my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

总结

從建立主題資料夾和style.css開始，到構建index.php、分解出header.php以及footer.php等模板檔案，再到透過functions.php檔案為你的主題新增核心功能和資源，這個過程構成了WordPress主題開發的基礎框架。每個步驟都強調了WordPress模板層次結構的概念和最佳實踐，如正確使用模板標籤和鉤子。掌握了這些基礎，你就擁有了定製和擴充套件任何功能、滿足不同專案需求的堅實起點。

常见问题解答（FAQ）

### 一個WordPress主題最少需要幾個檔案？
一個可以工作的WordPress主題最少只需要兩個檔案：index.php以及style.css其中,style.css檔案頂部的註釋塊必須存在幷包含正確的主題資訊，這是WordPress識別主題的必需條件。

推荐阅读 零到一：WordPress主题开发终极指南与实践教程。

如何為我的主題新增一個小工具區域？

你需要透過functions.php檔案來註冊小工具區域（側邊欄）。使用register_sidebar()函式，並指定其引數，如名稱、ID和描述。之後，你可以在相應的模板檔案（例如sidebar.php请将下文翻译成中文，并详细说明翻译过程： （在此处插入用户提供的英文文本）dynamic_sidebar()用函数来调用它。

為什麼我的自定義導航選單不顯示？

這通常是因為沒有在functions.php中正確註冊選單位置。請確保你使用了register_nav_menus()函式來註冊一個選單位置（例如‘primary’），並且在header.php中呼叫wp_nav_menu()時，‘theme_location’引數設定的值與註冊時完全一致。最後，還需要在WordPress後臺的“外觀 > 選單”設定中，將某個選單分配到這個位置。

InterServer 共享主机
虚拟主机的月费为1TB+5TB，价格为2.50美元。首月优惠价为1TB+5TB，价格为0.1美元。优惠码为"tryinterserver"。平台提供461个云应用脚本，一键安装便捷。
InterServer 标志 访问页面

我應該在什麼時候使用get_template_part()函式？

get_template_part()函式用於將可重用的程式碼片段模組化，特別適用於文章迴圈中不同格式的內容輸出。例如，你可以建立一個content.php檔案來定義每篇文章的通用HTML結構，然後在index.php的迴圈中使用get_template_part(‘content’)來呼叫它。這提高了程式碼的複用性和可維護性，也使建立更專業的模板（如content-page.php）成為可能。

下一步，该怎么做呢？

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

延伸阅读与实用知识

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

标签：