開始前嘅準備工作
喺開始寫任何code之前,要確保開發環境已經準備好。首先,你需要一個本地伺服器環境,例如XAMPP、MAMP或者用Docker。其次,一個code編輯器係必不可少嘅,Visual Studio Code或者PHPStorm都係唔錯嘅選擇。最緊要係,你需要安裝最新版本嘅WordPress,同埋確保佢運行正常。
跟住,喺你WordPress安裝目錄下嘅wp-content/themes喺資料夾入面,開一個新嘅資料夾,呢個就會係你嘅主題目錄。例如,你可以將佢命名做my-first-theme。呢個目錄嘅名會直接成為你嘅主題識別符,所以建議用細楷字母、數字同埋連字號。
喺主題資料夾入面,有兩個檔案係啟動一個WordPress主題所必需同埋最低限度嘅:style.css同埋index.php冇咗佢哋,WordPress就唔能夠喺後台嘅「外觀」->「主題」列表度識別你嘅主題。
推薦閱讀 從零開始學習WordPress主題開發:打造個人化網站的完整指南。
理解主題嘅核心文件結構
一個功能完整嘅WordPress主題由一系列模板檔案組成,佢哋跟住特定嘅命名慣例。每個檔案負責渲染網站嘅唔同部分。
樣式表同主題資訊聲明
style.css檔案唔單止係用嚟寫CSS樣式,佢嘅頭部註釋區域更加係WordPress用嚟讀取主題元數據(meta data)嘅地方。呢個區域一定要喺檔案嘅最頂部,並且要跟住特定嘅格式。
/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/ “「Text Domain」用於國際化,係之後加載翻譯檔案嘅關鍵標識。填完呢啲資料之後,重新整理WordPress後台嘅主題頁面,你應該就睇到一個叫做「我嘅第一個主題」嘅縮略圖喇。
主模板檔案嘅作用
index.php係你主題嘅主模板檔案,亦都係網站默認嘅「後備」模板。當WordPress搵唔到更具體嘅模板檔案(例如single.php或page.php)嗰陣,就會用到index.php。佢最基本嘅結構係調用WordPress嘅頭部、主循環內容同埋尾部。
<?php get_header(); ?>
<main id="main">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 输出文章内容
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>没有找到任何文章。</p>';
endif;
?>
</main>
<?php get_footer(); ?> 擴展基礎模板同引入功能
僅有index.php、style.css係唔夠嘅,我哋需要將頭部、尾部同側邊欄等部分分開,令結構更加清晰,並且引入主題嘅核心功能。
推薦閱讀 從零開始:手把手教你開發一個自訂嘅WordPress主題。
分離頁頭同頁尾範本
創建header.php檔案,佢包含文檔類型聲明、HTML嘅部分以及網站嘅標題同導航區域。使用wp_head()掛鉤以確保插件同WordPress核心能夠正確注入必要嘅腳本同樣式。
<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<?php wp_body_open(); ?>
<header>
<h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header> 創建footer.php文件,包含網站嘅頁尾資訊,並喺最後調用wp_footer()鉤子。
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html> 咁樣,喺index.php入面,我哋就可以用get_header()同埋get_footer()函數嚟引入佢哋。
創建功能文件
functions.php係主題嘅「大腦」,用嚟加功能、註冊菜單、啟用特色圖像、定義側邊欄等等。佢唔係一個模板檔案,而係一個喺主題初始化時自動載入嘅PHP檔案。
下面係functions.php嘅一個基礎示例:
<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置
function my_first_theme_register_menus() {
register_nav_menus(
array(
'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
)
);
}
add_action( 'init', 'my_first_theme_register_menus' );
// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 引入一个自定义的JavaScript文件
wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?> 整更多模板檔案
為咗令唔同類型嘅頁面有更合適嘅佈局,我哋需要創建更多專門嘅模板檔案。
推薦閱讀 從安裝到精通:WordPress 建站完整指南同實用技巧全解析。
文章單頁同頁面模板
single.php用嚟渲染單篇博客文章。佢嘅結構同index.php類似,但通常包含評論模板comments.php嘅調用。
page.php用嚟渲染靜態頁面。佢通常唔會顯示分類、標籤等元數據,而更專注於頁面內容本身。
文章歸檔列表模板
archive.php用嚟顯示分類、標籤、作者、日期等歸檔頁面。你可以使用條件標籤如is_category()、is_tag()嚟區分唔同嘅歸檔類型,並顯示相應嘅標題。
建立404錯誤頁面
404.php係當用戶訪問唔存在嘅URL時顯示嘅頁面。一個好嘅404頁面應該包含友善嘅提示、搜尋框同主要頁面嘅連結,幫助用戶搵到所需內容。
摘要
透過呢個指南,你完成咗由建立資料夾同核心檔案,到理解模板層次結構,再到擴展主題功能同建立專用模板嘅完整流程。你已經建立咗一個具備基本結構、可被WordPress識別並擁有擴展功能嘅主題。雖然佢睇落簡單,但已經包含咗所有核心概念。接下來,你可以深入學習模板標籤、自訂查詢、WordPress循環嘅更多用法,以及點樣建立自訂文章類型同主題自訂器選項,令你嘅主題功能更加強大同個人化。
常見問題
### 點解我嘅主題冇喺WordPress後台顯示?
請首先檢查你嘅主題文件夾係咪擺喺正確wp-content/themes/目錄下。其次,確認文件夾內係咪包含必需嘅style.css同埋index.php文件。最後,打開style.css文件,確保頂部嘅主題信息註釋塊格式完全正確,尤其係Theme Name:呢一行。
點樣為我嘅主題加自訂Logo支援?
你需要喺主題嘅functions.php檔案入面加一行代碼嚟啟用呢個功能。用add_theme_support( ‘custom-logo’ )函數。啟用咗之後,用戶就可以喺「外觀」->「自訂」->「網站身份」度上傳同設定Logo喇。你仲需要喺header.php入面合適嘅位置用the_custom_logo()函數嚟顯示佢。
主題嘅functions.php檔案同插件有咩分別?
functions.php入面嘅功能係同而家用緊嘅主題緊密綁連嘅。如果你轉咗主題,呢啲功能就會用唔到。而插件嘅功能就係獨立於主題嘅,無論用緊邊個主題,只要插件係啟動狀態,佢嘅功能就會生效。所以,如果你嘅功能係同主題嘅視覺呈現(例如註冊菜單位置、定義佈局)好有關係,就可以擺喺functions.php入面;如果係通用功能(例如聯絡表格、SEO優化),就更加適合整成插件。
點樣令我嘅主題支援多語言?
你需要做好兩件事。第一,喺開發嗰陣,對所有面向用戶嘅字串用翻譯函數包住,例如__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ ),並確保‘my-first-theme’与style.css入面聲明嘅「Text Domain」一致。第二,用好似Poedit呢類工具,從你嘅主題代碼入面提取所有需要翻譯嘅字串,生成.pot文件,再由翻譯人員創建對應語言嘅.po同埋編譯好嘅.mo文件,並擺喺主題嘅/languages/目錄下。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。