準備工作同環境搭建
開一個WordPress主題開發項目，首先要配置合適嘅工作環境。呢個唔單止包括本機開發伺服器，仲要建立清晰嘅項目目錄結構同埋用現代化嘅開發工具。
本機開發環境嘅搭建有好多選擇。你可以用XAMPP、MAMP或者Local by Flywheel呢啲集成軟件包，佢哋能夠快速喺本機電腦度安裝Apache、MySQL同PHP。如果想體驗更接近生產環境，可以考慮用Docker容器。另外，幾乎所有現代主題開發都係由一個基礎嘅代碼編輯器開始，例如VS Code，再配合必要嘅插件嚟提升編碼效率。
一個標準又清晰嘅主題目錄結構係項目可維護性嘅基石。喺WordPress嘅wp-content/themes目錄入面，開一個以你個主題名命名嘅資料夾，例如my-modern-theme。喺呢個文件夾入面，你一定要創建兩個核心文件：style.css同埋index.php。其中，style.css唔單止係樣式表，仲包含咗主題嘅元數據信息。其餘嘅文件同目錄，例如用嚟放JavaScript腳本嘅/js、放模板部件嘅/template-parts、放頁面模板嘅/page-templates等等，可以喺開發過程中逐步建立。
推薦閱讀 Tailwind CSS 終極指南：從入門到精通實用技巧。
主題樣式表頭資訊
主題嘅style.css檔案頭部必須包含一段格式標準嘅註釋，用於向WordPress系統聲明你嘅主題。呢段資訊至關重要，佢定義咗主題名稱、作者、描述、版本等。
/*
Theme Name: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
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-modern-theme
*/其中嘅Text Domain用喺國際化，佢會作為之後翻譯函數嘅文本域。定義好呢啲資料之後，你嘅主題就會喺WordPress後台嘅「外觀」->「主題」列表度出現。
引入核心函數檔案
雖然index.php同埋style.css足以令一個主題被識別，但一個功能完整嘅主題必須包含functions.php檔案。呢個檔案唔係用嚟直接輸出內容嘅，而係作為主題嘅「功能引擎」，用嚟加主題支援、登記菜單、側邊欄，同埋引入樣式同腳本。
喺主題根目錄下創建functions.php文件。喺最初階段，我哋可以喺入面加啲基本功能支援先。你可以透過add_theme_support()函數嚟聲明主題支援嘅功能，例如文章縮略圖（Featured Image）、自訂Logo、HTML5標籤等等。
構建核心模板檔案
WordPress採用模板層級系統去決定點樣顯示唔同類型嘅內容。理解同埋創建呢啲核心模板文件，係將你嘅設計轉化做動態網站嘅關鍵。
推薦閱讀 全面解析現代網站建設：從規劃到上線嘅完整實踐指南。
最基本嘅模板文件係index.php，佢係所有頁面嘅最終後備模板。但係為咗更精細嘅控制，我哋應該創建更具體嘅模板。例如，用嚟顯示博客文章列表嘅home.php或index.php，用嚟顯示單篇文章嘅single.php，用嚟顯示靜態頁面嘅page.php，同埋用嚟顯示文章分類、標籤等歸檔頁面嘅archive.php。此外，header.php同埋footer.php用嚟分開網站頭部同尾部代碼，透過get_header()同埋get_footer()函數喺各個模板度調用，實現代碼重用。
創建頭部模板
header.php檔案通常包含HTML文檔嘅<head>部分同頁面開頭嘅結構，例如網站標誌同主導航菜單。一個關鍵步驟係喺<head>中調用wp_head()鉤子，呢個係WordPress核心、插件同主題本身輸出必要CSS、JavaScript同元數據嘅地方。
<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php the_custom_logo(); ?>
<div class="site-title"><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></div>
</div>
<nav id="site-navigation" class="main-navigation">
'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</header>嚟實現文章循環
文章循環係WordPress動態內容輸出嘅核心機制。喺index.php、single.php等模板入面，我哋用if ( have_posts() ) : while ( have_posts() ) : the_post();嚟遍歷同顯示每篇文章。
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 为每篇文章加载对应的模板部件或内容模板
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
// 分页导航
the_posts_navigation();
else :
// 没有找到内容时的模板
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>
</div>get_template_part()函數係一個優秀實踐，佢鼓勵你將顯示文章內容嘅HTML結構分離到template-parts/content.php噉樣嘅部件文件中，令主模板文件更加簡潔清晰。
實現響應式設計同埋樣式
現代主題必須係響應式嘅，能夠喺由手機到桌面嘅各種屏幕尺寸上提供良好嘅瀏覽體驗。呢個主要透過CSS媒體查詢、彈性盒模型（Flexbox）同埋網格佈局（CSS Grid）嚟實現。
首先，喺functions.php中正確噉使用wp_enqueue_style()函數將你嘅主樣式表加入隊列。確保喺調用嗰陣設置依賴於WordPress自帶嘅樣式，例如dashicons。
推薦閱讀 Tailwind CSS 終極指南：由入門到精通現代網頁開發。
function my_modern_theme_scripts() {
// 引入主题主要样式表
wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义脚本（如果有）
wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );移動優先嘅CSS策略
採用「移動優先」嘅策略編寫CSS。即係首先為細屏幕設備（例如手機）編寫基礎樣式，然後使用媒體查詢為逐漸增大嘅屏幕（平板、桌面）添加增強樣式同佈局調整。
/* 基础样式 - 针对移动设备 */
.site-header {
padding: 1rem;
display: flex;
flex-direction: column;
}
.main-navigation ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
}
/* 针对平板及以上设备 */
@media (min-width: 768px) {
.site-header {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.main-navigation ul {
flex-direction: row;
gap: 2rem;
}
}
/* 针对大桌面设备 */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
margin: 0 auto;
}
}處理響應式圖像
WordPress提供咗強大嘅響應式圖像支援。用the_post_thumbnail()函數並傳遞適當嘅尺寸參數，WordPress會自動輸出帶有srcset同埋sizes屬性嘅`
`標籤，等瀏覽器根據裝置螢幕揀最合適嘅圖像檔案，從而優化加載性能。
<?php if ( has_post_thumbnail() ) : ?>
<figure class="post-thumbnail">
<?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
</figure>
<?php endif; ?>加入主題功能同自訂設定
一個基礎主題成形之後，可以透過WordPress嘅API加入各種功能，增強佢嘅可用性同專業性。呢啲包括自訂菜單、小工具區域（側邊欄），同埋透過定制器或者選項頁面進行嘅主題自訂。
登記導航菜單
在functions.php入面用register_nav_menus()用函數嚟定義你嘅主題支援邊啲菜單位置。跟住，用戶就可以喺後台「外觀」->「菜單」入面，向呢啲位置分配菜單。
function my_modern_theme_setup() {
// 注册一个主菜单
register_nav_menus( array(
'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
) );
// 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );建立小工具區域
小工具區域（Sidebar）容許用戶透過拖拽小工具嚟自訂頁面區塊。使用register_sidebar()函數進行註冊。通常，你會為主側邊欄、頁尾小工具區域等創建多個小工具區。
function my_modern_theme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Sidebar', 'my-modern-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-modern-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_modern_theme_widgets_init' );註冊後，喺模板文件（如sidebar.php）入面用dynamic_sidebar( 'sidebar-1' )函數調用即可顯示該區域。
整合自訂器API
WordPress定制器允許用戶喺即時預覽下調整主題選項。你可以透過定制器API加入簡單嘅設定，例如顏色選擇、上傳Logo等等。呢個涉及使用$wp_customize->add_setting()同埋$wp_customize->add_control()方法。
function my_modern_theme_customize_register( $wp_customize ) {
// 添加一个站点标题颜色的设置
$wp_customize->add_setting( 'header_textcolor', array(
'default' => '#000000',
'sanitize_callback' => 'sanitize_hex_color',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
'label' => __( 'Header Text Color', 'my-modern-theme' ),
'section' => 'colors',
) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );然後喺header.php當中，可以透過get_theme_mod( 'header_textcolor' )攞到呢個數值並以內聯樣式等方式應用。
摘要
由零開始開發一個現代響應式WordPress主題係一個系統性嘅工程，佢要求開發者唔單止要熟PHP同WordPress核心API，仲要精通HTML5、CSS3（特別係Flexbox/Grid同媒體查詢）同埋JavaScript。成個過程跟住模組化、可維護嘅原則：由搭建環境、定義主題資訊開始，逐步構建跟住模板層級嘅PHP檔案，實現核心嘅文章循環。跟住，透過「移動優先」嘅CSS策略同響應式圖像技術確保網站係所有裝置上表現優異。最後，利用WordPress強大嘅功能API添加導航選單、小工具區域同自訂器支援，俾用戶靈活嘅自訂能力。跟住呢啲步驟，你就能夠構建出專業、高效同易於維護嘅WordPress主題。
常見問題
開發WordPress主題必須掌握邊啲核心技術
開發一個完整嘅WordPress主題，你需要掌握一系列核心技術。首先係PHP，因為WordPress本身係用PHP編寫嘅，所有模板檔案同功能邏輯都依賴佢。其次係HTML5同CSS3，用於構建頁面嘅結構同樣式，特別係響應式設計離唔開CSS媒體查詢同現代佈局模型（例如Flexbox同Grid）。對JavaScript有基本了解亦都非常重要，用於實現互動功能。最後，你必須深入理解WordPress嘅核心概念，例如模板層級、文章循環、掛鈎（Hooks）同過濾器（Filters）等等。
style.css檔案入面嘅Text Domain有咩作用
Text Domain係主題國際化同本地化嘅關鍵標識符。佢嘅作用係為你主題中所有可翻譯嘅字串建立一個唯一嘅命名空間。喺代碼中，當你使用像__('Hello World', 'my-modern-theme')或_e('Read More', 'my-modern-theme')噉嘅翻譯函數時，第二個參數就係文本域。咁樣確保咗翻譯工具（例如Poedit）能夠正確識別並提取屬於你主題嘅字串，從而生成.po同埋.mo翻譯文件，令你嘅主題能夠輕鬆噉被翻譯成任何語言。
點樣令主題支援文章縮略圖功能
要令主題支援文章縮略圖（又稱特色圖像），你需要在主題嘅functions.php檔案入面加返相應嘅主題支援聲明。用add_theme_support()函數，再傳入'post-thumbnails'參數。你可以喺所有文章類型度啟用，亦可以指定只係喺某啲文章類型（例如post同埋page) 上啟用。
function my_theme_setup() {
add_theme_support( 'post-thumbnails' );
// 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
// 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );添加支援後，文章編輯頁面就會出現「特色圖像」元框，用戶就可以上傳或者揀選圖片。喺模板度，用has_post_thumbnail()檢查有冇縮略圖，同埋用the_post_thumbnail()函數嚟顯示佢。
點解推薦用 get_template_part 函數
get_template_part()函數係WordPress主題開發入面實現代碼重用同模組化嘅最佳實踐之一。佢主要用嚟將常用嘅模板代碼（例如顯示文章內容嘅HTML結構）分離到獨立嘅部件檔案入面。咁樣做有幾個明顯優點：首先係提高代碼可讀性同可維護性，主模板檔案（如index.php）變得非常簡潔；其次係增強咗靈活性，你可以根據唔同嘅條件（例如文章類型）載入唔同嘅部件檔案，例如get_template_part( 'template-parts/content', 'page' )會優先載入content-page.php；最後，佢方便咗子主題嘅覆蓋，子主題只需要提供一個同名部件檔案就可以修改父主題嘅顯示邏輯。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。