iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
自我挑戰組

WordPress 客製化從 0 開始系列 第 20

Day 20 WordPress 客製化從 1 開始:子佈景主題與 PHP

  • 分享至 

  • xImage
  •  

大家好,我是 Eric。

昨天我們用 JavaScript 的編碼標準為當代網站開發的三大基礎收尾,今天,我們要進入「WordPress 客製化」的正題。

子佈景主題 (Child Theme)

當你在網路上搜尋 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 基礎

PHP 在網站開發中是一種常見的程式語言,用以跟伺服器進行溝通。既然是程式語言,我們可以回頭參考我們在 JavaScript 篇章提過的變數與函式。這邊會用同樣的內容架構說明類似的概念。

變數

在 PHP 中,定義變數的方法是 $

global $global; // 定義全域變數,供跨檔案存取
$name = 'Eric';
$number = 1;
$arr = array(
        'name'   => 'Eric',
        'number' => 1,
    );

函式

PHP 的函式寫法與 JavaScript 相同 (事實上,幾乎所有的程式語言都相同):

function 函式名稱 ( 參數 ) {
    /** 運算式 */
    return 回傳值;
}

常用的 PHP 函式

函式名稱 | 功能
-------+-------
var_dump( 變數 ); | 用來偵錯用,會回傳未經格式化過的變數值。
preg_match( '規則運算式模式', '字串' ) | 透過規則運算式來比對特定字串。
sprintf( '字串', 變數 ... ) | 格式化字串。會透過預留位置 (placeholder) 的方式將變數放入字串中。
echo | 用來輸出字串,通常會與 printf 或 sprintf 搭配,以輸出字串。
function_exists( '函式名稱' ) | 用來檢查函式是否存在,常用於子佈景主題,以及檢驗特定函式是否存在 (如 Advanced Custom Fields 的 get_field())。

更多的 PHP 函式,可以參考 PHP 的官方網站

WordPress 函式

在 WordPress 當中,有許多現成的函式,提供強大的功能。譬如我們在進入 PHP 篇章前,便已經廣泛提到的 wp_enqueue_stylewp_enqueue_script
在接下來的內容中,我們會更進一步使用各種 WordPress 函式來探討網站的客製化。

透過 Code Snippets 在網站中插入客製化 PHP 程式碼片段

除了直接在子佈景主題的 PHP 檔案中,直接加入 PHP 的語法外,另一種嵌入客製化程式碼片段的方式,是透過 Code Snippets 這款外掛。
相較於子佈景主題的方式,Code Snippets 可以將客製化的程式碼片段集中管理,獨立於佈景主題之外,同時可以匯出當前的程式碼片段,供其他專案使用。

結語

今天我們開始進入客製化的另一個篇章,接下來的內容,我們將會結合 WordPress 的 PHP 函式與物件,搭配前面 HTML + CSS + JavaScript 的基礎概念,為自己的網站增加各種客製化功能。

下一章,我們將介紹 WordPress 客製化相當重要的一個觀念:勾點 (hook)。


上一篇
Day 19 WordPress 對 JavaScript 的編碼標準
下一篇
Day 21 客製化 WordPress 程式的起點:勾點 (hook)
系列文
WordPress 客製化從 0 開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言