WordPress主題開發入門：從零到一構建你的第一個主題

准备工作与环境搭建

在開始編寫任何程式碼之前，你需要一個合適的開發環境。這包括一個本地伺服器環境（例如XAMPP、Local by Flywheel或MAMP）以及一個程式碼編輯器（如VS Code、Sublime Text或PHPStorm）。確保你的本地環境已安裝好PHP、MySQL和Apache/Nginx。

接下來，你需要在本地伺服器的wp-content/themes/目錄下建立一個新的資料夾。這個資料夾的名稱就是你的主題名，例如my-first-theme。這是你所有主題檔案的“家”。

一個最基礎的WordPress主題只需要兩個檔案：style.css以及index.php其中,style.css不僅是樣式表，更是一個主題的“身份證”，它頂部的註釋塊包含了主題的元資訊。讓我們先建立這個檔案。

推荐阅读零基础学习WordPress主题开发：打造个性化网站的完整指南。

建立主題資訊標頭檔案

style.css檔案頂部的註釋塊是WordPress識別一個主題的關鍵。請在你的主題資料夾中建立style.css，並寫入以下內容：

UltaHost WordPress 主機

30天退款保證，無限頻寬與資料庫，免費的 DDoS 防護，購買3年優惠50%

访问页面

/*
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
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

這些資訊會顯示在WordPress後臺的“外觀”->“主題”頁面中。Text Domain用於國際化，是後續載入翻譯檔案的關鍵識別符號。

建立基礎索引模板

接下來，建立主題的核心檔案index.php。即使這個檔案暫時只有一行程式碼，它也能讓WordPress識別並激活你的主題。

<h1>Hello, WordPress Theme World!</h1>

get_header()以及get_footer()是WordPress的模板函式，它們會嘗試載入名為header.php以及footer.php的檔案。雖然我們還沒建立它們，但先這樣寫是標準的做法。現在，你可以進入WordPress後臺，在“外觀”->“主題”中找到並激活“My First Theme”了。重新整理網站首頁，你將看到“Hello, WordPress Theme World!”這句話。

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

WordPress使用一套稱為“模板層級”的規則來決定針對不同的頁面請求（如首頁、文章頁、分類頁）該使用哪個模板檔案來呈現內容。理解這個機制是高效開發主題的基礎。

推荐阅读入门级WordPress主题开发指南：逐步创建你的第一个自定义主题。

最通用的模板是index.php，它是所有頁面的最終備選。但為了更精細地控制不同頁面的外觀，我們應該建立更具體的模板檔案。首先，我們來建立三個最基礎且重要的檔案：header.php、footer.php以及functions.php。

構建網站頭部模板

header.php檔案通常包含HTML文件的頭部（<head>）和網站頂部的公共區域，如Logo和導航選單。建立一個header.php檔案：

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

這裡有幾個關鍵函式：wp_head()鉤子允許WordPress核心、外掛和主題自己向<head>區域插入必要的程式碼（如樣式錶鏈接）；body_class()會輸出一系列CSS類名，方便你根據不同的頁面進行樣式控制；wp_nav_menu()用於顯示一個導航選單。

hostng.com 共享主机

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

访问页面

構建網站底部模板

footer.php檔案通常包含網站的公共底部區域，如版權資訊，並關閉在header.php中開啟的標籤。建立footer.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>©  . All rights reserved.</p>
        </div>
    </footer>
    
</body>
</html>

wp_footer()与wp_head()類似，是一個重要的鉤子，用於在</body>標籤前插入指令碼或程式碼。

現在，回到你的index.php，將其更新為使用我們新建的頭部和底部檔案：

推荐阅读怎样选择和定制适合SEO优化的WordPress主题？。

<article>
        <h2></h2>
        <div></div>
    </article>

    <p></p>

這段程式碼構成了WordPress主題的核心迴圈（The Loop），它會檢查當前頁面是否有文章，然後迴圈輸出每篇文章的標題和內容。

透過函式檔案增強主題功能

functions.php是你的主題的“控制中心”。它不是一個模板檔案，而是一個在主題初始化時自動載入的PHP檔案。你可以在這裡新增主題支援功能、註冊選單位置、排隊樣式表和指令碼等。建立functions.php：

InterServer 共享主机

虚拟主机的月费为1TB+5TB，价格为2.50美元。首月优惠价为1TB+5TB，价格为0.1美元。优惠码为"tryinterserver"。平台提供461个云应用脚本，一键安装便捷。

访问页面

<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

這個函式檔案做了幾件重要的事情：1) 透過add_theme_support()啟用了現代WordPress主題常用的功能；2) 透過register_nav_menus()註冊了一個選單位置，這樣我們之前在header.php中呼叫的primary選單就能在後臺“外觀”->“選單”中被分配了；3) 使用wp_enqueue_style()函式正確地、以依賴安全的方式將樣式表加入佇列。

建立獨立文章模板

為了讓單篇文章有更好的展示效果，我們可以建立一個專門的模板檔案single.php。根據模板層級，當訪問一篇單獨的文章時，WordPress會優先使用single.php，而不是index.php。

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        
            <div class="post-thumbnail">
                
            </div>
        
    </header>
    <div class="entry-content">
        
    </div>
</article>

這個模板更詳細地展示了文章資訊，如釋出日期和特色影象（如果設定了的話）。post_class()函式會輸出針對文章型別的CSS類。

新增基礎樣式與響應式設計

現在，你的主題已經有了骨架和基礎功能，是時候讓它變得美觀了。我們將向style.css中新增一些基礎CSS，並確保它具備響應式設計。

请将下文翻译成中文，并详细说明翻译思路：\n在你的style.css檔案（主題資訊頭下方）新增以下樣式：

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

這些樣式提供了清晰、現代的視覺效果，並在小螢幕裝置上提供了基本的響應式佈局。你可以建立/assets/css/custom.css檔案來存放更多自定義樣式，它已經在functions.php中被排隊載入了。

总结

透過本文的步驟，你已經從一個空資料夾開始，成功構建了一個功能完整、結構清晰的WordPress主題。你瞭解了主題開發的最基本檔案style.css以及index.php，學習了模板層級的概念，並建立了header.php、footer.php、single.php等核心模板檔案。你還透過functions.php檔案為你的主題添加了功能支援和資源管理能力，最後透過CSS賦予了它視覺生命。

這只是一個起點。接下來，你可以探索建立更多模板檔案（如page.php、archive.php、404.php），深入學習WordPress的鉤子（Hooks）和動作（Actions）/過濾器（Filters）系統，並研究如何使你的主題支援小部件（Widgets）和自定義器（Customizer）。不斷實踐和探索，你將成為一名成熟的WordPress主題開發者。

常见问题解答（FAQ）

如何修改主題的Logo？

关于header.php檔案中，找到顯示網站標題的程式碼行。你可以用一個`

`標籤替換bloginfo( ‘name’ )，並連結到你的Logo圖片。更專業的做法是在functions.php请将下文翻译成中文，并详细说明翻译过程：add_theme_support( ‘custom-logo’ )來支援WordPress自定義器中的Logo上傳功能。

為什麼我的導航選單不顯示？

首先，請確保你已經在functions.php通过中介机构register_nav_menus()註冊了選單位置（例如primary）。然後，你需要登入WordPress後臺，進入“外觀” -> “選單”頁面。建立一個新選單，選擇好選單項，並在“顯示位置”區域勾選你註冊的選單位置（如“Primary Menu”），最後儲存選單。

如何為主題新增側邊欄？

首先，在functions.php请将下文翻译成中文，并详细说明翻译过程：register_sidebar()函式註冊一個側邊欄小部件區域。然後，在你希望顯示側邊欄的模板檔案（如index.php或者single.php在该段落中，使用了dynamic_sidebar()函式呼叫這個區域。同時，你需要建立sidebar.php檔案來定義側邊欄的具體HTML結構。

functions.php檔案中的操作必須用鉤子掛載嗎？

是的，在大多數情況下，為了確保程式碼在正確的時機執行，你應該將功能程式碼包裝在函式內，並透過特定的鉤子（如after_setup_theme、wp_enqueue_scripts）掛載。直接寫在functions.php全域性範圍內的程式碼可能會在不恰當的時機執行或導致錯誤。

下一步，该怎么做呢？

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

延伸阅读与实用知识

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

入门级WordPress主题开发：从零到一搭建你的第一个主题

准备工作与环境搭建

建立主題資訊標頭檔案

建立基礎索引模板

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

構建網站頭部模板

構建網站底部模板

透過函式檔案增強主題功能

建立獨立文章模板

新增基礎樣式與響應式設計

总结

常见问题解答（FAQ）

如何修改主題的Logo？

為什麼我的導航選單不顯示？

如何為主題新增側邊欄？

functions.php檔案中的操作必須用鉤子掛載嗎？

下一步，该怎么做呢？

延伸阅读与实用知识

Cloudways 跨多雲平台的全管理: DigitalOcean, Vultr, Linode, AWS, Google cloud

入门级WordPress主题开发：从零到一搭建你的第一个主题

准备工作与环境搭建

建立主題資訊標頭檔案

建立基礎索引模板

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

構建網站頭部模板

構建網站底部模板

透過函式檔案增強主題功能

建立獨立文章模板

新增基礎樣式與響應式設計

总结

常见问题解答（FAQ）

如何修改主題的Logo？

為什麼我的導航選單不顯示？

如何為主題新增側邊欄？

functions.php檔案中的操作必須用鉤子掛載嗎？

下一步，该怎么做呢？

延伸阅读与实用知识

相关推荐

從零開始的WordPress主題開發：打造與眾不同網站介面

提升網站專業度的10個必備WordPress主題設計與開發技巧

如何選擇最適合你的 WordPress 主題：效能、安全與設計的全面考量

前言：為什麼選擇 WordPress 開發