大家好,我是 Eric。
昨天我們用 JavaScript 的編碼標準為當代網站開發的三大基礎收尾,今天,我們要進入「WordPress 客製化」的正題。
當你在網路上搜尋 WordPress 客製化,或是 WordPress Customization 時,大部分的教學都會包含這段話:
將上述的程式碼片段放入佈景主題的 functions.php 中。
Put the snippets above in your functions.php file of your theme.
這句話只對了一半。
WordPress 的更新方式,從核心到佈景主題、外掛,都遵循同一個流程:下載壓縮檔,刪除舊版資料夾,解壓縮新版檔案。換句話說,如果今天直接將程式碼片段放在佈景主題的 functions.php 中,當你下次更新佈景主題時,一切都會歸零。
為此,WordPress 提供一套佈景主題的機制:子佈景主題。如果要將網路上的程式碼片段放入 functions.php 中,建議將這些程式碼片段加入子佈景主題的 functions.php,這樣就可以在上層佈景主題更新時,維持自己客製化的主題。
根據 WordPress 的開發文件,子佈景主題作為「佈景主題」,一樣必須要有 style.css 這個檔案。除了一般 style.css 中的檔案標頭外,我們需要額外增加一個 template
標頭,用來標示上層佈景主題。我們一樣以 Twenty Twenty 為例:
/*
Theme Name: Twenty Twenty Child
Theme URI: https://example.com/twenty-twenty-child/
Description: Twenty Twenty Child Theme
Author: Eric Chuang
Author URI: https://example.com
Template: twentytwenty
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentytwenty-child
*/
關於載入子佈景主題樣式的方法,必須先檢視上層佈景主題是用哪種方法載入樣式表,並將下列的程式碼片段加入子佈景主題的 functions.php 中:
/** 上層佈景主題使用 get_template 載入樣式表 */
add_action( 'wp_enqueue_scripts', 'parent_get_template_styles' );
function parent_get_template_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'parenthandle' ) ); // 上層佈景主題的代稱
}
/** 上層佈景主題使用 get_stylesheet 載入樣式表 */
add_action( 'wp_enqueue_scripts', 'parent_get_stylesheet_styles' );
function parent_get_stylesheet_styles() {
$parenthandle = 'parent-style'; // 上層佈景主題代稱
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ) );
}
將樣式表載入完畢後,接下來只要按照上層佈景主題的架構,存放個別範本檔,如 header.php、footer.php 等,便能取代上層佈景主題的樣式。
關於子佈景主題的建立方式,可以參考社群夥伴 Max 的這篇文章。透過文章中介紹的外掛 Child Theme Configurator,便能很輕鬆的省略省略前述的步驟。
PHP 在網站開發中是一種常見的程式語言,用以跟伺服器進行溝通。既然是程式語言,我們可以回頭參考我們在 JavaScript 篇章提過的變數與函式。這邊會用同樣的內容架構說明類似的概念。
在 PHP 中,定義變數的方法是 $
。
global $global; // 定義全域變數,供跨檔案存取
$name = 'Eric';
$number = 1;
$arr = array(
'name' => 'Eric',
'number' => 1,
);
PHP 的函式寫法與 JavaScript 相同 (事實上,幾乎所有的程式語言都相同):
function 函式名稱 ( 參數 ) {
/** 運算式 */
return 回傳值;
}
函式名稱 | 功能
-------+-------
var_dump( 變數 ); | 用來偵錯用,會回傳未經格式化過的變數值。
preg_match( '規則運算式模式', '字串' ) | 透過規則運算式來比對特定字串。
sprintf( '字串', 變數 ... ) | 格式化字串。會透過預留位置 (placeholder) 的方式將變數放入字串中。
echo | 用來輸出字串,通常會與 printf 或 sprintf 搭配,以輸出字串。
function_exists( '函式名稱' ) | 用來檢查函式是否存在,常用於子佈景主題,以及檢驗特定函式是否存在 (如 Advanced Custom Fields 的 get_field()
)。
更多的 PHP 函式,可以參考 PHP 的官方網站。
在 WordPress 當中,有許多現成的函式,提供強大的功能。譬如我們在進入 PHP 篇章前,便已經廣泛提到的 wp_enqueue_style
與 wp_enqueue_script
。
在接下來的內容中,我們會更進一步使用各種 WordPress 函式來探討網站的客製化。
除了直接在子佈景主題的 PHP 檔案中,直接加入 PHP 的語法外,另一種嵌入客製化程式碼片段的方式,是透過 Code Snippets 這款外掛。
相較於子佈景主題的方式,Code Snippets 可以將客製化的程式碼片段集中管理,獨立於佈景主題之外,同時可以匯出當前的程式碼片段,供其他專案使用。
今天我們開始進入客製化的另一個篇章,接下來的內容,我們將會結合 WordPress 的 PHP 函式與物件,搭配前面 HTML + CSS + JavaScript 的基礎概念,為自己的網站增加各種客製化功能。
下一章,我們將介紹 WordPress 客製化相當重要的一個觀念:勾點 (hook)。