WordPress主題開發完整指南：從入門到打造自訂主題

準備工作同環境搭建

喺開始寫第一行代碼之前，正確嘅開發環境係成功嘅一半。一個高效嘅本地開發環境可以令你快速測試同迭代，唔使喺線上伺服器進行。

本地開發環境配置

我哋推薦使用本地伺服器軟件包，例如 Local by Flywheel、MAMP 或 XAMPP。呢啲工具一鍵式安裝咗 Apache（或者 Nginx）、MySQL 同埋 PHP，完美模擬線上伺服器環境。安裝好本地環境之後，創建一個新嘅 WordPress 安裝。請確保你嘅 PHP 版本喺 7.4 或以上，並啟用咗必要嘅擴展，例如 mysqli 同埋 gd。

代碼編輯器同工具選擇

揀一個功能強大嘅代碼編輯器至關重要。Visual Studio Code、PhpStorm 或 Sublime Text 都係優秀嘅選擇，佢哋對 PHP、HTML、CSS、JavaScript 同埋 WordPress 函數都有良好嘅語法高亮同代碼提示功能。另外，安裝瀏覽器開發者工具（例如 Chrome DevTools）同版本控制系統（例如 Git）都係現代開發嘅標準配置。

推薦閱讀 WordPress主題開發入門指南：從零開始打造你嘅第一部作品。

理解主題嘅基本結構

一個最簡化嘅 WordPress 主題最少需要兩個檔案：style.css 同埋 index.php。style.css 唔單止提供樣式，佢嘅檔案頭註解仲承載咗主題嘅元資訊。而 index.php 係主題嘅主模板檔案。除此之外，一個功能完善嘅主題通常包含 header.php、footer.php、sidebar.php 同埋用嚟唔同內容類型嘅模板檔案，例如 single.php（單篇文章）同 page.php（獨立頁面）。

UltaHost WordPress 主機

30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%

瀏覽該頁面

核心模板檔案同模板層級

WordPress 用一套精密嘅模板層級系統去決定為特定頁面載入邊個模板檔案。理解呢個層級係創建靈活主題嘅關鍵。

模板文件嘅作用同創建

每個模板文件負責渲染頁面嘅一部分或者特定類型嘅頁面。例如，當訪問一篇博客文章時，WordPress 會按順序搵 single-post-{slug}.php、single-post-{id}.php、single.php、singular.php，最後回退到 index.php。你可以透過創建呢啲文件嚟覆蓋默認嘅顯示方式。首頁嘅查找順序則係 front-page.php、home.php，跟住係 index.php。

理解模版層級關係

模版層級係一條由特殊到一般嘅查找鏈。佢為開發者提供咗極大嘅靈活性。例如，你可以為某個分類（ID 係 5）整一個獨特嘅模版，只需要命名為 category-5.php。WordPress 會優先使用佢，而唔係通用嘅 category.php 或 archive.php。掌握呢個層級，即係你可以精確控制網站每一部分嘅呈現。

常用核心模板文件詳解

等我哋深入了解幾個必備文件。header.php 通常包含文檔類型聲明、 區域同網站嘅開頭部份（例如 Logo 同導航菜單）。喺入面，你會調用 wp_head() 函數，呢個係 WordPress 核心同插件輸出關鍵代碼嘅鉤子。footer.php 就包含網站嘅結尾部份，並調用 wp_footer() 函數。functions.php 檔案雖然唔係模板檔案，但係主題嘅「大腦」，用嚟添加功能、註冊菜單、側邊欄等等。

推薦閱讀 WordPress插件開發完全指南：由零開始到高級進階。

主題功能同函數開發

functions.php 文件係你嘅主題功能中心。喺呢度，你可以透過WordPress提供嘅各種 Hook（掛鉤）嚟擴展或者修改核心功能。

主題初始化與功能添加

在 functions.php 嘅開頭，我哋通常使用 add_action 鉤子來初始化主題功能。一個常見嘅例子係使用 after_setup_theme 鉤子來添加主題支持嘅功能。

function my_custom_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 让 WordPress 管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

註冊小工具區域

側邊欄或者小工具區域係主題常見嘅組成部分。你可以用 register_sidebar 函數嚟定義佢哋。咁樣可以畀用戶喺 WordPress 後台嘅「小工具」界面動態噉添加內容。

hosting.com 共享主機

高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。

瀏覽該頁面

function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-custom-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加主侧边栏小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
 'after_widget'  =&gt; '</section>',
 'before_title'  =&gt; '<h2 class="widget-title">',
 'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );

添加自訂樣式同腳本

為咗保持代碼嘅模組化同性能，應該將 CSS 同 JavaScript 檔案透過 wp_enqueue_style 同埋 wp_enqueue_script 函數排隊加載。千祈唔好直接喺模板檔案度硬連結資源。正確嘅做法係用 wp_enqueue_scripts 鉤子。

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 加载自定义 JavaScript 文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

循環同主題模板標籤

“「循環」係 WordPress 嘅核心概念，佢係一段用喺頁面顯示文章嘅 PHP 程式碼。模板標籤就係 WordPress 提供用喺模板內獲取動態內容嘅 PHP 函數。

理解 WordPress 主循環

循環通常以 if ( have_posts() ) : while ( have_posts() ) : the_post(); 開始。佢會檢查當前查詢有冇文章，然後逐篇逐篇文章去處理。喺循環裏面，你可以用到好似 the_title()、the_content()、the_permalink() 用模板標籤嚟輸出文章資訊。循環結束之後，需要用 endwhile; endif; 嚟閂咗佢。

推薦閱讀 點樣由零開始開發一個自訂嘅WordPress主題：完整指南。

常用模板標籤嘅使用

模板標籤簡化咗數據嘅輸出。例如，the_title() 會直接顯示文章嘅標題，而 get_the_title() 就返個標題字串俾你處理。喺循環外面，你可以用 get_header()、get_footer()、get_sidebar() 等包含對應嘅模板部件。條件標籤例如 is_home()、is_single()、is_page() 令你可以根據當前頁面類型執行唔同嘅代碼。

自訂查詢同循環

有時你需要顯示唔跟主查詢嘅文章列表，例如喺首頁顯示一個特定分類嘅文章集。呢陣可以用 WP_Query 類創建一個自訂查詢。

InterServer 共享主機

共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。

瀏覽該頁面

$custom_query = new WP_Query( array(
    'post_type' => 'post',
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );

if ( $custom_query->have_posts() ) {
    while ( $custom_query->have_posts() ) {
        $custom_query->the_post();
        // 输出文章标题、摘要等
        the_title( '<h3>', '</h3>' );
        the_excerpt();
    }
    wp_reset_postdata(); // 重置全局 $post 数据
}

用完之后，一定要記得調用 wp_reset_postdata() 嚟恢復主查詢數據，避免之後啲程式碼出錯。

摘要

WordPress 主題開發係一個將設計、前端技術同 PHP 編程結合埋一齊嘅過程。由搭建本地環境開始，逐步深入理解主題嘅目錄結構、核心嘅模板層級系統，再到喺 functions.php 入面透過鉤子同函數擴展主題功能，最後掌握循環同模板標籤嚟動態輸出內容，構成咗主題開發嘅基礎路徑。跟返 WordPress 編碼標準同最佳實踐，例如正確排隊腳本樣式、用模板標籤而唔係直接數據庫查詢，可以確保你開發嘅主題高效、安全同容易維護。記住，一個優秀嘅主題唔單止係外觀靚，更加係代碼結構清晰、功能穩定，同埋為用戶同開發者都留返足夠嘅自訂空間。

常見問題

開發WordPress主題需要掌握邊啲編程語言？

開發一個功能完整嘅WordPress主題，你需要掌握HTML、CSS同PHP。HTML用於構建頁面結構，CSS負責樣式同佈局，而PHP係WordPress本身嘅開發語言，用於處理邏輯、調用數據同生成動態內容。此外，了解一啲JavaScript（特別係jQuery，因為佢被包含喺WordPress核心中）對於實現互動功能都非常有幫助。

點樣令我嘅主題支援多語言翻譯？

令主題支援國際化（i18n）係面向全球用戶嘅關鍵。喺主題開發中，所有需要翻譯嘅文本字符串都應該使用WordPress嘅翻譯函數進行包裝，例如 () 用嚟回聲，() 用嚟返迴字串，_e() 用嚟直接回聲。你仲需要喺 load_theme_textdomain() 函數入面設定一個文字域（Text Domain），呢個文字域通常同主題名一致。翻譯人員可以用 .po 同 .mo 檔案嚟為你嘅主題提供唔同語言嘅翻譯包。

子主題同父主題有乜分別，我應該點樣揀？

父主題係一個功能完整、可以獨立運行嘅 WordPress 主題。子主題就依賴父主題，佢繼承父主題所有功能同樣式，但容許你安全咁覆蓋父主題嘅檔案（例如 style.css、模板檔案）或者加新功能。揀用子主題主要係為咗做自訂修改。當父主題更新嗰陣，你對子主題做嘅修改唔會唔見。呢個係定制商業主題或者框架主題（例如 Genesis、Underscores）嘅標準同推薦做法。

喺主題入面引入 CSS 同 JavaScript 嘅最佳方式係咩？

最佳方式係用 WordPress 提供嘅排隊函數：wp_enqueue_style() 用喺 CSS，wp_enqueue_script() 用喺 JavaScript。你需要喺主題嘅 functions.php 檔案入面創建一個函數，並喺入面調用呢啲排隊函數，然後將呢個函數掛載到 wp_enqueue_scripts 呢個動作鈎上。呢種方式確保咗依賴關係被正確處理，避免咗重複加載，而且方便插件或者其他主題進行管理。絕對唔好喺模板檔案直接使用 或 標籤硬編碼引入。