乜嘢係WordPress主題同佢嘅基本結構
一個WordPress主題定義咗網站嘅外觀同呈現方式，佢係一系列檔案嘅集合，呢啲檔案透過模板、樣式表同PHP代碼協同工作。了解佢嘅基本結構係開發嘅第一步。核心檔案通常包括：
- style.css：主題嘅主要樣式表，同時包含主題嘅元信息（主題名稱、作者、描述等等）。
- index.php：默認嘅主模板檔案，係主題嘅必備檔案。
- functions.php: 用嚟加主題功能、註冊腳本同樣式、定義自訂功能等等。
- header.php：定義網站頁頭區域。
- footer.php：定義網站頁腳區域。
- page.php 同埋 single.php: 分別用嚟渲染「頁面」同「文章」。
呢啲模板檔案遵循WordPress嘅模板層級體系，容許開發者透過創建特定命名嘅檔案嚟覆蓋預設嘅顯示邏輯，從而精確控制唔同內容類型嘅輸出。
喺開始之前，你需要一個本地開發環境（例如Local by Flywheel、XAMPP）或者一個測試伺服器。一個代碼編輯器（例如VS Code）同FTP客戶端（用嚟部署）都係必需品。
推薦閱讀 WordPress主題開發入門指南：由零打造個人化網站。
創建你嘅第一個基礎主題
我哋由創建一個最簡單但完全可用嘅主題開始。首先，喺你嘅wp-content/themes目錄下開一個新資料夾，例如my-first-theme。呢度係你所有主題文件嘅存放位置。
定義主題樣式同資訊
創建style.css文件，並喺文件頭部加入以下註釋塊。呢個係WordPress識別一個主題所必需嘅。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/呢個註釋塊提供咗主題喺WordPress後台嘅顯示資訊。Text Domain用於國際化，係主題嘅識別符。
構建核心模板檔案
跟住，創建最基本嘅index.php檔案，呢個係所有頁面嘅預設模板。
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 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>
<?php
endwhile;
else :
echo '<p>没有找到内容。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>呢個檔案用咗多個核心WordPress模板標籤，例如the_post(), the_title(), the_content()嚟循環輸出文章。wp_head()同埋wp_footer()鉤子至關重要，佢哋容許WordPress核心、插件同其他腳本插入必要嘅代碼。
推薦閱讀 WordPress主題開發：從零開始構建專業級網站主題嘅完整指南。
將檔案上傳到伺服器之後，你就可以喺WordPress後台嘅「外觀」->「主題」度見到同啟用呢個主題喇。而家你嘅網站就會用呢個極簡嘅佈局。
增強主題功能與靈活性
擁有基本結構後，我哋需要引入模組化同功能性，令主題更專業、更易維護。
引入核心功能檔案
創建functions.php檔案，呢個係主題嘅「大腦」。喺呢度，我哋加入主題支援、註冊導航選單、載入樣式同腳本。
<?php
function my_theme_setup() {
// 让WordPress管理文档标题
add_theme_support('title-tag');
// 启用文章和页面的特色图像功能
add_theme_support('post-thumbnails');
// 注册一个主菜单
register_nav_menus(array(
'primary' => __('主导航菜单', 'my-first-theme'),
));
// 为RSS feed链接添加支持
add_theme_support('automatic-feed-links');
}
add_action('after_setup_theme', 'my_theme_setup');
function my_theme_scripts() {
// 引入主样式表
wp_enqueue_style('main-style', get_stylesheet_uri());
// 引入自定义JavaScript文件
wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>add_theme_support()函數啟用咗現代WordPress主題嘅常用功能。用wp_enqueue_style()同埋wp_enqueue_script()係加載資源嘅標準方式，佢哋可以正確處理依賴同版本控制。
拆分頁頭同頁尾模板
将index.php將頁頭同頁尾嘅代碼分離出嚟做獨立檔案，可以提高代碼復用性。建立header.php，包含從到開頭之前嘅所有代碼。建立footer.php，包含由關閉之後到所有嘅代碼。然後，喺index.php入面用get_header()同埋get_footer()函數引入佢哋。
創建側邊欄模板
創建一個sidebar.php檔案，裏面可以擺放小工具區域。首先，喺functions.php註冊一個小工具區域：
推薦閱讀 從零開始到精通：WordPress主題開發完整指南與實戰教程。
function my_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_theme_widgets_init');跟住，喺sidebar.php調用小工具區域：
<?php if (is_active_sidebar('sidebar-1')) : ?>
<aside>
<?php dynamic_sidebar('sidebar-1'); ?>
</aside>
<?php endif; ?>最後，喺index.php喺主內容區域旁邊，你可以用get_sidebar()嚟調用佢。
應用樣式同響應式設計
一個冇樣式嘅主題係冇吸引力嘅。我哋會用CSS令個主題靚啲同適應唔同裝置。
建立基礎佈局樣式
在style.css喺註釋塊下面，開始加入基礎樣式。首先定義一啲CSS變數同重置樣式，然後設定基本佈局。
:root {
--primary-color: #0073aa;
--text-color: #333;
--background-color: #f5f5f5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-color);
background: var(--background-color);
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: white;
padding: 2rem;
margin-bottom: 2rem;
border-bottom: 3px solid var(--primary-color);
}
main {
display: grid;
grid-template-columns: 1fr 300px;
gap: 2rem;
}
article {
background: white;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 5px;
}實現響應式導航選單
對於喺functions.php入面註冊嘅導航選單，我哋需要加入樣式並令佢喺流動裝置上更加好用。首先，喺header.php中輸出菜單：
<nav>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
));
?>
</nav>然後喺CSS度加樣式，同埋用媒體查詢整好手機版：
.primary-menu {
display: flex;
list-style: none;
}
.primary-menu li {
margin-left: 1.5rem;
}
.primary-menu a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
}
.primary-menu a:hover {
color: var(--primary-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
main {
grid-template-columns: 1fr; /* 移除侧边栏 */
}
.primary-menu {
flex-direction: column;
}
.primary-menu li {
margin: 0.5rem 0;
}
}優化文章特色圖
因為我哋開咗post-thumbnails支持，可以喺index.php或single.php喺個循環入面，用the_post_thumbnail()函數嚟顯示特色圖片，並為佢加CSS類嚟控制尺寸。
摘要
呢個指南帶你行過WordPress主題開發嘅核心流程：由理解主題嘅基本檔案結構，到創建第一個可用嘅主題，再到透過functions.php增強功能、拆分模板實現模組化，最後透過CSS進行美化同響應式設計。開發WordPress主題嘅關鍵在於理解模板層級、核心函數同掛鈎（Hooks）系統。從呢個小起點出發，你可以繼續探索自訂文章類型、高級主題選項、Gutenberg區塊編輯器支援等更複雜嘅領域，從而打造出真正滿足個人化需求嘅專業網站。
常見問題
### 主題開發係咪一定要由零開始？
唔一定。你可以選擇基於一個現有嘅、輕量級嘅「啟動主題」（Starter Theme）或者「框架」（Framework）進行開發，例如 Underscores (_s) 或者 Sage。呢啲工具提供咗良好嘅代碼結構同最佳實踐，可以慳返大量基礎搭建時間，令你可以更專注於獨特嘅設計同功能。
點樣可以令我嘅主題支援子主題？
為咗令你嘅主題可以安全咁自訂，你可以將佢設計成「父主題」，容許用戶創建「子主題」去覆蓋樣式同模板。你需要確保主題跟返良好嘅模板組織結構，並喺style.css入面避免用絕對路徑去引用資源，而係用get_template_directory_uri()呢啲函數。子主題只需要一個style.css同可選嘅functions.php就可以繼承晒所有父主題嘅功能。
開發時點樣調試常見錯誤？
打開WordPress嘅調試模式係至關重要嘅。喺你wp-config.php檔案入面，將WP_DEBUG常數設定為true。咁樣會令所有PHP錯誤、警告同通知顯示喺螢幕上。同時，用瀏覽器開發者工具（按F12）嚟檢查CSS同JavaScript錯誤，並睇下控制台同網絡標籤頁。
開發完成後點樣發佈我嘅主題？
如果你希望將主題提交到官方嘅WordPress主題目錄，必須嚴格遵守其主題審核標準，包括代碼質量、安全性、國際化、無障礙性等。你需要仔細閱讀官方手冊。對於自行分發，可以將所有主題檔案打包為ZIP格式，用戶可以直接透過WordPress後台嘅「上傳主題」功能進行安裝。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。