主頁/知識/WordPress/內容詳情

WordPress主題開發全攻略：從零開始構建自訂網站

4分鐘閱讀
2026-03-12
2026-06-05
2,848
當你透過以下連結購物,我會獲得佣金,對你嚟講冇額外成本。.

想由零開始構建自己嘅WordPress網站，首先需要理解佢嘅核心——主題。一個主題決定咗網站嘅外觀、佈局、功能同埋用戶體驗。同用現成主題唔同，自主開發帶嚟完全嘅控制權、更高嘅性能同埋獨一無二嘅品牌形象。無論你係前端開發者希望深入了解PHP動態渲染，定係PHP後端開發者希望提升前端技能，掌握主題開發都會為你打開一扇新嘅大門。

準備工作：搭建本地開發環境

喺編寫第一行代碼之前，一個專業嘅本地開發環境可以大大提升效率同體驗。咁樣可以避免喺線上伺服器直接修改帶嚟嘅風險。

本地開發環境配置

首先，我哋需要喺本地電腦上模擬一個網絡伺服器環境。推薦使用軟件包例如 Local（由WP Engine出產）、XAMPP 或 MAMP。呢啲工具一鍵安裝咗Apache、MySQL同埋PHP。以Local為例，佢集成咗WordPress一鍵安裝、SSL證書同電郵擷取功能，對開發者嚟講極之友好。

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

安裝完成之後，開一個新嘅WordPress網站。記得要確保你嘅PHP版本係7.4或者以上，仲要記住數據庫名、用戶名同密碼，之後配置會用到㗎。

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面

代碼編輯同版本控制

工欲善其事，必先利其器。推薦使用功能強大嘅代碼編輯器，例如 Visual Studio Code、PhpStorm 或 Sublime Text。佢哋提供語法高亮、代碼提示、自動完成同強大嘅插件生態。

與此同時，即刻開始使用版本控制系統，首選Git。喺項目嘅根目錄初始化一個Git倉庫，再用.gitignore檔案嚟排除唔需要嘅檔案（例如上傳嘅媒體同緩存），你就可以安全噉管理代碼變更，方便回溯同協作。將倉庫託管到GitHub、GitLab或Bitbucket係業界標準做法。

理解主題嘅文件結構同核心模板

一個標準WordPress主題係一個包含特定文件嘅文件夾。理解每個文件嘅作用係構建主題嘅基礎。

必須包含嘅主題文件

根據WordPress官方要求，一個最基本嘅主題只需要兩個文件：style.css 同埋 index.php。其中，style.css唔單止係樣式表，更係一個主題嘅「身份證」，佢嘅檔案頭部註解包含咗主題嘅元信息。

推薦閱讀 網站建設完整指南：從零到上線的專業流程與核心技術解析。

/*
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
*/

index.php就作為後備模板檔案，當其他更具體嘅模板檔案唔存在嘅時候，佢就會被調用。當然，一個成熟嘅主題遠遠唔止呢兩個檔案。

常用嘅模板檔案同埋佢哋嘅層級

WordPress採用模板層級系統嚟決定為唔同類型嘅內容用邊個PHP模板檔案。呢個係主題開發嘅核心概念。

一個典型嘅模板調用流程如下：
1. 访问单篇文章：优先使用single-post.php，若果冇就用single.php… 最後singular.php。
2. 访问页面：优先使用page-{slug}.php或page-{id}.php，若果冇就用page.php… 最後singular.php。
3. 访问文章归档页：优先使用archive-{post-type}.php，若果冇就用archive.php… 最後index.php。

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

其他關鍵模板包括：header.php（頭部）、footer.php（頁腳）、sidebar.php（側邊欄）、functions.php（功能函數文件）同埋front-page.php（靜態首頁）。理解呢啲檔案點樣透過get_header()， get_footer()等函數組裝埋一齊，係構建頁面嘅關鍵。

從零開始構建主題骨架

而家，等我哋動手創建一個名為「“MyFirstTheme”」嘅主題骨架，實踐出真知。

創建基本模板檔案

喺你嘅WordPress安裝目錄嘅wp-content/themes/喺下面，開一個叫my-first-theme嘅資料夾。然後建立以下檔案：

推薦閱讀 現代網站建設全流程：由架構設計到部署維運嘅核心技術與實踐。

1. style.css：寫入上面嘅標頭資訊。
2. index.php：呢個係最基本嘅模板。

在index.php喺中間，我哋先構建一個最簡單嘅HTML5結構，然後手動引入頭部同埋頁尾。

InterServer 共享主機
共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。
InterServer 標誌 瀏覽該頁面 
<!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>
    <header>
        <h1>我嘅自訂主題</h1>
    </header>
    <main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>
    <footer>
        <p>© 我嘅網站</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

注意wp_head()同埋wp_footer()呢兩個鉤子，佢哋容許插件同主題喺相應位置插入代碼，必須被調用。

將模板拆分為模組化組件

上面嘅代碼將所有嘢寫喺一個檔案入面，好快就會變得難維護。跟住，我哋進行模組化拆分。

創建header.php，將到開頭標籤之前嘅所有代碼搬入去：

<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
<header>
    <h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>">我嘅自訂主題</a></h1>
</header>
<main>

創建footer.php，將關閉標籤之後嘅所有代碼搬入去：

</main>
<footer>
    <p>©  我的网站</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

然後，精簡你嘅index.php檔案：

&lt;?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_title( &#039;<h2>', '</h2>' );
        the_content();
    endwhile;
else :
    _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
endif;
?&gt;

而家，你嘅主題結構變得清晰同易於管理。你可以喺WordPress後台嘅「外觀」->「主題」度睇到同啟用佢。

整合核心功能同自訂選項

一個基本嘅主題骨架完成之後，需要為佢注入生命力，即係透過functions.php文件嚟加入功能同特性。

用functions.php註冊主題支援

functions.php文件係你主題嘅「後台」，用嚟定義函數、註冊特性、加過濾器等等。佢唔係一個模板文件，但係每次頁面載入嗰陣都會自動包含埋。

喺入面，我哋可以用 add_theme_support() 函數嚟聲明主題支援嘅功能。例如，啟用文章特色圖像、自訂Logo同文章格式支援：

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的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,
    ) );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

引入樣式表同腳本嘅正確方式

千祈唔好喺模板檔案度用硬編碼嘅 或 標籤嚟引入靜態資源。正確嘅方式係透過 wp_enqueue_style() 同埋 wp_enqueue_script() 函數。咁樣可以確保依賴管理、版本控制同避免重複加載。

在functions.php入面加：

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

加入導航選單

導航選單係網站嘅骨架。首先，使用 register_nav_menus() 函數註冊菜單位置：

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

跟住，喺header.php的喺區域內，調用呢個菜單：

<?php
wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
        'container'      => 'nav',
        'container_class'=> 'primary-navigation',
    )
);
?>

通過以上步驟，你已經創建咗一個具備基礎結構、功能支援同模組化代碼嘅主題。雖然佢睇落好簡單，但已經包含咗WordPress主題開發嘅所有核心概念。

摘要

從搭建本地環境到編寫第一個模板文件，再到通過functions.php整合核心功能，我哋已經經歷咗一個WordPress主題由零開始嘅全過程。關鍵在於理解模板層級系統，佢會將唔同嘅內容請求對應到PHP模板檔案。同時，模組化思維（拆開header.php， footer.php等等）同埋規範化嘅開發實踐（正確註冊腳本、使用掛鈎函數）係構建可維護、穩健主題嘅基礎。以呢個為起點，你可以繼續深入探索自訂文章查詢、建立小部件區域、整合Customizer API以及開發自訂模板等高級主題，從而構建出更加強大、專業嘅網站。

常見問題

如何為主題添加側邊欄？

在WordPress中，側邊欄被稱為「小部件區域」。首先，喺functions.php入面用 register_sidebar() 函數註冊一個或多個小部件區域。

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小部件以显示在主侧边栏。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
 'after_widget'  =&gt; '</section>',
 'before_title'  =&gt; '<h3 class="widget-title">',
 'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

跟住，喺你想顯示側邊欄嘅模板檔案（例如single.php或page.php）入面，調用 dynamic_sidebar() 函數嚟輸出佢。

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

子主題係一個繼承另一個主題（叫做父主題）所有功能同樣式嘅主題。佢嘅核心檔案係style.css，其中必須要通過Template:喺頭部欄位聲明佢嘅父主題。

用子主題最大嘅好處係安全同可持續。當父主題更新嗰陣，你對子主題做嘅自訂修改（樣式覆蓋、功能增強、模板修改）都唔會被覆蓋。呢個係對現有主題進行個人化定制嘅標準同推薦方式。

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

functions.php檔案入面嘅語法錯誤或者致命錯誤會導致成個網站出現「白屏死機」（即係顯示一個空白頁面）。呢個係因為呢個檔案喺WordPress核心加載過程中被包含，任何錯誤都可能中斷初始化流程。

遇到呢種情況，你需要透過FTP或者主機檔案管理器，將出錯嘅functions.php檔案改名（例如改做functions.php.bak），咁樣網站就會暫時忽略嗰個檔案同恢復訪問，等你可以修正錯誤。

點樣建立自訂頁面模板？

自訂頁面模板可以畀特定頁面有獨特嘅版面設計。首先，喺你嘅主題目錄度建立一個新嘅PHP檔案，喺檔案嘅頂部加一段特定格式嘅註解，聲明呢個係一個頁面模板。

例如，創建一個名為page-fullwidth.php嘅文件：

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */
get_header(); ?>
<!-- 你的全宽页面内容结构 -->
<?php get_footer(); ?>

保存之後，當你建立或編輯一個頁面時，喺「頁面屬性」->「模板」下拉選單入面，就可以揀「全寬頁面」呢個模板。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: