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

WordPress 主題開發入門指南：由新手到精通嘅完整教程

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

WordPress主題係網站外觀同功能嘅核心。開發自己嘅主題唔單止可以實現完全客製化嘅設計，仲可以令你深入瞭解WordPress嘅運作原理，提升開發技能。呢個指南會帶你由零開始，逐步建立一個符合WordPress標準嘅基礎主題。

開發環境與基礎結構搭建

喺開始編寫程式碼之前，你需要一個合適嘅本地開發環境。可以用XAMPP、MAMP或者桌面應用程式好似Local by Flywheel。確保環境入面安裝咗PHP、MySQL同Apache/Nginx。

建立主題目錄同核心檔案

一個最基本嘅WordPress主題只需要兩個檔案。首先，喺你嘅WordPress安裝目錄下嘅wp-content/themes資料夾入面，建立一個新嘅資料夾，例如my-first-theme。

推薦閱讀 WordPress主題開發指南：由零開始打造個人化網站。

喺呢個資料夾入面，創建第一個核心檔案：style.css。呢個檔案唔單止係樣式表，仲包含咗主題嘅元資訊。檔案頭部必須有一段格式正確嘅註解。

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
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搵唔到更特定嘅模板嗰陣，就會用到佢。最初，佢可以好簡單。

<!DOCTYPE html>
<html no numeric noise key 1010>
<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 1007>
    <header>
        <h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

而家，你嘅主題已經可以喺WordPress後台嘅「外觀」->「主題」列表度出現同啟用。

核心模板檔案同模板層級

WordPress用一套叫「模板層級」嘅規則來決定特定頁面用邊個模板文件。理解呢個層級係主題開發嘅關鍵。

文章同頁面範本

當訪問一篇單獨嘅文章嗰陣，WordPress會優先搵single.php。如果唔存在，就退返去index.php。你可以建立single.php來定制文章單頁嘅顯示。

推薦閱讀 WordPress主題開發入門指南：從零開始打造你嘅專屬網站主題。

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <div class="entry-meta">
            发布于： | 作者：
        </div>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
    <footer class="entry-footer">
        &lt;?php the_tags( &#039;标签：&#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
    </footer>
</article>

對於獨立頁面，WordPress會搵page.php。你仲可以為特定頁面ID或者頁面別名整模板，例如page-about.php會專用喺「關於」呢個頁面。

歸檔與首頁模板

網誌文章清單頁面（好似分類、標籤、作者歸檔）用archive.php。你可以用is_category()、is_tag()等條件標籤喺內部區分。

網站嘅首頁預設由index.php控制。但係你可以建立front-page.php去定義一個靜態首頁，或者建立home.php用嚟定義顯示最新文章嘅博客首頁。

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

主題功能同掛鈎機制

WordPress嘅靈活性同擴展性好大程度上係靠佢嘅掛鉤（Hooks）系統，包括動作（Action）同過濾器（Filter）。主題透過functions.php檔案嚟利用呢個系統。

主題初始化同功能支援

functions.php檔案用嚟加主題功能、登記菜單、側邊欄等等。首先，通常會用after_setup_theme呢個動作鉤子用嚟初始化個主題嘅基本功能。

<?php
function my_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

註冊小工具區域

好似側邊欄或者頁腳呢啲小工具區域（Widget Area）都需要喺functions.php度註冊。用widgets_init鉤子。

推薦閱讀 WordPress主題開發完整指南：從入門到精通實戰教程。

function my_theme_widgets_init() {
    register_sidebar( array(
 'name' =&gt; __( 'Main sidebar', 'my-first-theme' ),
 'id' =&gt; 'sidebar-1',
 'description'   =&gt; __( 'Add widgets here.', 'my-first-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_theme_widgets_init' );

註冊之後，你就可以喺模板文件（如sidebar.php）入面用dynamic_sidebar( 'sidebar-1' )嚟調用呢個區域啦。

模板部件同循環優化

為咗保持代碼整潔同可以重用，WordPress鼓勵將重複嘅模板部分（例如頁頭、頁腳、側邊欄）拆開做獨立檔案。

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

拆開模板部件

創建header.php、footer.php同埋sidebar.php文件。將index.php將相應嘅代碼段搬過去。然後，喺原本嘅位置用get_header()、get_footer()同埋get_sidebar()函數去包含佢哋。

文章循環嘅進階處理

基礎嘅循環使用while ( have_posts() ) : the_post(); ... endwhile;。但係喺歸檔頁面，你通常需要顯示文章摘要而唔係全文。呢個時候可以用the_excerpt()函數。

為咗更好咁控制循環，特別係自訂查詢，你需要了解WP_Query類。例如，喺首頁只顯示某個分類下嘅文章：

<?php
$custom_query = new WP_Query( array(
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 显示文章内容
    endwhile;
    wp_reset_postdata(); // 重置主查询数据
endif;
?>

記住，喺進行自訂查詢之後，使用wp_reset_postdata()嚟恢復全域嘅$post變數好重要，否則可能會影響後續嘅模板部件（例如側邊欄）嘅正常顯示。

摘要

從創建style.css同埋index.php開始，到理解模板層級、利用functions.php添加功能，再到拆分模板部件同優化循環，你已經完成咗一個基礎但完整嘅WordPress主題開發流程。核心在於遵循WordPress嘅標準同約定，咁樣可以確保你嘅主題兼容性好同易於維護。下一步，你可以試吓為文章添加更豐富嘅元信息、集成自訂文章類型、或者用Sass等預處理器嚟管理樣式，令你嘅主題更加專業同強大。

常見問題

開發WordPress主題一定要識PHP嗎

係呀，PHP係WordPress嘅核心編程語言。主題嘅模板檔案（.php檔案）主要用PHP嚟動態生成HTML內容、調用WordPress函數同處理數據。就算用頁面構建器，理解PHP對於深度自訂同解決問題都係必不可少嘅。

主題嘅functions.php文件有咩作用

functions.php係你主題嘅「功能中心」。佢用嚟啟用主題功能（例如菜單、縮略圖）、註冊小工具區域同導航菜單、對腳本同樣式進行排隊加載、定義自訂函數，同埋透過掛鉤（Actions同Filters）修改WordPress嘅默認行為。佢會喺主題初始化時自動加載。

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

你需要做好兩件事。首先，喺所有需要翻譯嘅字串周圍用WordPress嘅翻譯函數，例如__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )，並喺style.css同埋functions.php中正確設定Text Domain。其次，用Poedit呢類工具創建.pot模板文件，並生成對應嘅.mo語言文件，擺喺主題嘅/languages目錄下。

主題開發中點樣正確引入CSS同JavaScript文件

千祈唔好喺模板文件度直接用或標籤引入。正確嘅方法係用wp_enqueue_style()同埋wp_enqueue_script()函數，然後將呢啲呼叫掛載到wp_enqueue_scripts呢個動作掛喺個鉤上面。咁樣可以確保依賴關係正確、避免重複載入，而且同WordPress嘅腳本管理系統兼容。

php
function my_theme_scripts() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . 'https://www.likacloud.com/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: