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

WordPress 主题开发入门指南：从零开始搭建你的首个主题

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

准备工作与环境搭建

在開始編寫程式碼之前，你需要一個合適的開發環境。這包括一個本地伺服器環境（如XAMPP、MAMP或Local by Flywheel），一個程式碼編輯器（如VS Code或PhpStorm），以及一個全新的WordPress安裝。確保你的WordPress是最新版本，以便使用最新的功能和API。

接下來，你需要在WordPress的wp-content/themes目錄下建立一個新的資料夾，這個資料夾的名稱就是你主題的“slug”，例如my-first-theme。這個資料夾將成為你所有主題檔案的安身之所。一個WordPress主題最基礎的檔案只有兩個：index.php以及style.css其中,style.css不僅是樣式表，更是一個包含主題元資料的“標頭檔案”，它的註釋資訊對於WordPress識別你的主題至關重要。

建立一個基本的style.css檔案，其頭部註釋應包含以下資訊：

推荐阅读 打造完美的 WordPress 主题：从零到精通的完整开发指南。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text Domain用於國際化，應與你的主題資料夾名稱保持一致。同時，建立一個最簡單的index.php檔案，只需包含一句<?php get_header(); ?>和一个人在一起<h1>您好！</h1>。此時，在WordPress後臺的“外觀”->“主題”中，你應該能看到你的主題並可以啟用它。雖然它現在什麼也顯示不了（因為我們還沒有建立header.php），但這標誌著你已經成功邁出了第一步。

UltaHost WordPress 主機
30天退款保證，無限頻寬與資料庫，免費的 DDoS 防護，購買3年優惠50%
UltaHost LOGO 访问页面

理解核心模板檔案與模板層級

WordPress使用一種稱為“模板層級”的智慧系統來決定對於特定的頁面請求，應該使用哪個模板檔案來呈現內容。理解這個層級是主題開發的核心。系統會從最具體的模板檔案開始尋找，如果不存在，則回退到更通用的檔案。

最基本的模板檔案包括：
* index.php：最終的兜底模板，所有請求如果找不到更具體的模板，都會用它。
* header.php：包含文件的<head>部分和網站的頁頭區域。透過get_header()函数引入。
* footer.php：包含網站的頁尾區域。透過get_footer()函数引入。
* sidebar.php：包含側邊欄元件。透過get_sidebar()函数引入。
* functions.php：這不是一個模板檔案，而是你主題的“功能庫”，用於新增功能、註冊選單、小工具等。

對於不同型別的頁面，有更具體的模板：
* 單篇文章：查詢順序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 靜態頁面：查詢順序是custom-template.php（自定義模板）-> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（部落格首頁、分類頁等）：查詢順序是home.php（用於部落格文章列表頁）-> front-page.php（用於將靜態頁面設定為首頁時的“首頁”）-> index.php。

構建頁頭與頁尾模板

首先建立header.php。它必須以<!DOCTYPE html>開始，幷包含關鍵的WordPress函式呼叫，如wp_head()。

推荐阅读 定制高级 WordPress 主题：从设计、开发到优化，实战全攻略。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/zh-tw/</?php echo esc_url(home_url('/')); ?>"></a></h1>
        <p></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

同样，建立一个......也需要考虑到诸多因素，比如市场需求、技术可行性、资金投入等等。footer.php，並確保呼叫wp_footer()函数。

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    
</body>
</html>

現在，你可以更新你的index.php，使用這些模板部件。

<main>
    <h1>Hello World from Main!</h1>
    &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>

透過 functions.php 增強主題功能

functions.php檔案是你的主題的“大腦”。你在這裡新增功能、註冊WordPress核心元件如選單和小工具區域，以及排入樣式表和指令碼檔案。

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

新增主題支援與註冊導航選單

首先，讓我們啟用一些基本的主題功能。使用add_theme_support()函式來宣告主題支援的功能。

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

接下來，註冊一個導航選單位置。這允許使用者在後臺“外觀”->“選單”中配置選單，並在模板中使用wp_nav_menu()函式呼叫它。

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

排入樣式表與指令碼

正確的樣式和指令碼載入方式是透過wp_enqueue_style()以及wp_enqueue_script()函数，并将它们挂载到wp_enqueue_scripts鉤子上。

推荐阅读 全面解析WordPress主题开发：从入门到精通的实践指南。

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-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

建立迴圈與內容模板

“迴圈”是WordPress中用於從資料庫中檢索並顯示文章的PHP程式碼結構。它是幾乎所有模板檔案的心臟。

理解主迴圈的結構

在上面的index.php示例中，我們已經看到了一個基礎迴圈。讓我們分解它：

InterServer 共享主机
虚拟主机的月费为1TB+5TB，价格为2.50美元。首月优惠价为1TB+5TB，价格为0.1美元。优惠码为"tryinterserver"。平台提供461个云应用脚本，一键安装便捷。
InterServer 标志 访问页面 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/zh-tw/</?php the_permalink(); ?>"></a></h2>
            
            <div class="entry-content">
                
            </div>
        </article>
    
    <!-- 分页链接 -->
    

    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>

構建單篇文章模板

現在，讓我們建立一個專門用於顯示單篇文章的模板single.php。它比列表頁的迴圈更詳細。

<main id="primary">
    
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1></h1>
                <div class="entry-meta">
                    
                </div>
                
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
                <?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' => '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  => '</div>',
                ));
                ?>
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        <?php
        // 输出评论模板
        if (comments_open() || get_comments_number()) :
            comments_template();
        endif;
        ?>
    <?php endwhile; ?>
</main>

总结

透過本篇指南，你已經完成了從零開始構建一個基礎WordPress主題的核心旅程。我們從建立開發環境和建立基礎檔案開始，逐步深入到理解WordPress的模板層級系統，這是構建靈活主題的基石。你學會了如何構建可重用的header.php以及footer.php模板部件，並透過強大的functions.php檔案為你的主題添加了關鍵功能支援，如導航選單和樣式載入。最後，我們探索了WordPress的“迴圈”機制，並建立了用於顯示文章列表和單篇文章的模板。

這只是一個起點。接下來，你可以探索建立更多特定模板（如page.php, archive.php），註冊小工具區域，新增自定義文章型別和分類法，以及實現更高階的響應式設計和JavaScript互動。記住，參考官方開發者文件和不斷實踐是提升技能的最佳途徑。

常见问题解答（FAQ）

我的主題啟用後，網站顯示一片空白（白屏）怎麼辦？

這通常是由PHP致命錯誤引起的。請首先檢查你的functions.php檔案中是否有語法錯誤，比如缺少分號或括號。開啟WordPress的WP_DEBUG模式可以幫助你看到具體的錯誤資訊。在wp-config.php文件中，将define('WP_DEBUG', false);改为define('WP_DEBUG', true);。

如何為我的主題新增自定義Logo功能？

请将下文翻译成中文，并详细说明翻译思路：\n在你的functions.php文件的add_theme_support部分，新增一行：add_theme_support('custom-logo');。你還可以傳遞一個數組引數來定義Logo的大小和是否靈活高度等。之後，使用者可以在“外觀”->“自定義”->“站點身份”中上傳Logo，並在模板中使用the_custom_logo();函式呼叫它。

為什麼我註冊的導航選單在後臺不顯示？

請檢查以下幾點：第一，確保你的註冊程式碼在functions.php中，並且已經正確掛載到init鉤子或after_setup_theme鉤子上。第二，確保你定義的theme_location例如，'primary'）在呼叫wp_nav_menu()時與之完全匹配。第三，選單建立後，需要在後臺“外觀”->“選單”->“管理位置”選項卡中將某個選單分配給你註冊的位置。

如何建立一個小工具區域（側邊欄）？

首先，在functions.php请将下文翻译成中文，并详细说明翻译过程：register_sidebar()函式註冊一個小工具區域。你需要提供一個數組引數來定義其ID、名稱、描述等。然後，在你希望顯示側邊欄的模板檔案（如sidebar.php在该段落中，使用了dynamic_sidebar()函式並傳入小工具的ID來呼叫它。最後，在index.php或者single.php等模板中，使用<?php get_sidebar(); ?>引入側邊欄模板。

下一步，该怎么做呢？

如果你正在搭建或优化WordPress网站，建议你继续阅读关于性能优化、插件配置和主题定制的相关内容。

延伸阅读与实用知识

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

标签：