主页/知识/WordPress/Content Details

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

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

在開始編寫代碼之前，你需要一個本地開發環境。這通常包括一個本地服務器（如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-hk/</?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文件來註冊這個側邊欄小工具區域。

hosting.com 共享主机
高性能配置，搭载 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed 技术，提供全天候 24 小时专业内部支持，具备 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>
    
</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在中文里，我们通常会用“使用”来表达这个意思。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">
        &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等現代前端工作流集成到你的開發過程中。

常见问题解答（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网站，建议接下来继续阅读与性能优化、插件配置和主题定制相关的内容。

延伸阅读与实用知识

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

标签：