準備工作同開發環境搭建
喺開始寫程式碼之前，建立一個高效嘅開發環境係至關重要嘅。呢樣嘢唔單止可以提高你嘅工作效率，仲可以確保程式碼嘅規範性同可維護性。
首先，你需要一個本地開發環境。你可以用 XAMPP、MAMP 或者 Local by Flywheel 呢啲工具，佢哋可以好快咁喺本地電腦度起一個包含 PHP 同 MySQL 嘅伺服器環境。安裝同啟動服務之後，確保 Apache（或者 Nginx）同 MySQL 係運行緊嘅。
跟住，下載最新嘅 WordPress 核心檔案，然後將佢解壓到本地伺服器嘅網站根目錄（例如 XAMPP 嘅 htdocs 資料夾）。透過瀏覽器訪問 http://localhost/your-wordpress-folder 嚟完成 WordPress 嘅安裝過程。記住你設定嘅數據庫名、用戶名同密碼。
推薦閱讀 Tailwind CSS 實戰入門：構建響應式現代網頁嘅設計指南。
對於代碼編輯器，推薦使用 Visual Studio Code、PhpStorm 或者 Sublime Text。呢啲編輯器對 PHP、HTML、CSS 同 JavaScript 有好好嘅語法高亮同代碼提示支援。另外，安裝一啲必要嘅插件，例如用於 WordPress 開發嘅智能提示插件，同埋用於版本控制嘅 Git。
最後，喺你本地嘅 WordPress 安裝目錄入面，導航到 wp-content/themes 文件夾。喺呢度，為你即將創建嘅主題新開一個文件夾，例如命名為 my-first-theme。呢個文件夾會存放你主題嘅所有檔案。
創建主題核心檔案
一個 WordPress 主題由一系列標準檔案構成，其中有兩個檔案係必須存在嘅：style.css 同埋 index.php。呢啲檔案定義咗主題嘅基本資訊同結構。
首先創建 style.css 檔案，佢唔單止係你嘅樣式表，仲包含咗主題嘅元資訊。呢啲資訊會顯示喺 WordPress 後台嘅「外觀」->「主題」頁面度。
/*
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
*/跟住，建立 index.php 檔案。呢個係主題嘅主模板檔案，當 WordPress 搵唔到更具體嘅模板檔案（例如 single.php 或 page.php）嗰陣，就會用到佢。一個最簡單嘅 index.php 可以只包含調用 WordPress 頭部、主循環同頁腳嘅基礎代碼。
推薦閱讀 精通 Tailwind CSS：由入門到實戰嘅實用指南。
<!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>
<?php wp_body_open(); ?>
<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><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
<?php endwhile; endif; ?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>呢個時候，你嘅主題已經可以激活喇。進入 WordPress 後台嘅「外觀」->「主題」頁面，你應該會睇到「我嘅第一個響應式主題」，激活佢並訪問網站首頁，就可以睇到基礎效果喇。
加入主題功能支援
為咗令主題功能更加完善，我哋需要透過 functions.php 檔案嚟加入對 WordPress 核心功能嘅支援。functions.php 文件就好似主題個腦，用嚟存放所有自訂函數、類、鉤子同過濾器。
創建一個 functions.php 喺文件度，加入以下代碼嚟支援文章縮圖、自訂選單同 HTML5 標記。
<?php
function my_first_theme_setup() {
// 让主题支持文章和页面上的“特色图像”
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置（主菜单）
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 对评论表单、搜索表单等输出 HTML5 标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 添加对<title>标签的WordPress原生支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 引入样式表
function my_first_theme_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>實現響應式佈局同樣式
響應式設計即係話你個網站喺桌面、平板同手機等唔同尺寸嘅裝置上都可以提供良好嘅瀏覽體驗。我哋主要透過 CSS 媒體查詢同流動式佈局嚟實現。
首先，喺 style.css 喺嘅元信息下面，編寫基本嘅全局樣式，為響應式打下基礎。我哋會用現代 CSS 佈局技術，例如 Flexbox。
/* 基础样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header, footer {
background: #f4f4f4;
padding: 2rem;
text-align: center;
margin: 1rem 0;
}
main {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
article {
flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
background: #fff;
padding: 1.5rem;
border: 1px solid #ddd;
}跟住，加啲媒體查詢去針對唔同嘅屏幕闊度做調整。呢個係響應式設計嘅核心。
推薦閱讀 打造獨一無二嘅網站：由入門到精通 WordPress 主題開發全攻略。
/* 平板设备（宽度小于 768px） */
@media (max-width: 768px) {
body {
padding: 0 15px;
}
main {
flex-direction: column;
gap: 1.5rem;
}
article {
flex: 1 1 auto;
}
}
/* 手机设备（宽度小于 480px） */
@media (max-width: 480px) {
header, footer {
padding: 1rem;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.2rem;
}
}優化導航菜單響應式
喺手機呢啲細屏幕裝置上面，傳統嘅橫向導航菜單會顯得擠迫。一個常見嘅解決方法係將佢轉換成漢堡包菜單。我哋需要結合 CSS 同少少 JavaScript 嚟實現。
首先，喺 header 部分修改菜單嘅 HTML 結構，通常由 WordPress 嘅 wp_nav_menu 函數生成。為咗控制樣式，我哋為佢加一個類名，同埋加一個漢堡包按鈕。
喺你嘅 header.php 模板文件入面（需要從 index.php 度分離出嚟），菜單代碼可能係咁：
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">菜单</button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
'menu_class' => 'nav-menu',
) );
?>跟住，喺 CSS 入面，預設喺細螢幕度隱藏菜單，當用戶撳漢堡包按鈕嗰陣，透過 JavaScript 切換一個類（例如 .toggled）嚟顯示菜單。
/* 小屏幕下隐藏菜单 */
@media (max-width: 768px) {
.nav-menu {
display: none;
flex-direction: column;
width: 100%;
}
.nav-menu.toggled {
display: flex;
}
.menu-toggle {
display: block;
}
}
/* 大屏幕下显示菜单并隐藏按钮 */
@media (min-width: 769px) {
.menu-toggle {
display: none;
}
.nav-menu {
display: flex;
list-style: none;
}
}最後，加一個簡單嘅 JavaScript 檔案（例如 js/navigation.js）同埋經 functions.php 引入，去處理按鈕嘅點擊事件。
創建自訂頁面模板同部件
WordPress 嘅靈活性好大程度上係嚟自佢嘅模板層級同部件（Widget）系統。創建自訂模板同部件區域可以大大豐富你個主題嘅功能。
建構自訂頁面範本
假設你想創建一個「全闊頁面」模板，呢個模板冇側邊欄，頁面內容佔據全部闊度。首先，喺主題根目錄創建一個新檔案，命名為 page-fullwidth.php。喺呢個檔案嘅最頂部，必須加返一個模板名稱嘅註解。
<?php
/**
* Template Name: 全宽页面
*/
get_header(); // 引入 header.php
?>
<main id="main" class="site-main full-width">
<?php
while ( have_posts() ) :
the_post();
the_title( '<h1 class="entry-title">', '</h1>' );
the_content();
endwhile;
?>
</main>
<?php
get_footer(); // 引入 footer.php
?>而家，當你喺 WordPress 後台建立或編輯一個頁面嗰陣，喺「頁面屬性」嘅「模板」下拉框入面，就可以揀「全寬頁面」。揀咗之後，呢個頁面就會用你啱啱建立嘅模板檔案嚟渲染。
註冊側邊欄部件區域
部件區域容許用戶透過拖放嘅方式喺主題嘅特定位置（例如側邊欄、頁腳）加入內容。我哋需要喺 functions.php 入面註冊一個側邊欄區域。
使用 register_sidebar 函數嚟註冊。呢個函數接收一個參數陣列，用嚟定義側邊欄嘅名稱、ID、描述同包裝標籤。
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-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_first_theme_widgets_init' );註冊之後，你需要喺主題模板中合適嘅位置調用呢個部件區域。通常，側邊欄位於 sidebar.php 檔案中，然後喺主模板檔案中（例如 index.php 或 single.php）透過 get_sidebar() 函數引入。
在 sidebar.php 入面，用 dynamic_sidebar 函數嚟輸出部件區域。
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php endif; ?>摘要
開發同訂製你嘅第一個響應式 WordPress 主題係一個又充滿挑戰又極有滿足感嘅過程。透過呢篇文章嘅步驟，你由零開始建立咗開發環境，創建咗主題必需嘅核心檔案 style.css 同埋 index.php，並透過 functions.php 加強咗主題功能。你深入實踐咗響應式網頁設計，用 CSS 媒體查詢同 Flexbox 佈局確保咗網站喺各種裝置上嘅兼容性。最後，你仲探索咗 WordPress 強大嘅模板系統同部件 API，學識咗點樣創建自訂頁面模板同可拖拽嘅部件區域。
掌握咗呢啲基礎之後，你就可以繼續探索更高級嘅主題特性，例如自訂文章類型、主題定制器 API、區塊編輯器支援等等，從而打造出功能更強大、設計更專業嘅 WordPress 主題。
常見問題
主題開發係咪一定要由零開始？
唔一定。雖然由零開始可以令你完全掌控同理解每個細節，但係對於初學者或者需要快速開發嘅場景，由現有基礎主題（Underscores、_s）或者框架（例如 Bootstrap 整合主題）開始，係更有效率嘅選擇。呢個可以俾你一個穩固、符合最佳實踐嘅代碼基礎，你喺上面可以進行定制。
點樣調試我嘅WordPress主題？
WordPress 開發入面常用嘅除錯方法係啟用 WP_DEBUG。喺你嘅 wp-config.php 檔案入面，將 define( 'WP_DEBUG', false ); 修改為 define( 'WP_DEBUG', true );。呢個設定會強制 WordPress 喺螢幕上顯示所有 PHP 錯誤、警告同通知。同時，結合瀏覽器嘅開發者工具（Console、Elements、Network 標籤頁）嚟除錯 JavaScript、CSS 同網絡請求。
點解我改咗主題之後冇即時生效？
通常係因為瀏覽器快取或者 WordPress 快取插件導致。首先，試下喺瀏覽器度強制重新整理（Ctrl+F5 或 Cmd+Shift+R）。如果用咗快取插件，請清空該插件嘅快取。另外，確保你修改嘅係當前使用中主題檔案夾下嘅正確檔案。如果改咗 functions.php 檔案，有時只需要重新整理後台頁面就得，因為呢個檔案每次載入頁面時都會讀取。
點樣令我嘅主題支援多語言？
讓主題支援多語言（國際化同本地化）係一個好習慣。呢個主要涉及兩個步驟：首先，喺主題中所有需要翻譯嘅文字處用 WordPress 嘅翻譯函數包裝，例如 __('Hello World', 'my-first-theme')。其次，用 Poedit 呢類工具，掃描主題檔案生成 .pot 模板檔案，然後為每種語言創建相應嘅 .po 同埋編譯好嘅 .mo 檔案，並將佢放喺主題嘅 /languages/ 目錄下。最後，喺 functions.php 入面用 load_theme_textdomain 函數嚟載入翻譯。
開發商業主題需要注意啲咩？
開發用嚟分發嘅商業主題，要求遠高過自用主題。你需要嚴格遵守 WordPress 主題目錄嘅審核標準，確保代碼安全、冇錯誤。必須對所有用戶輸入同輸出進行嚴格嘅跳脫同驗證，用安全嘅函數例如 esc_html, esc_url。主題應包含詳盡嘅文檔同註釋。另外，強烈建議為你嘅主題加入對WordPress核心功能（例如區塊編輯器、自訂標誌）嘅全面支援，並確保同流行嘅插件兼容。最後，考慮加入主題定制器支援，為用戶提供直觀嘅實時定制體驗。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。