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

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

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

理解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>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( '<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?>
    <?php wp_footer(); ?>
</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後臺，在“外觀”->“主題”中，應該就能看到你的主題了，儘管它現在功能還非常簡單。

hosting.com 共享主机
高性能配置，搭载 AMD EPYC 处理器、NVMe SSD 存储及 LiteSpeed 技术，提供全天候 24 小时专家内部支持，具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施，节省成本高达 73%。
ホスティング.comのロゴ 访问页面

構建基礎模板文件體系

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

文章與頁面模板

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

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

推荐阅读 詳解WordPress主題開發：從入門到精通的完整指南。

頭部與底部模板

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

header.php文件包含從開始到頁面主要內容區域之前的所有代碼，包括區域、站點標識、主導航菜單等。在index.php、single.php等其他模板中，使用get_header()函數來引入它。

InterServer 共享主机服务
共享主机每月价格为 $2.50 美元，首月优惠价为 $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网站，建议接下来继续阅读关于性能优化、插件配置和主题定制的相关内容。

延伸阅读与实用知识

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

标签：