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

WordPress 主題開發入門：從零開始構建你嘅第一個響應式主題

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

喺開始寫代碼之前，你需要一個本地開發環境。通常包括一個本地伺服器（例如XAMPP、MAMP或者Local by Flywheel）、PHP、MySQL數據庫同一個代碼編輯器（例如VS Code、Sublime Text）。要確保你嘅PHP版本符合WordPress官方要求。

跟住，喺你WordPress安裝目錄下嘅wp-content/themes文件夾入面，開一個新嘅文件夾，例如my-first-theme。呢個文件夾會存放你主題嘅所有檔案。

一個最基本嘅WordPress主題只需要兩個檔案：style.css同埋index.php。首先，建立style.css檔案，並喺檔案頭部加入主題資訊註釋，呢個係WordPress識別主題所必需嘅。

推薦閱讀 自訂WordPress主題：從零開始打造專屬網站外觀嘅完整指南。

/*
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檔案，暫時淨係包含一個HTML骨架同一句「Hello World」。

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面 
<!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>
    <h1>哈囉世界！呢個係我第一個主題。.</h1>
    <?php wp_footer(); ?>
</body>
</html>

而家，登入你嘅WordPress後台，喺「外觀」->「佈景主題」度，你應該會見到「My First Theme」出現而且可以啟用佢。雖然佢而家功能簡單，但係你已經成功整咗一個可以被WordPress識別到嘅佈景主題。

構建主題嘅核心模板檔案

一個完整嘅佈景主題由一系列模板檔案組成，佢哋控制住網站唔同部分嘅顯示。等我哋由最重要嘅幾個檔案開始整起。

分開頁眉同頁腳

將重複嘅代碼（例如頭部同底部）分開到獨立檔案係首要步驟。建立header.php檔案，包含從<!DOCTYPE html>到開頭<body>標籤之前嘅所有內容。

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1003>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

創建footer.php檔案，包含頁腳內容同結束標籤。

推薦閱讀 從零開始，打造你嘅專屬 WordPress 主題：架構、設計同開發全攻略。

<footer id="colophon" class="site-footer">
    <p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

然後，修改你嘅index.php檔案，使用get_header()同埋get_footer()函數嚟引入呢啲部分。

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 文章内容输出
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

建立文章循環同側邊欄

上面嘅index.php已經包含咗基本嘅WordPress主循環（The Loop），用嚟檢索同顯示文章列表。跟住建立sidebar.php嚟加個側邊欄。

<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

為咗喺頁面度引入側欄，你需要喺index.php嘅主內容區域前後調整結構，同埋用get_sidebar()函數。同時，要整一個functions.php檔案嚟註冊呢個側欄小工具區域。

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

實現響應式佈局同樣式

響應式設計確保你嘅主題喺各種裝置上都能夠良好顯示。我哋會從基本嘅CSS結構同媒體查詢開始。

設定基礎樣式同彈性盒模型

喺你嘅style.css主題信息註釋下方，添加重置樣式同基礎佈局。用Flexbox嚟創建簡單嘅響應式佈局係一個好開始。

/* 基础重置与样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}
/* 主要布局容器 */
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main {
    flex: 1;
    padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
    background-color: #f8f9fa;
    padding: 1rem 2rem;
    text-align: center;
}

添加媒體查詢

媒體查詢係響應式設計嘅核心。我哋加一個簡單嘅斷點，當屏幕闊度細過768px（典型平板設備以下）嗰陣，將內容區域同側邊欄嘅佈局由並排改為堆疊。

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

首先，修改HTML結構，喺index.php入面用一個容器包住主要內容同側邊欄。

<div class="content-area">
    <main id="primary" class="site-main">
        <!-- 主循环内容 -->
    </main>
    <?php get_sidebar(); ?>
</div>

然後，喺CSS度加返相應嘅樣式。

InterServer 共享主機
共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。
InterServer 標誌 瀏覽該頁面 
.content-area {
    display: flex;
    flex-wrap: wrap;
}
.site-main {
    flex: 3;
    min-width: 300px;
}
#secondary {
    flex: 1;
    min-width: 250px;
    padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
    .content-area {
        flex-direction: column;
    }
    #secondary {
        padding-left: 0;
        padding-top: 2rem;
    }
    .site-header, .site-footer, .site-main {
        padding: 1rem;
    }
}

透過 functions.php 增強主題功能

functions.php文件係你主題嘅「引擎室」，用嚟加功能、登記特性同安全咁引入腳本同樣式。

登記導航選單同小工具區域

在functions.php入面，用register_nav_menus用嚟登記主題嘅導航選單位置嘅函數。

esc_html__( 'Primary Menu', 'my-first-theme' ),
        'footer'  =&gt; esc_html__( 'Footer Menu', 'my-first-theme' ),
    ) );

// 注册侧边栏小工具区域
    register_sidebar( array(
        'name'          =&gt; esc_html__( 'Main Sidebar', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( 'Add widgets here.', '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( 'after_setup_theme', 'my_first_theme_setup' );
?&gt;

登記咗之後，你就可以喺header.php同埋footer.php入面用wp_nav_menu()用函數嚟調用呢啲菜單啦。

安全加載樣式同腳本

千祈唔好直接喺模板檔案入面硬連結CSS或者JavaScript檔案。應該用wp_enqueue_style()同埋wp_enqueue_script()函數，同埋透過wp_enqueue_scripts用鈎子嚟載入佢哋。

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' );

整多啲模板檔案嚟豐富功能

暫時我哋個主題得一個index.php，佢會用喺所有頁面。WordPress模板層級決定咗佢會為唔同類型嘅頁面搵更特定嘅模板。等我哋整啲啦。

單篇文章同頁面模板

創建single.php用嚟顯示單篇文章。

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        get_template_part( 'template-parts/content', 'single' );
        // 显示文章导航
        the_post_navigation();
        // 如果评论开启，则加载评论模板
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
    ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

創建page.php用嚟顯示靜態頁面。佢嘅結構同single.php類似，但通常唔會顯示分類、標籤呢啲元信息。

為咗跟從DRY（Don‘t Repeat Yourself）原則，我哋可以將文章同頁面嘅內容顯示部分抽取出嚟，放喺模板部件（Template Part）度。喺主題根目錄度開個template-parts文件夾，跟住喺入面整返個content-single.php同埋content-page.php。

文章歸檔頁面模板

創建archive.php用嚟顯示分類、標籤、作者等等嘅歸檔頁面。佢可以重用返index.php入面嘅循環，但通常會喺頂部顯示歸檔標題。

<?php get_header(); ?>
<main id="primary" class="site-main">
    <header class="page-header">
        &lt;?php
        the_archive_title( &#039;<h1 class="page-title">', '</h1>' );
        the_archive_description( '<div class="archive-description">', '</div>' );
        ?&gt;
    </header>
    <?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>

摘要

透過呢個指南，你完成咗一個基礎但完整嘅響應式WordPress主題嘅搭建。你了解咗主題嘅基本檔案結構，學識咗分離模板部件（頁眉、頁腳、側邊欄），實現咗核心嘅WordPress循環，並用CSS媒體查詢構建咗響應式佈局。另外，你掌握咗透過functions.php檔案嚟註冊菜單、小工具同安全加載資源嘅方法，並開始接觸WordPress強大嘅模板層級系統。

主題開發係一個不斷深入嘅過程。跟住落嚟，你可以探索更多模板檔案（例如404.php、search.php），学习使用WordPress的Body Class和Post Class来增加样式控制的精细度，深入研究主题定制器（Customizer）API为用户提供可视化设置选项，甚至尝试将Sass或ES6等现代前端工作流集成到你的开发过程中。

常見問題

一個WordPress主題最少需要啲咩檔案？

一個能夠俾WordPress識別嘅最簡主題只需要兩個檔案：style.css同埋index.php。style.css嘅頭部必須包含正確嘅主題資訊註釋，而index.php咁就作為所有頁面嘅預設模板。

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

你需要做好兩件事。首先，喺style.css嘅頭部註釋同所有使用文字嘅地方（例如透過__()或_e()函數）使用文本域（Text Domain）。本指南中我哋用嘅文本域係「my-first-theme」。其次，用好似Poedit噉嘅工具創建.pot檔案，並翻譯成.po同.mo檔案，將佢哋放喺主題嘅/languages目錄下。最後，喺functions.php入面用load_theme_textdomain()函數加載翻譯。

點解我嘅自訂樣式或者腳本冇生效？

呢個通常係因為冇用WordPress推薦嘅方式排隊加載。請確保你係喺functions.php檔案入面，使用wp_enqueue_style()同埋wp_enqueue_script()功能,並將佢哋安裝到wp_enqueue_scripts鉤子上嚟加樣式同腳本。直接寫喺模板檔案入面嘅連結可能會俾快取插件忽略，或者喺某啲情況下加載次序唔啱。

點樣為我嘅主題加自訂Logo支援？

呢個係一個好常見嘅功能。你需要喺functions.php喺文件嘅主題設定函數入面（透過after_setup_theme鉤子執行），加入add_theme_support( 'custom-logo' )。你可以傳入參數陣列嚟定義Logo嘅尺寸等屬性。加入之後，用戶就可以喺「外觀」->「自訂」->「網站身份」中上傳Logo。喺前端，你可以用the_custom_logo()函數嚟顯示佢。

開發過程中點樣調試PHP錯誤？

建議喺本地開發環境嘅wp-config.php文件入面開啟WordPress調試模式。將WP_DEBUG常數設定為true。你仲可以同時設定WP_DEBUG_LOG同埋WP_DEBUG_DISPLAY嚟控制錯誤係記錄到日誌檔定係顯示喺屏幕上。記住，喺將主題上線之前，務必閂咗調試模式。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: