准备工作与环境搭建
在開始編寫程式碼之前,一個穩定且高效的本地開發環境至關重要。這不僅能讓你離線工作,還能避免在線上伺服器直接操作帶來的風險。首先,你需要安裝一個本地伺服器環境,例如 XAMPP、MAMP 或更專業的 Local by Flywheel。這些工具會為你配置好 Apache、MySQL 和 PHP,這是執行 WordPress 的基石。
接下來,你需要下載最新的 WordPress 核心檔案,並將其安裝到本地伺服器中。完成基礎安裝後,就可以著手建立你的主題目錄了。所有 WordPress 主題都位於 /wp-content/themes/ 目錄下。請在此處建立一個新的資料夾,例如 my-first-theme。這個資料夾的名稱就是你的主題標識。
一個有效的 WordPress 主題至少需要兩個核心檔案:style.css 以及 index.php。style.css 不僅是樣式表,更是一個主題的“身份證”,其檔案頭註釋包含了主題的所有元資訊。
推荐阅读 打造专业网站:从零开始开发一个自定义WordPress主题的完整指南。
主題樣式表文件頭資訊
style.css 檔案的開頭必須包含一段特定的 CSS 註釋,用於向 WordPress 描述你的主題。這些資訊會顯示在後臺的“外觀”->“主題”管理頁面中。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习 WordPress 主题开发的简单定制主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/ 其中,Text Domain 用於國際化,應與你的主題資料夾名稱保持一致。而 index.php 是主題的預設模板檔案,是所有頁面的後備模板。最初,它可以只是一個簡單的 HTML 結構,用於測試主題是否被 WordPress 正確識別。
理解模板層級與建立核心模板
WordPress 使用一套名為“模板層級”的智慧系統來決定為特定的頁面請求載入哪個模板檔案。理解這套規則是主題開發的核心。簡單來說,當用戶訪問一個頁面時,WordPress 會按照從最具體到最通用的順序尋找對應的模板檔案。
例如,當訪問一篇 ID 為 5 的部落格文章時,WordPress 會依次尋找:single-post-5.php -> single-post.php -> single.php -> singular.php -> 最後才是 index.php。如果找到了匹配的檔案,就會使用它;否則,會繼續向下尋找。
建立文章單頁模板
single.php 是用於顯示單篇部落格文章的標準模板。在這個檔案中,你將使用一系列 WordPress 核心的模板標籤和函式來輸出文章內容。
推荐阅读 入门级WordPress主题开发:从零到一搭建你的第一个主题。
<main id="primary" class="site-main">
<article id="post-<?php the_ID(); ?>" no numeric noise key 1008>
<header class="entry-header">
<h1 class="entry-title"></h1>
<div class="entry-meta">
发布于:<?php the_date(); ?> | 作者:<?php the_author(); ?>
</div>
</header>
<div class="entry-content">
</div>
<footer class="entry-footer">
<?php the_tags('标签:', ', ', '<br>'); ?>
</footer>
</article>
<?php
// 输出上一篇、下一篇文章导航
the_post_navigation();
endwhile;
?>
</main> 這個模板使用了 the_post() 來設定全域性 $post 變數,然後透過 the_title()、the_content() 等函式輸出文章資料。同時,它引入了模板部件:get_header(), get_sidebar(), get_footer()。
建立頁面模板
page.php 模板用於顯示靜態頁面。它的結構與 single.php 類似,但通常不包含分類、標籤等典型的文章元資料。你可以根據需要建立更多特定頁面模板,例如為“關於我們”頁面建立一個名為 page-about.php 的檔案,WordPress 會自動將其應用於標題或別名(slug)為“about”的頁面。
整合模板部件與導航選單
為了保持程式碼的模組化和可重用性,WordPress 主題通常將頁頭、頁尾、側邊欄等部分拆分為獨立的“模板部件”檔案。透過使用 get_template_part() 函式,你可以在不同模板中輕鬆引入這些部件。
構建主題的頭部檔案
header.php 檔案包含了 HTML 文件的頭部( 區域)以及網站頂部的可視部分,如 logo 和主導航。
<!DOCTYPE html>
<html no numeric noise key 1010>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1007>
<header id="masthead" class="site-header">
<div class="site-branding">
<h1 class="site-title"><a href="/zh-tw/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p class="site-description"></p>
</div>
<nav id="site-navigation" class="main-navigation">
'menu-primary',
'menu_id' => 'primary-menu',
'container' => false,
)
);
?>
</nav>
</header> 關鍵函式 wp_head() 允許 WordPress 核心、外掛和其他指令碼向頁面頭部新增必要的程式碼(如 CSS、JS 連結)。wp_nav_menu() 函式用於輸出一個已註冊的導航選單。
註冊導航選單位置
導航選單需要先在主題中“註冊”位置,使用者才能在後臺的“外觀”->“選單”中分配選單。這通常在主題的 functions.php 檔案中完成。
推荐阅读 零基础学习WordPress主题开发:打造个性化网站的完整指南。
function my_first_theme_setup() {
// 注册一个主导航菜单
register_nav_menus(
array(
'menu-primary' => esc_html__( '主导航', 'my-first-theme' ),
'menu-footer' => esc_html__( '页脚导航', 'my-first-theme' ),
)
);
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 支持文章和评论的 RSS feed 链接
add_theme_support( 'automatic-feed-links' );
// 支持标题标签功能
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' ); register_nav_menus() 函式註冊了兩個選單位置。透過 add_theme_support() 函式,我們啟用了自定義 Logo、標題標籤等特性,這是現代 WordPress 主題開發的標準做法。
主題功能與樣式進階
functions.php 檔案是你的主題“控制中心”,用於新增功能、修改預設行為、載入指令碼和樣式表。它與外掛的作用類似,但專門作用於你的主題。
安全地引入樣式與指令碼
正確的樣式和指令碼載入方式是使用 wp_enqueue_style() 以及 wp_enqueue_script() 创建一个函数,并将其挂载到 wp_enqueue_scripts 這個動作鉤子上。
function my_first_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义 JavaScript 文件
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' ); 這種方式確保了依賴關係正確,並且避免了重複載入。函式 get_stylesheet_uri() 返回主 style.css 的 URL,而 get_template_directory_uri() 返回主題目錄的 URL。
建立側邊欄小工具區域
小工具區域(Sidebar)允許使用者通過後臺拖拽的方式自定義內容區塊。註冊一個小工具區域同樣在 functions.php 中完成。
function my_first_theme_widgets_init() {
register_sidebar(
array(
'name' => esc_html__( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', '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 模板部件中使用 dynamic_sidebar( 'sidebar-1' ) 函式來輸出這個區域了。
总结
本指南系統地介紹了 WordPress 主題開發的核心流程。從搭建本地開發環境、建立基本主題檔案,到理解並實現 WordPress 強大的模板層級系統,再到整合模板部件、註冊導航選單和小工具區域,並最終在 functions.php 中安全地擴充套件主題功能。遵循這些步驟,你已經成功構建了一個結構清晰、功能完整且符合 WordPress 編碼標準的自定義主題。這為你日後開發更復雜、功能更豐富的主題奠定了堅實的基礎。記住,主題開發是一個持續學習的過程,不斷實踐並參考官方文件是提升技能的關鍵。
常见问题解答(FAQ)
### 什麼是 WordPress 模板層級?
模板層級是 WordPress 用來決定不同型別頁面使用哪個模板檔案的一套規則。它是一個從具體到通用的查詢順序。例如,對於一篇特定的文章,WordPress 會優先尋找與該文章ID或文章型別匹配的特定模板,如果找不到,則逐級回退到更通用的模板,直到最後的 index.php。理解層級關係對於建立結構正確的主題至關重要。
為什麼必須使用 wp_enqueue_style 來載入樣式?
使用
(注:此处"使用"指的是某种产品或服务的使用情况) wp_enqueue_style() 以及 wp_enqueue_script() 是 WordPress 官方推薦的、標準化的資源載入方式。它能正確處理依賴關係(例如確保 jQuery 在自定義指令碼之前載入),避免同一資源被重複載入,並且與快取外掛、子主題等生態系統良好相容。直接在模板檔案中使用 或者 標籤是一種不推薦的做法。
functions.php 檔案與外掛有什麼區別?
functions.php 檔案是主題的一部分,其功能隨主題的啟用而啟用,隨主題的切換而失效。它主要用於新增與該主題視覺表現和功能緊密相關的特性。而外掛提供的功能通常獨立於主題,即使更換主題,外掛功能依然存在。一般來說,如果某個功能與主題的樣式或佈局強相關,可以放在 functions.php;如果它是通用功能,則更適合做成外掛。
怎样让我的主题支持多语言(国际化)?
讓主題支援多語言,即國際化(i18n),主要涉及以下幾個步驟:首先,在 style.css 的頭部和所有 load_theme_textdomain() 呼叫中正確設定 Text Domain。其次,在 functions.php 中呼叫 load_theme_textdomain() 函式來指定語言檔案目錄。最後,也是最關鍵的一步,在主題的所有 PHP 模板檔案和 functions.php 中,對所有面向用戶的字串使用 WordPress 的翻譯函式進行包裝,例如 esc_html__( ‘文本’, ‘my-first-theme’ ) 或者 _e( ‘文本’, ‘my-first-theme’ )。完成後,可以使用 Poedit 等工具生成 .pot 模板檔案,供翻譯人員建立不同語言的 .po 以及 .mo 文件。
下一步,该怎么做呢?
延伸阅读与实用知识
下方列出的内容与本文主题相关,适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读,然后逐步扩展到相关主题,这样效果通常会更好。