什麼是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">
</head>
<body no numeric noise key 1011>
<header>
<h1><a href="/zh-tw/</?php echo esc_url(home_url('/')); ?>"></a></h1>
<p></p>
</header>
<main>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<article>
<h2><a href="/zh-tw/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
<?php
endwhile;
else :
echo '<p>没有找到内容。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</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塊編輯器支援等更復雜的領域，從而打造出真正滿足個性化需求的專業網站。
常见问题解答（FAQ）
### 主题开发必须从零开始吗？
不一定。你可以選擇基於一個現有的、輕量級的“啟動主題”（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後臺的“上傳主題”功能進行安裝。
下一步，该怎么做呢？
延伸阅读与实用知识
下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。