主页/知识/WordPress/Content Details

WordPress主題開發：從零開始創建自定義主題的完整指南

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

WordPress主題的基本結構

一个 WordPress 主题本质上是一个位于某个特定位置的文件集合。例如，WordPress 的默认主题通常存储在 /wp-content/themes/default 文件夹中，而用户自定义的主题则通常存储在 /wp-content/themes 文件夹下。wp-content/themes/目錄下的文件夾，其中包含一系列用於控制網站外觀和功能的文件。理解這些核心文件的角色是開發的基礎。

主題必需的模板文件

每個主題必須包含兩個最基礎的文件：style.css以及index.php其中,style.css不僅用於存放CSS樣式，其文件頭部註釋塊還承載着主題的元信息，WordPress依賴這些信息來識別主題。

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.php是主題的默認模板文件，當WordPress找不到更具體的模板時，就會使用它來渲染頁面。它是所有頁面顯示的“安全網”。

推荐阅读 打造優質網站：深入解析 WordPress 主題的定製與優化實戰指南。

常用的其他模板文件

為了更精細地控制不同頁面的顯示，你需要創建更多模板文件。例如，header.php通常包含文檔類型聲明、<head>區域和網站的頁頭部分；footer.php則包含頁腳內容和閉合標籤；sidebar.php用於側邊欄。通過WordPress內置的函數如get_header()、get_footer()以及get_sidebar()你可以在其他模板中轻松引入这些部分。

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

此外，你還可以創建single.php用於單篇文章，page.php用於獨立頁面，archive.php用於歸檔列表，以及functions.php這個特殊文件來添加主題的功能和特性。

創建主題的首頁模板

首頁是網站的門面，通常需要最獨特的設計。我們將從構建index.php開始，並探討如何引入循環來顯示內容。

整合頁頭和頁腳

一個良好的實踐是將公共部分模塊化。首先，在你的主題文件夾中創建header.php以及footer.php关于header.php中，你需要包含<!DOCTYPE html>聲明、<html>標籤的開始、<head>區域（使用wp_head()鈎子讓插件和主題能在此注入代碼），以及網站標誌和主導航等開篇內容。

然后，接下来在index.php的開頭，使用<?php get_header(); ?>來引入這個頁頭。在index.php的末尾，使用<?php get_footer(); ?>來引入footer.php，其中應包含wp_footer()鈎子調用和閉合的</body></html>标签。

推荐阅读 全套WordPress主题开发指南：从零到一，构建高性能自定义主题。

使用循環輸出文章

WordPress的核心是“循環”（The Loop），它是一段PHP代碼，用於檢查是否有文章存在，並在存在時依次顯示它們。在index.php嗯，我想我可能需要去趟洗手间。get_header()之後，你可以插入以下基礎循環代碼：

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/zh-hk/</?php the_permalink(); ?>"></a></h2>
            <div class="entry-content">
                
            </div>
        </article>
    

    <p>抱歉，没有找到任何文章。</p>

這段代碼中，have_posts()以及the_post()函數驅動循環。the_title()、the_permalink()以及the_excerpt()等模板標籤用於輸出文章的具體內容。這樣，一個基本的文章列表頁面就完成了。

為主題添加樣式和腳本

一個沒有樣式的主題是缺乏吸引力的。你需要正確地將CSS和JavaScript文件加入隊列，這是WordPress推薦的做法，可以確保依賴關係正確並避免衝突。

hosting.com 共享主机
高性能配置，搭载 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed 技术，提供全天候 24 小时专业内部支持，具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施，节省成本高达 73%。
hosting.com 标志 访问页面

正確引入樣式表

尽管如此，style.css是必需的，但你不應直接在HTML中鏈接它。正確的方法是在functions.php文件中使用了wp_enqueue_style()函數。首先，在主題根目錄創建functions.php文件，然後添加以下代碼：

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

這段代碼定義了一個函數，它告訴WordPress將主題的主樣式表（get_stylesheet_uri()獲取的路徑）以“my-theme-style”為句柄加入隊列。add_action()鈎子將這個函數掛載到wp_enqueue_scripts這個動作上，確保在頁面加載時執行。

引入自定義JavaScript

引入JavaScript文件的方法類似，但使用wp_enqueue_script()函數。假設你有一個位於js/script.js的文件，你可以這樣添加：

推荐阅读 入门到精通：WordPress主题开发完全指南及实战教程。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

這裏的參數分別表示：腳本句柄、腳本URL、依賴數組（如array('jquery')）、版本號、以及是否在頁腳加載（true表示在</body>前加載）。

擴展主題功能

functions.php是主題的“工具箱”，你可以在這裏添加各種功能來增強主題，而無需修改核心模板文件。

InterServer 共享主机
虚拟主机每月价格为 1TB + 5TB，费用为 2.50 美元，首月优惠价为 1TB + 5TB，价格为 0.1 美元。优惠码为 "tryinterserver"，支持一键安装 461 款云应用脚本。
InterServer 标志 访问页面

添加主題支持功能

WordPress提供了許多內置功能，但需要主題明確聲明支持後才能啓用。這通過add_theme_support()函數實現。例如，要支持文章縮略圖（特色圖像）、自定義Logo和HTML5的標記，可以在functions.php添加到中文文本中：

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )確保這些設置在主題初始化時儘早運行。

註冊導航菜單

為了讓用户能在後台“外觀-菜單”中設置導航，你需要預先註冊菜單位置。使用register_nav_menus()函数：

function my_theme_register_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_theme_register_menus' );

註冊後，你就可以在模板文件（如header.php这些数据在报告中被使用了wp_nav_menu( array( 'theme_location' => 'primary' ) )來顯示這個菜單了。

总结

從創建包含style.css以及index.php的基礎文件夾開始，你逐步構建了一個完整的WordPress主題。通過理解模板層次結構，你學會了創建專門的模板文件來精確控制不同類型的頁面。採用wp_enqueue_style()以及wp_enqueue_script()來管理資源是保證主題兼容性和性能的最佳實踐。最後，利用functions.php文件，你能夠通過add_theme_support()以及register_nav_menus()等函數安全地為主題添加強大的功能。掌握這些核心步驟，你就擁有了獨立開發個性化WordPress主題的堅實基礎。

常见问题解答（FAQ）

開發WordPress主題需要哪些先決知識？

你需要具備HTML和CSS的紮實基礎，用於構建網頁結構和樣式。同時，需要了解PHP的基本語法，因為WordPress主題模板主要由PHP驅動。對JavaScript有初步瞭解有助於添加交互功能。此外，熟悉WordPress的基本概念，如文章、頁面、分類和標籤，會讓你在開發過程中更加得心應手。

為什麼必須使用wp_enqueue_style加載樣式表，而不是直接link？

直接使用<link>標籤硬編碼樣式表路徑存在多個問題。首先，它無法妥善處理依賴關係，例如你的樣式可能依賴於某個框架的樣式。其次，wp_enqueue_style允許插件或其他主題子主題安全地覆蓋或修改你的樣式。最重要的是，它能與緩存和性能優化插件更好地協作，確保資源加載的順序和效率，是WordPress生態中的標準做法。

functions.php和插件有什麼區別？

functions.php中定義的代碼是與你的主題緊密綁定的，當用户切換主題時，這些功能將不再可用。它適合存放與主題視覺呈現和佈局直接相關的功能，例如註冊菜單、支持特色圖像、定義側邊欄等。而插件提供的功能通常是獨立於主題的，旨在為網站添加某種通用特性（如聯繫表單、SEO優化），即使用户更換主題，這些功能依然存在。如果某個功能與主題外觀無關，考慮將其做插件通常是更靈活的選擇。

怎样让我的主题支持多语言翻译？

讓主題支持國際化是走向全球市場的關鍵。首先，在你所有的主題文本輸出處，使用WordPress的翻譯函數，例如__('文本', 'my-custom-theme')或者_e('文本', 'my-custom-theme')其中my-custom-theme是在style.css中定義的文本域。然後，使用如Poedit這樣的工具，掃描主題文件生成.pot模板文件，翻譯人員可以據此創建不同語言的.po以及.mo文件。最後，在functions.php通过了考试。load_theme_textdomain()函數加載翻譯文件。

接下来，我该怎么做呢？

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

延伸阅读与实用知识

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

标签：