主页/知识/ワードプレス/内容详情

WordPress主題開發入門指南：從小白到精通的完整教程

3 分钟阅读时间
2026-03-18
2026-06-04
2,439
當您透過下方連結購物時，我會獲得佣金，而您無需支付額外费用。.

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 LOGO 访问页面 
/*
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">
    
</head>
<body no numeric noise key 1007>
    <header>
        <h1><a href="/zh-hant/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
        <p></p>
    </header>
    <main>
        
    </main>
    <footer>
        <p>©</p>
    </footer>
    
</body>
</html>

現在，你的主題已經可以出現在WordPress後臺的“外觀”->“主題”列表中並啓用了。

核心模板文件與模板層級

WordPress使用一套名爲“模板層級”的規則來決定爲特定頁面使用哪個模板文件。理解這個層級是主題開發的關鍵。

文章與頁面模板

當訪問一篇單獨的文章時，WordPress會優先尋找single.php。如果不存在，則回退到index.php。你可以創建single.php來定製文章單頁的顯示。

推荐阅读 WordPress 主题开发入门指南：从零开始打造属于你自己的网站主题。

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        <h1 class="entry-title"></h1>
        <div class="entry-meta">
            发布于： | 作者：
        </div>
    </header>
    <div class="entry-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 技术，提供全天候 24 小时专家内部支持，具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施，节省成本高达 73%。
ホスティング.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; __( '主侧边栏', '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; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

註冊後，你就可以在模板文件（如sidebar.php）中使用dynamic_sidebar( 'sidebar-1' )來調用這個區域了。

模板部件與循環優化

爲了保持代碼的整潔和可重用性，WordPress鼓勵將重複的模板部分（如頁頭、頁腳、側邊欄）拆分成獨立的文件。

InterServer 共享主机服务
共享主机每月价格为 $2.50 美元，首月优惠价为 $0.1 美元，优惠码为 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等預處理器來管理樣式，讓你的主題更加專業和強大。

常见问题解答（FAQ）

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

延伸阅读与实用知识

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

标签：