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

WordPress主題開發入門指南：從零開始建立你的第一個主題

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

理解WordPress主題的基本結構

在開始編寫程式碼之前，理解WordPress主題的構成是至關重要的。一個最基礎的主題至少需要兩個檔案：一個是用於定義主題資訊的樣式表，另一個是用於顯示網站內容的PHP模板檔案。這些檔案共同構成了主題的骨架，並遵循特定的目錄結構和命名規範。

核心檔案是style.css，它不僅僅包含CSS樣式，其檔案頭部的註釋區塊更是主題的“身份證”。這個區塊向WordPress系統聲明瞭主題的名稱、作者、描述、版本等元資訊。沒有正確格式化的style.css，WordPress將無法識別並激活你的主題。

另一個必不可少的檔案是index.php。這是主題的主模板檔案，當WordPress無法找到更具體的模板檔案（如single.php或者page.php）時，就會預設使用它來渲染頁面。它是所有模板檔案的後備選擇。

推荐阅读 揭秘WordPress主题开发：从零搭建定制化网站的关键技术。

主题信息公告文件

主題的樣式表style.css頭部必須包含特定的註釋。以下是一個最基礎的示例：

UltaHost WordPress 主機
30天退款保證，無限頻寬與資料庫，免費的 DDoS 防護，購買3年優惠50%
UltaHost LOGO 访问页面 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

其中,Text Domain用於國際化，是後續進行翻譯時使用的識別符號。這個檔案通常也包含你所有的CSS樣式程式碼。

核心模板檔案

index.php檔案是主題的入口。一個最簡單的index.php可以只包含呼叫WordPress核心函式的基本迴圈，用以獲取並顯示文章列表。

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

這段程式碼中，wp_head()以及wp_footer()是兩個關鍵的鉤子，它們允許WordPress核心、外掛和其他指令碼在頁面的和末尾插入必要的程式碼，如樣式、指令碼和元標籤。

搭建本地开发环境

在將主題部署到線上伺服器之前，建立一個本地開發環境是最高效和安全的方式。本地環境允許你自由地測試程式碼、除錯錯誤而不會影響線上網站。

推荐阅读 全面掌握WordPress主題開發：從入門到精通的完整指南。

選擇本地伺服器軟體

對於初學者，整合化的本地伺服器軟體是最佳選擇。它們將Apache/Nginx、PHP和MySQL資料庫打包在一起，一鍵安裝即可使用。例如XAMPP、Local by Flywheel或DevKinsta都是流行的選擇。這些工具模擬了真實的網路伺服器環境，讓你能在自己的電腦上執行WordPress。

安裝WordPress並建立主題目錄

在本地伺服器執行後，你需要安裝一個全新的WordPress。下載最新的WordPress壓縮包，解壓到本地伺服器的網站根目錄（例如XAMPP的htdocs資料夾）。隨後透過瀏覽器訪問本地地址（如http://localhost），完成著名的“五分鐘安裝”。

安裝完成後，進入WordPress的wp-content/themes目錄。在這裡，為你即將開發的主題建立一個新的資料夾，例如命名為“my-first-theme”。你之前建立的style.css以及index.php檔案就應該放置在這個資料夾內。此時，你登入WordPress後臺，在“外觀”->“主題”中，應該就能看到你的主題了，儘管它現在功能還非常簡單。

hostng.com 共享主机
高效能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候 24 小时专业内部支持，先进的安全措施包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 731 TB/月的带宽成本。
hosting.com标志 访问页面

構建基礎模板檔案體系

僅有index.php的主題是遠遠不夠的。一個功能完整的主題需要一套模板檔案來應對不同的顯示場景，例如單篇文章、獨立頁面、文章歸檔等。WordPress的模板層級系統會自動選擇最匹配的模板檔案來渲染當前請求的頁面。

文章与页面模板

single.php模板用於顯示單篇部落格文章。當用戶點選閱讀某篇文章的全文時，WordPress就會使用這個模板。它通常包含更詳細的文章資訊，如分類、標籤、作者和評論區域。

page.php模板則用於顯示獨立的靜態頁面（如“關於我們”、“聯絡”頁面）。它與文章模板的區別在於，通常不顯示釋出時間、分類等屬於部落格文章的元素。

推荐阅读 详解WordPress主题开发：从入门到精通的完整指南。

頭部與底部模板

為了遵循DRY（不要重複自己）原則，WordPress主題通常將頁面的頭部（Header）和底部（Footer）部分分離成獨立檔案。

header.php檔案包含從開始到頁面主要內容區域之前的所有程式碼，包括區域、站點標識、主導航選單等。在index.php、single.php等其他模板中，使用get_header()可以通过函数来引入它。

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

同理，footer.php檔案包含頁尾的所有內容，如版權資訊、輔助導航等，並透過get_footer()函式引入。此外，sidebar.php（側邊欄）也常被分離，使用get_sidebar()呼叫。

重構後的index.php會變得非常簡潔：

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

整合樣式與指令碼

現代主題需要正確且高效地載入CSS樣式表和JavaScript指令碼。WordPress提供了專門的函式來管理這些資源，確保它們以正確的依賴順序載入，並且避免重複引入或衝突。

使用函式佇列新增樣式

正確的方式是透過wp_enqueue_style()函式將樣式表加入佇列。你需要在主題中建立一個名為functions.php的檔案，這個檔案是主題的功能核心，用於新增各種特性、功能和修改預設行為。

关于functions.php中，你可以掛載一個函式到wp_enqueue_scripts這個動作鉤子上：

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()函式會自動獲取主題的style.css檔案路徑。透過這種方式載入，WordPress能更好地管理資源。

使用函式佇列新增指令碼

載入JavaScript指令碼同樣需要使用佇列，對應的函式是wp_enqueue_script()。你可以在同一個函式中新增它們。

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

ここでは、array( 'jquery' )聲明瞭該指令碼依賴於核心的jQuery庫，WordPress會確保jQuery先被載入。最後一個引數true表示將指令碼放在頁面底部（之前），這有助於提高頁面載入速度。

总结

從零開始開發一個WordPress主題是一個系統性的學習過程，它涵蓋了從理解基礎檔案結構、搭建本地環境、建立模板體系到正確整合資源等多個關鍵步驟。透過親手建立style.css、index.php、header.php、footer.php另外functions.php等核心檔案，你不僅構建了一個可執行的主題，更深入理解了WordPress模板層級和鉤子系統的工作原理。記住，主題開發的核心在於遵循WordPress的約定和標準，這能確保你的主題相容、高效且易於維護。以此為起點，你可以繼續探索更高階的功能，如自定義文章型別、主題定製器、小工具區域等，逐步打造功能強大的個性化主題。

常见问题解答（FAQ）

開發主題必須掌握PHP嗎

是的，掌握PHP是WordPress主題開發的必備條件。因為WordPress本身是用PHP編寫的，所有的模板檔案（如index.php、single.php）都是PHP檔案，它們透過PHP程式碼呼叫WordPress的核心函式來動態生成頁面內容。同時，用於新增功能的functions.php檔案也完全由PHP程式碼構成。HTML和CSS用於定義結構和樣式，而PHP是實現動態功能和資料互動的靈魂。

主題的functions.php檔案有什麼作用

functions.php檔案是你的主題的“功能中心”。它不是一個模板檔案，不會直接生成頁面上的某一部分。相反，它用於存放所有用於修改和擴充套件主題功能的PHP程式碼。常見用途包括：註冊導航選單位置、定義小工具區域、透過wp_enqueue_scripts鉤子新增CSS和JavaScript檔案、為主題新增主題支援功能（如文章縮圖、自定義背景）、以及定義各種自定義函式。這個檔案在主題啟用時自動載入。

如何讓我的主題支援多語言

讓主題支援多語言（國際化與本地化）主要分為兩個步驟。第一步是在主題中所有需要翻譯的文字處使用特定的WordPress翻譯函式，例如__('文本', 'text-domain')或者_e('文本', 'text-domain')其中text-domain必須與style.css中宣告的Text Domain一致。第二步是使用如Poedit這類工具，掃描主題程式碼生成.pot模板檔案，翻譯者基於此建立對應語言（如中文）的.po和编译后的.mo檔案，並將其放在主題的/languages/目錄下。WordPress會根據網站的語言設定自動載入對應的翻譯。

主題和外掛有什麼區別

主題和外掛在WordPress中承擔著截然不同的職責。主題（Theme）主要控制網站的前端表現形式，即使用者看到的視覺外觀、佈局、樣式和模板結構。它決定了網站“長什麼樣”。而外掛（Plugin）則用於為網站新增特定的功能，無論使用什麼主題，這些功能都能正常工作，例如建立聯絡表單、最佳化SEO、新增電商購物車等。它決定了網站“能做什麼”。一個好的實踐原則是：與視覺呈現和佈局相關的程式碼放在主題裡，而與核心功能相關的程式碼則應儘量製作成外掛，這樣可以保證在更換主題時，網站的重要功能不會丟失。

下一步，该怎么做呢？

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

延伸阅读与实用知识

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

标签：