由零開始：理解WordPress主題嘅基本結構

由零開始：理解WordPress主題嘅基本結構

一個標準嘅WordPress主題係一個包含特定文件同目錄嘅文件夾。呢啲文件一齊定義咗網站嘅外觀同功能。最基本嘅主題只需要兩個文件就可以運行，但一個功能完整、符合現代開發標準嘅主題就包含更多內容。

核心檔案係style.css同埋index.php。其中，style.css唔單止係樣式表，更加係主題嘅「身份證」，其文件頭部註釋塊包含咗主題嘅元信息，例如主題名稱、作者、描述、版本號等等。WordPress後台正係透過讀取呢啲信息嚟識別同展示主題嘅。

另一個必需文件係index.php，佢係主題嘅主模板文件。當WordPress搵唔到更具體嘅模板文件（例如single.php或page.php）嗰陣，就會預設用佢嚟渲染頁面。

推薦閱讀 掌握 WordPress 主題開發：從個人化定制到進階功能實現。

除咗呢兩個檔案，一個結構良好嘅主題通常仲包含以下目錄同檔案：
* 模板文件：如用于渲染单篇文章的single.php，用嚟渲染頁面嘅page.php，同用於文章列表嘅archive.php同主頁嘅home.php或front-page.php。
* 模板部件：存放于/template-parts/目錄下，係可重用嘅代碼片段，好似文章摘要（content.php）、頁眉（header.php）同埋頁腳（footer.php）。
* 函数文件：functions.php係主題嘅功能核心。佢用嚟加主題支援嘅功能、登記選單同側邊欄、引入腳本同樣式表，以及定義各種自訂函數。
* 资源目录：通常包括/assets/目錄，下面再有/css/、/js/、/images/等子目錄，用嚟有條理咁存放靜態資源。

UltaHost WordPress 主機

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

瀏覽該頁面

核心模板檔案同模板層級

WordPress 採用一套名為「模板層級」嘅智能系統，嚟決定對於任何一個特定嘅頁面請求，應該使用邊個模板檔案嚟渲染。理解呢套層級規則係主題開發嘅關鍵。

佢嘅工作原理係：當用戶訪問一個URL時，WordPress會先判斷當前係咩類型嘅頁面（例如首頁、單篇文章、分類歸檔頁等），然後按照一個預設嘅優先級列表去搵對應嘅模板檔案。如果搵到最匹配嘅檔案，就用佢；如果搵唔到，就繼續向下搵，直到最終使用兜底嘅index.php。

常用模板檔案解析

以一篇單獨嘅文章頁面為例，WordPress嘅查找順序通常係：single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。呢個意思係你可以為特定嘅文章類型，甚至係某篇具體嘅文章創建專屬模板。

另一個重要嘅檔案係functions.php。佢雖然唔係模板層級嘅一部分，但係為所有模板提供後台支援。你可以在入面使用add_theme_support()函數來聲明主題支援嘅功能，例如文章特色圖片、自訂Logo、文章格式等等。

推薦閱讀 WordPress 網站開發全攻略：由零開始到精通實戰指南。

// 在 functions.php 中添加主题支持
function mytheme_setup() {
    // 支持特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持HTML5的标记格式
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

主題功能與掛鉤系統嘅運用

WordPress嘅靈活性同可擴展性好大程度上歸功於佢嘅「掛鉤」系統。掛鉤分為兩種：動作掛鉤同過濾器掛鉤。動作掛鉤容許你喺特定嘅執行點插入自訂程式碼，而過濾器掛鉤就容許你修改喺過程中傳遞嘅數據。

使用動作鈎子添加功能

動作掛鉤由do_action()函數創建，使用add_action()函數將回調函數掛載到鈎上。喺主題開發度，動作鈎通常用嚟喺特定位置插入內容，或者喺特定時機執行操作。

譬如，wp_enqueue_scripts係一個關鍵嘅動作鈎，用嚟安全咁註冊同排隊樣式表同JavaScript檔案。你應該永遠喺呢度載入前端資源，而唔係直接喺模板檔案度寫或標籤。

hosting.com 共享主機

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

瀏覽該頁面

// 在 functions.php 中正确引入样式和脚本
function mytheme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

使用過濾器鈎修改輸出

過濾器鈎由apply_filters()函數創建，使用add_filter()函數掛載回調函數。例如，你可以修改文章摘要嘅長度，或者幫所有文章標題加個前綴。

// 修改摘要字数长度
function mytheme_excerpt_length( $length ) {
    return 30; // 将摘要字数限制为30字
}
add_filter( 'excerpt_length', 'mytheme_excerpt_length' );

實現響應式設計同自訂功能

現代WordPress主題必須係響應式嘅，要識得自動適應由桌面到手機嘅各種屏幕尺寸。呢個主要靠CSS媒體查詢嚟實現。同時，結合WordPress嘅自訂功能，可以為用戶提供友好嘅後台設定選項。

構建響應式佈局

一種常見嘅做法係採用移動優先嘅CSS策略。首先為移動設備編寫基礎樣式，然後用媒體查詢為愈嚟愈大嘅屏幕添加或覆蓋樣式。

推薦閱讀 構建專業網站：從零開始創建自訂WordPress主題嘅完整指南。

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

整合自訂化工具進行即時預覽

WordPressCustomizer係一個好強大嘅工具，俾網站管理員可以即時預覽同修改主題嘅某啲設定。你可以喺functions.php入面，經由$wp_customize為物件新增設定同控制。

例如，加一個可以修改網站頁尾版權嘅選項：

InterServer 共享主機

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

瀏覽該頁面

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“版权文本”设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field', // 对输入进行净化
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为上述设置添加一个文本框控件
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'mytheme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

然後喺footer.php模板檔案入面，用get_theme_mod()函數輸出呢個值：
echo esc_html( get_theme_mod( 'footer_copyright_text', '默认版权文本' ) );

摘要

WordPress主題開發係一項融合咗PHP、HTML、CSS、JavaScript知識同對WordPress核心架構理解嘅綜合性技能。由理解最基本嘅style.css同埋index.php，到掌握複雜嘅模板層級同掛鉤系統，再到實現響應式設計同Customizer集成，每一步都係構建一個專業、高效、易用主題嘅重要環節。遵循標準嘅文件結構同編碼規範，唔單止可以讓你開發嘅主題更易於維護，亦能確保其同WordPress生態系統同各種插件嘅良好兼容性。記住，優秀嘅主題開發始於對用戶同開發者體驗嘅雙重關注。

常見問題

一個最簡單嘅WordPress主題需要邊啲檔案？

一個可以激活並運行嘅最簡WordPress主題只需要兩個文件：style.css同埋index.php。style.css嘅頭部必須包含正確嘅主題信息註釋塊，index.php則需要包含最基本嘅WordPress循環同HTML結構。

點樣為我嘅主題加返個導航菜單？

首先，你需要喺functions.php入面用register_nav_menus()函數嚟註冊一個或者多個菜單位置。跟住，喺主題模板（通常喺header.php中）你希望菜單顯示嘅位置，用wp_nav_menu()函數嚟調用同顯示已經註冊咗嘅菜單。

乜嘢係子主題，點解要用佢？

子主題係一個依賴於另一個主題（父主題）嘅主題。佢允許你修改、擴展父主題嘅功能同樣式，而唔使直接修改父主題嘅檔案。咁做嘅好處係，當父主題更新時，你嘅個人化修改（喺子主題中）唔會消失，確保咗更新嘅安全性同方便性。

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

讓主題支援多語言（國際化）主要涉及兩個步驟。首先，喺開發時，將所有需要翻譯嘅字串使用__()或_e()等翻譯函數進行包裝。其次，使用好似Poedit呢類工具，從代碼中提取呢啲字串生成.pot檔案，然後為每種語言創建對應嘅.po同埋.mo翻譯檔案。最後，在functions.php中調用load_theme_textdomain()函數嚟載入翻譯。