WordPress主題開發入門：由零構建你嘅第一款定制化主題

準備工作同環境搭建

喺開始寫程式碼之前，你需要準備一個合適嘅開發環境。呢個包括一個本地伺服器環境（例如XAMPP、MAMP或者Local by Flywheel）同埋一個程式碼編輯器（例如VS Code、PhpStorm或者Sublime Text）。要確保你嘅本地環境支援PHP（版本7.4或者更高）同埋MySQL/MariaDB。

跟住，你需要喺WordPress安裝目錄嘅wp-content/themes文件夾入面開一個新嘅文件夾，呢個就會成為你嘅主題目錄。舉個例，你可以開一個叫做my-first-theme嘅文件夾。呢度就係你所有主題文件嘅「屋企」喇。

一個WordPress主題最基礎嘅檔案只有兩個：style.css同埋index.php。其中，style.css唔單止係樣式表，更係主題嘅「身份證」，佢透過檔案頭部嘅註釋資訊向WordPress聲明主題嘅名稱、作者、描述等元數據。

推薦閱讀深入解析WordPress主題開發：由入門到精通嘅核心技術指南。

建立主題資訊檔案

喺你嘅主題資料夾中，建立style.css檔案，並輸入以下基礎資料：

UltaHost WordPress 主機

30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%

瀏覽該頁面

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习WordPress主题开发的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

呢段註解係必需嘅。WordPress 正係透過讀取Theme Name呢一行嚟喺後台嘅主題清單度識別同顯示你嘅主題。其他資料例如Text Domain係為咗國際化（翻譯）做準備。

創建核心模板文件

跟住，創建最基本嘅index.php檔案。就算呢個檔案暫時係空嘅，只要style.css資料完整，你嘅主題就會喺WordPress後台嘅「外觀」->「主題」列表入面出現，而且可以啟動。而家，等我哋喺index.php入面寫一個最簡單嘅HTML結構，用嚟輸出網誌標題同文章內容。

<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1011>
    <header>
        <h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                ?>
                <article>
                    <h2><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div><?php the_content(); ?></div>
                </article>
                &lt;?php
            endwhile;
        else :
            echo &#039;<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_foot(); ?>
</body>
</html>

呢段代碼用咗幾個WordPress核心嘅模板标签，例如bloginfo()、the_title()、the_content()。函數wp_head()同埋wp_foot()係關鍵嘅鉤子，容許WordPress核心、插件同其他腳本喺頁面嘅頭部同尾部插入必要代碼。

理解模板層級同創建核心模板

WordPress用一套叫做模板层级嘅規則嚟決定對於特定嘅頁面請求，應該用邊個模板檔案嚟渲染。呢個係主題開發中最核心嘅概念之一。簡單嚟講，WordPress會從最具體嘅模板檔案開始搵，如果唔存在，就退返去更通用嘅檔案，最終退返到index.php。

推薦閱讀 WordPress主題開發入門指南：由零開始建立你嘅第一個自訂主題。

為文章詳情頁創建模板

當用戶訪問單篇文章時，WordPress會優先搵single-post.php，如果唔存在，就會用single.php，最後先係index.php。等我哋創建一個single.php專門控制單篇文章嘅顯示。

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
            <header class="entry-header">
                &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
                <div class="entry-meta">
                    发布于： | 作者：
                </div>
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
            <footer class="entry-footer">
                分类：
            </footer>
        </article>
        <?php
        // 上一篇/下一篇导航
        the_post_navigation();
        // 评论模板
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
    ?>
</main>

呢個模板引入咗三個重要嘅模板組件：get_header()、get_sidebar()同埋get_footer()。佢哋分別用於引入header.php、sidebar.php同埋footer.php文件，呢個係實現代碼重用同模組化設計嘅關鍵。

創建頁面範本

對於靜態頁面（例如「關於我哋」），WordPress會搵page.php。建立page.php，佢嘅結構同single.php差唔多，但通常唔會顯示分類、標籤同發佈時間呢啲元信息。

hosting.com 共享主機

高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。

瀏覽該頁面

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
            <header class="entry-header">
                &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
        <?php
    endwhile;
    ?>
</main>

實現主題功能同樣式

一個完整嘅主題唔單止需要模板文件，仲需要通過functions.php文件嚟添加功能、註冊菜單、小工具區域，同埋通過style.css添加樣式。

主題功能函數檔案

喺你主題嘅根目錄下建立functions.php。呢個檔案喺主題初始化時會自動載入，用嚟存放所有自訂PHP函數同掛鉤。

<?php
/**
 * 我的第一个主题的功能函数
 */

// 添加主题支持功能
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像（缩略图）功能
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus(
        array(
            'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
        )
    );
    // 添加HTML5标记支持
    add_theme_support(
        'html5',
        array(
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
            'style',
            'script',
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册小工具侧边栏
function my_first_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( '主侧边栏', 'my-first-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( '在此添加小工具。', '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_first_theme_widgets_init' );

// 加载主题样式表和脚本
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
    // 加载通用CSS
    wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
    // 加载通用JavaScript
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

加入基礎樣式

而家，等我哋喺style.css嘅註釋頭部之後，加啲基本CSS嚟美化你個主題。

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

header {
    border-bottom: 2px solid #0073aa;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.entry-title {
    color: #222;
}

.site-main {
    float: left;
    width: 70%;
}

/* 侧边栏样式 */
.widget-area {
    float: right;
    width: 25%;
    padding-left: 5%;
}

/* 页脚样式 */
footer {
    clear: both;
    border-top: 1px solid #ddd;
    margin-top: 60px;
    padding-top: 20px;
    text-align: center;
    color: #666;
}

模組化同模板部件

為咗提高代碼嘅可維護性同重用性，WordPress鼓勵將重複嘅頁面部分（例如頁頭、頁腳、側邊欄）拆分成獨立嘅模板部件檔案。

建立頁頭與頁尾部件

創建header.php，包含從<!DOCTYPE html>由開始到打開<main>標籤之前嘅所有內容。

InterServer 共享主機

共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。

瀏覽該頁面

<!DOCTYPE html>
<html no numeric noise key 1014>
<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">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1011>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#primary">跳至主要內容</a>
    <header id="masthead" class="site-header">
        <div class="site-branding">
            <?php
            if ( is_front_page() && is_home() ) :
                ?>
                <h1 class="site-title"><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                <?php
            else :
                ?>
                <p class="site-title"><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                <?php
            endif;
            $my_first_theme_description = get_bloginfo( 'description', 'display' );
            if ( $my_first_theme_description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
            <?php endif; ?>
        </div>
        <nav id="site-navigation" class="main-navigation">
            'primary',
                    'menu_id'        =&gt; 'primary-menu',
                )
            );
            ?&gt;
        </nav>
    </header>
    <div id="content" class="site-content">

相應地，創建footer.php，包含</div>之後嘅所有內容。

    </div><!-- #content -->
    <footer id="colophon" class="site-footer">
        <div class="site-info">
            <p>&lt;?php printf( esc_html__( &#039;主题：%1$s&#039;, &#039;my-first-theme&#039; ), &#039;<a href="https://example.com/">我的第一个主题</a>' ); ?&gt;</p>
        </div>
    </footer>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

創建sidebar.php嚟顯示小工具區域。

<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
    ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
    <?php
endif;
?>

完成呢啲部件之後，你就可以用get_header()、get_footer()同埋get_sidebar()函數喺所有模板檔案裏面簡潔噉調用佢哋喇。

摘要

跟住呢個指南，你已經完成咗由零開始構建一個基礎WordPress主題嘅全過程。你學識咗點樣設定開發環境、創建必需嘅主題檔案（style.css同埋index.php），並深入理解咗WordPress嘅模板層級系統，從而創建咗針對唔同頁面類型（例如文章、頁面）嘅專用模板（single.php， page.php）。你掌握咗透過functions.php檔案為主題添加核心功能，例如註冊菜單、小工具同支援特色圖像。最後，你實踐咗模組化開發思想，將頁頭、頁腳同側邊欄拆分為可重用嘅模板部件（header.php， footer.php， sidebar.php），呢個極大噉提升咗程式碼嘅可維護性。呢個只係一個起點，喺呢個基礎上，你可以繼續探索自訂文章類型、進階主題選項、響應式設計同埋JavaScript互動，逐步構建出功能強大、設計專業嘅WordPress主題。

常見問題

點解我個主題喺後台唔顯示？

確保你嘅主題資料夾正確放喺wp-content/themes/目錄下面，而且入面嘅style.css檔案頭部要包含格式正確嘅註解塊，特別係Theme Name:呢一行一定要存在而且正確。檔案編碼應該係UTF-8 without BOM。

點樣為我嘅主題加自訂Logo支援？

喺你嘅functions.php檔案嘅my_first_theme_setup喺函數入面，加一行代碼：add_theme_support( 'custom-logo' );。加咗之後，用戶就可以喺WordPress後台嘅「外觀」->「自訂」->「網站身份」度上傳同設定Logo。你需要用header.php入面用the_custom_logo()函數嚟輸出Logo。

改咗functions.php檔案之後網站出白畫面點算好？

呢個通常都係話functions.php個檔案入面有PHP語法錯誤。WordPress會因為致命錯誤而停咗執行。你需要透過FTP或者檔案管理員登入伺服器，將出錯嘅functions.php改名（例如改做functions.php.bak），令個網站可以恢復訪問。跟住，檢查同埋修正你啲代碼，再重新上傳正確嘅檔案。喺本地開發環境度做測試係避免呢啲問題嘅好習慣。

點樣令我嘅主題支援多語言翻譯？

你已經喺style.css中設置咗Text Domain（文本域），並喺functions.php嘅字符串度用咗esc_html__( ‘文本’， ‘my-first-theme’ )噉樣嘅翻譯函數。跟住，你需要用Poedit呢類工具，掃描主題文件入面嘅可翻譯字符串，生成.pot模板檔案，然後為每種語言創建相應嘅.po同埋.mo文件，并將佢哋擺喺主題嘅/languages文件夾入面。WordPress會根據網站語言設定自動載入相應嘅翻譯。

下一步應該點做?

如果你正喺建立或優化 WordPress 網站,我哋建議你繼續閱讀有關效能優化、插件設定同主題自訂嘅內容。

延伸閱讀及實用知識

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

WordPress主題開發入門：從零開始建立你嘅第一款客製化主題

準備工作同環境搭建

建立主題資訊檔案

創建核心模板文件

理解模板層級同創建核心模板

為文章詳情頁創建模板

創建頁面範本

實現主題功能同樣式

主題功能函數檔案

加入基礎樣式

模組化同模板部件

建立頁頭與頁尾部件

摘要

常見問題

點解我個主題喺後台唔顯示？

點樣為我嘅主題加自訂Logo支援？

改咗functions.php檔案之後網站出白畫面點算好？

點樣令我嘅主題支援多語言翻譯？

下一步應該點做?

延伸閱讀及實用知識

跨多雲平台全面託管 WordPress 主機

WordPress主題開發入門：從零開始建立你嘅第一款客製化主題

準備工作同環境搭建

建立主題資訊檔案

創建核心模板文件

理解模板層級同創建核心模板

為文章詳情頁創建模板

創建頁面範本

實現主題功能同樣式

主題功能函數檔案

加入基礎樣式

模組化同模板部件

建立頁頭與頁尾部件

摘要

常見問題

點解我個主題喺後台唔顯示？

點樣為我嘅主題加自訂Logo支援？

改咗functions.php檔案之後網站出白畫面點算好？

點樣令我嘅主題支援多語言翻譯？

下一步應該點做?

延伸閱讀及實用知識

相關推薦

为什么选择 WordPress 作为网站首选平台

WordPress基礎入門指南：由零開始建立你嘅第一個專業網站

網站建設一站式解決方案：由零到上線嘅完整實施指南

前言：點解揀 WordPress 開發？