主頁/知識/WordPress/內容詳情

WordPress主題開發入門指南：從零開始打造你嘅第一款主題

4分鐘閱讀
2026-03-16
2026-06-04
2,789
當你透過以下連結購物,我會獲得佣金,對你嚟講冇額外成本。.

準備工作同環境搭建

喺開始寫程式碼之前，你需要一個合適嘅開發環境。呢個包括一個本地伺服器環境（例如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 標誌 瀏覽該頁面

理解核心模板文件同模板層級

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">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/yue/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

同樣，創建footer.php，並確保調用wp_footer()函數。

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

而家，你可以更新你嘅index.php，用呢啲模板部件。

<?php get_header(); ?>

<main>
    <h1>你好世界，來自主程式！</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核心組件好似選單同小工具區域，同埋排入樣式表同腳本檔案。

hosting.com 共享主機
高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。
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,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。
InterServer 標誌 瀏覽該頁面 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
<?php endif; ?>

構建單篇文章模板

而家，等我哋創建一個專門用嚟顯示單篇文章嘅模板single.php。佢比起列表頁嘅循環更加詳細。

<?php get_header(); ?>

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1><?php the_title(); ?></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

摘要

透過呢篇指南，你已經完成咗由零開始構建一個基礎WordPress主題嘅核心旅程。我哋由建立開發環境同創建基礎檔案開始，逐步深入理解WordPress嘅模板層級系統，呢個係構建靈活主題嘅基石。你學識咗點樣構建可重用嘅header.php同埋footer.php模板部件，並透過強大嘅functions.php檔案為你嘅主題加入咗關鍵功能支援，例如導航選單同埋樣式載入。最後，我哋探索咗WordPress嘅「循環」機制，並建立咗用於顯示文章列表同埋單篇文章嘅模板。

呢個只係一個起點。跟住落嚟，你可以探索建立更多特定模板（例如page.php, archive.php），註冊小工具區域，加入自訂文章類型同埋分類法，以及實現更高級嘅響應式設計同埋JavaScript互動。記住，參考官方開發者文檔同埋不斷實踐係提升技能嘅最佳途徑。

常見問題

我嘅主題啟動後，網站顯示一片空白（白屏）點算好？

呢個通常係由PHP致命錯誤引起嘅。請首先檢查你嘅functions.php檔案入面有冇語法錯誤，例如漏咗分號或者括號。打開WordPress嘅WP_DEBUG模式可以幫你睇到具體嘅錯誤信息。喺wp-config.php檔案入面，將define('WP_DEBUG', false);改為define('WP_DEBUG', true);。

點樣為我嘅主題加自定義Logo功能？

喺你嘅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 網站,我哋建議你繼續閱讀有關效能優化、插件設定同主題自訂嘅內容。

延伸閱讀及實用知識

以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。

標籤: