主页/知识/ワードプレス/内容详情

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

3 分钟阅读时间
2026-03-19
2026-06-04
2,482
當您透過下方連結購物時，我會獲得佣金，而您無需支付額外费用。.

理解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">
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 文章内容将在这里输出
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</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-hant/</?php echo esc_url(home_url('/')); ?>"></a></h1>
        <p class="site-description"></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&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()函數來聲明主題支持的功能。例如，啓用文章縮略圖（特色圖像）和自定義標誌是現代主題的標配。

hosting.com 共享主机
高性能配置，搭载 AMD EPYC 处理器、NVMe SSD 存储及 LiteSpeed 技术，提供全天候 24 小时专家内部支持，具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施，节省成本高达 73%。
ホスティング.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 共享主机服务
共享主机每月价格为 $2.50 美元，首月优惠价为 $0.1 美元，优惠码为 tryinterserver，提供 461 个云应用脚本，可一键安装。
InterServer 로고 访问页面

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

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

接下来，我该怎么做呢？

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

延伸阅读与实用知识

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

标签：