主页/知识/WordPress/内容详情

入门 WordPress 主题开发：从零开始构建你的第一个响应式主题

阅读时间：4分钟
2026-03-13
2026-06-04
2,300
通过下方链接进行购物时，您无需支付额外费用，我就能获得佣金。.

在開始編寫程式碼之前，你需要一個本地開發環境。這通常包括一個本地伺服器（如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 LOGO 访问页面 
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1001>
    <h1>Hello World! This is my first theme.</h1>
    
</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">
    
</head>
<body no numeric noise key 1003>

<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/zh-tw/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>

建立 （注：此处"建立"可能指某个组织、项目或机构的创立过程。）footer.php檔案，包含頁尾內容和結束標籤。

推荐阅读 從零開始，打造您的專屬 WordPress 主題：架構、設計與開發全攻略。

<footer id="colophon" class="site-footer">
    <p>©</p>
</footer>

</body>
</html>

然後，修改你的index.php檔案，使用get_header()以及get_footer()函式來引入這些部分。

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 文章内容将在这里显示
            the_title( '<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?>
</main>

建立文章迴圈與側邊欄

上面的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檔案來註冊這個側邊欄小工具區域。

hostng.com 共享主机
高效能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候 24 小时专业内部支持，先进的安全措施包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 731 TB/月的带宽成本。
hosting.com标志 访问页面

實現響應式佈局與樣式

響應式設計確保你的主題在各種裝置上都能良好顯示。我們將從基本的CSS結構和媒體查詢開始。

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

请将下文翻译成中文，并详细说明翻译思路：\n在你的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>
    
</div>

然後，在CSS中新增對應的樣式。

InterServer 共享主机
虚拟主机的月费为1TB+5TB，价格为2.50美元。首月优惠价为1TB+5TB，价格为0.1美元。优惠码为"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在中文中，我们可以用“使用”来表达“use”的意思。比如：“我使用了这个工具。”或者“他使用了那个方法。”register_nav_menus函式來註冊主題的導航選單位置。

<?php
function my_first_theme_setup() {
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        'footer'  => esc_html__( 'Footer Menu', 'my-first-theme' ),
    ) );

// 注册侧边栏小工具区域
    register_sidebar( array(
        'name'          => esc_html__( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'my-first-theme' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

註冊後，你就可以在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中的迴圈，但通常會在頂部顯示歸檔標題。

<main id="primary" class="site-main">
    <header class="page-header">
        <?php
        the_archive_title( '<h1 class="page-title">', '</h1>' );
        the_archive_description( '<div class="archive-description">', '</div>' );
        ?>
    </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等現代前端工作流整合到你的開發過程中。

常见问题解答（FAQ）

一個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网站，建议你继续阅读关于性能优化、插件配置和主题定制的相关内容。

延伸阅读与实用知识

下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。

标签：