WordPress 主題開發完整指南：從零到一構建自訂主題

準備工作同環境搭建

喺開始編寫主題代碼之前，一個穩定同高效嘅本地開發環境係必不可少嘅。咁樣唔單止可以令你快速預覽修改效果，仲可以避免對線上網站造成直接影響。建議使用好似 Local by Flywheel、XAMPP 或者 MAMP 呢啲工具一鍵搭建包含 PHP 同 MySQL 嘅本地伺服器。

跟住落嚟，你需要確定主題嘅目錄結構。一個標準嘅 WordPress 主題通常包含以下核心檔案：style.css（主題樣式表同資訊頭）、index.php（主模板檔案）、functions.php（主題功能檔案）以及header.php、footer.php、sidebar.php等模板部分檔案。你可以喺 WordPress 安裝目錄嘅wp-content/themes/下面開一個新嘅資料夾，例如「my-custom-theme」，然後喺呢個資料夾入面開始整呢啲檔案。

整主題資訊標頭檔案

主題嘅「身份證」係style.css文件。呢個檔案唔單止定義咗主題嘅樣式，佢頂部嘅註解區塊更加係WordPress識別主題嘅關鍵。呢個資訊頭必須嚴格跟返指定格式。

推薦閱讀點樣揀同訂造適合你嘅WordPress主題。

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始构建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

其中，Text Domain用於國際化（i18n），必須同主題資料夾嘅名稱保持一致，呢個係載入翻譯檔案嘅關鍵標識。寫完呢個檔案之後，你嘅主題就已經可以喺WordPress後台嘅「外觀」->「主題」列表度出現，雖然佢依家仲未有任何實際功能。

UltaHost WordPress 主機

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

瀏覽該頁面

構建基礎模板檔案

WordPress採用模板層級系統嚟決定對唔同嘅頁面請求用邊個模板檔案。創建基礎模板係構建主題嘅骨架。

首先係index.php，佢係所有頁面嘅最終後備模板。一個最簡單嘅index.php可以包含對其他模板部分嘅調用。

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 包含文章内容模板
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

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

建立頁頭同頁尾模板

header.php 檔案通常包含文檔類型聲明、區域以及網站頁頭嘅公共部分。務必使用wp_head()函數，呢個鉤子允許插件同主題喺呢度注入必要嘅代碼（如樣式、腳本、元標籤）。

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <!-- 你的导航菜单、Logo等代码在这里 -->
</header>

相應地，footer.php應閂咗header.php中間開咗嘅分頁，同埋一定要叫wp_footer()呢個鈎，好多插件（例如分析代碼）同 WordPress 核心功能都需要用到。

推薦閱讀顶级WordPress主题开发指南：由零开始精通构建同定制。

增強主題功能同自訂

functions.php檔案係你個主題嘅「控制中心」。佢用嚟加主題支援功能、登記選單、側邊欄，同埋排入樣式表同腳本。

添加主題基礎支援

透過add_theme_support()函數，你可以為你嘅主題聲明支援各種 WordPress 功能。例如，啟用文章縮圖（特色圖像）同自訂Logo係現代主題嘅標準配備。

function my_custom_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo功能
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 让WordPress生成和管理文档<title>标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

註冊選單同側邊欄

WordPress 菜單透過register_nav_menus()函數註冊。你可以定義多個菜單位置，例如「主導航」同「頁尾導航」。

hosting.com 共享主機

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

瀏覽該頁面

function my_custom_theme_menus() {
    register_nav_menus(
        array(
            'menu-1' => esc_html__( 'Primary Menu', 'my-custom-theme' ),
            'menu-2' => esc_html__( 'Footer Menu', 'my-custom-theme' ),
        )
    );
}
add_action( 'init', 'my_custom_theme_menus' );

側邊欄（或者叫「小工具區域」）係透過register_sidebar()函數註冊。每個側邊欄都需要一個獨一無二嘅ID同描述。

function my_custom_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( 'Sidebar', 'my-custom-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( 'Add widgets here.', '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' );

樣式、腳本同模板層級

為咗確保主題嘅樣式同腳本正確載入，而且唔會同其他插件撞到，一定要用 WordPress 提供嘅排入隊列函數。

正確排入樣式同腳本

千祈唔好直接喺模板檔案度用或者標籤嚟引入資源。相反，應該用wp_enqueue_style()同埋wp_enqueue_script()函數。

推薦閱讀 WordPress主題開發完整指南：從零到上線嘅實戰教程。

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 排入自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果评论功能开启且是单篇文章/页面，排入评论回复脚本
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

理解同使用模板層級

WordPress 嘅模板層級係一個好強大嘅系統。例如，當訪問一篇博客文章時，WordPress 會跟住以下次序搵模板：single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.php。

你可以創建特定嘅模板檔案去覆蓋預設顯示。例如，創建一個page-about.php檔案，佢會專門用嚟顯示「關於」頁面（前提係頁面嘅別名係「about」）。另一個強大嘅工具係front-page.php，佢用嚟定義網站嘅前端展示頁，優先級高過home.php（網誌文章索引頁）。

InterServer 共享主機

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

瀏覽該頁面

摘要

本指南系統噉介紹咗由零開始構建一個 WordPress 自訂主題嘅核心步驟。由搭建本地環境、創建包含必要資訊頭嘅style.css，到構建index.php、header.php、footer.php等基礎模板檔案，形成咗主題嘅骨架。通過functions.php文件，我哋增強咗主題功能，包括添加主題支援、註冊導航選單同埋側邊欄。最後，我哋強調咗使用 WordPress 標準方法排入樣式同腳本嘅重要性，並解釋咗強大嘅模板層級系統，佢允許開發者為唔同嘅內容類型創建精確嘅顯示模板。跟隨呢啲最佳實踐，唔單止可以創建出結構良好、易於維護嘅主題，重可以確保佢同 WordPress 核心同插件嘅兼容性。

常見問題

### 點樣為我嘅主題添加自訂頁面模板？
創建自訂頁面模板，首先需要喺你嘅主題目錄下創建一個新嘅 PHP 檔案，例如template-fullwidth.php。喺該檔案嘅最頂部，你需要添加一個特定嘅模板名稱註釋。

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板。
 */

跟住，你就可以喺呢個檔案度編寫你嘅全寬頁面佈局代碼，通常以get_header();開頭。保存之後，喺 WordPress 後臺編輯或者創建頁面嗰陣，你就可以喺「頁面屬性」->「模板」下拉框度見到同用到「全寬頁面模板」喇。

點解我嘅自訂選單冇顯示出嚟？

選單冇顯示通常有幾個原因。首先，請確保你已經喺主題嘅functions.php入面，經由register_nav_menus()函數註冊咗菜單位置。

其次，你需要去 WordPress 後台嘅「外觀」->「選單」頁面，開一個新選單，加啲選單項目（例如頁面、文章、自訂連結），然後喺「選單設定」區域下面，將你開嘅呢個選單分配俾你喺主題度註冊嘅菜單位置（例如「主導航」）。

最後，你需要喺模板檔案（通常係header.php）度叫個選單出嚟。用wp_nav_menu()函數並指定正確嘅「theme_location」參數，例如：wp_nav_menu( array( ‘theme_location’ => ‘menu-1’ ) );。只有完成呢三個步驟，菜單先會正確顯示。

點樣可以令我嘅主題支援翻譯（國際化）？

令你嘅主題支援翻譯，亦稱為國際化（i18n），主要分為三個步驟。第一步係「準備」：喺主題中所有需要翻譯嘅文本處，使用 WordPress 提供嘅翻譯函數進行包裹。最常用嘅係esc_html__( ‘文本’, ‘my-custom-theme’ )（輸出轉義後嘅HTML）同埋_e( ‘文本’, ‘my-custom-theme’ )（輸出並轉義）。務必確保第二個參數（文字域）同你喺style.css入面定義Text Domain完全一樣。

第二步係「生成」：用好似 Poedit 呢類工具，掃描你嘅主題 PHP 檔案，生成一個.pot（Portable Object Template）模板檔案。翻譯員可以基於呢個檔案建立對應語言嘅.po同埋編譯好嘅.mo檔案。

第三步係「載入」：喺你嘅functions.php檔案入面嘅after_setup_theme喺鉤子函數入面，用load_theme_textdomain( ‘my-custom-theme’, get_template_directory() . ‘/languages’ )嚟載入翻譯檔案。咁樣，當用戶切換網站語言嗰陣，你嘅主題文字都會跟住轉。

functions.php 檔案出錯會導致咩後果？

functions.php檔案入面嘅語法錯誤或者致命錯誤會令你成個網站出現「白屏死機」（即係顯示空白頁面），同埋可能喺後台見到一條致命錯誤訊息。呢個係因為個檔案喺WordPress初始化嘅早期階段就已經載入，入面嘅錯誤會打斷成個WordPress嘅載入過程。

如果遇到呢種情況，你有幾種方法可以恢復。最直接嘅方法係透過FTP或者主機提供嘅檔案管理器，將出錯嘅functions.php檔案改名（例如改做functions.php.bak）或者將佢嘅內容清空。咁樣 WordPress 就會當佢係一個空檔案，網站就會恢復訪問，但你嘅主題自訂功能會暫時失效。之後，你可以修正程式碼錯誤，再將檔案恢復。所以，喺修改functions.php之前進行備份，同埋喺本地開發環境充分測試，係一個非常好嘅習慣。

下一步應該點做?

如果你正喺建立或優化 WordPress 網站,我哋建議你繼續閱讀有關效能優化、插件設定同主題自訂嘅內容。

延伸閱讀及實用知識

以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。

WordPress主題開發完整指南：從零開始打造自訂主題

準備工作同環境搭建

整主題資訊標頭檔案

構建基礎模板檔案

建立頁頭同頁尾模板

增強主題功能同自訂

添加主題基礎支援

註冊選單同側邊欄

樣式、腳本同模板層級

正確排入樣式同腳本

理解同使用模板層級

摘要

常見問題

點解我嘅自訂選單冇顯示出嚟？

點樣可以令我嘅主題支援翻譯（國際化）？

functions.php 檔案出錯會導致咩後果？

下一步應該點做?

延伸閱讀及實用知識

跨多雲平台全面託管 WordPress 主機

WordPress主題開發完整指南：從零開始打造自訂主題

準備工作同環境搭建

整主題資訊標頭檔案

構建基礎模板檔案

建立頁頭同頁尾模板

增強主題功能同自訂

添加主題基礎支援

註冊選單同側邊欄

樣式、腳本同模板層級

正確排入樣式同腳本

理解同使用模板層級

摘要

常見問題

點解我嘅自訂選單冇顯示出嚟？

點樣可以令我嘅主題支援翻譯（國際化）？

functions.php 檔案出錯會導致咩後果？

下一步應該點做?

延伸閱讀及實用知識

相關推薦

WooCommerce 建站終極指南：從零開始打造你嘅專屬網上商店

深入解析 WooCommerce：從零開始構建功能強大嘅 WordPress 電商網站

揀完美WordPress主題嘅終極指南：由框架到自訂嘅完整解析

WordPress 效能優化全攻略：由核心到前端全方位提速