12 mins read2022/07/11

利用 WordPress 版型覆寫機制( Override ),客製化任何畫面 #1


什麼是覆寫( Override )機制?

覆寫( Override )機制是我最常用來客製化 WordPress 版面的機制之一( 另一個最常用的是 Hooks )

一句話講完就是:用來客製化 php 版型( 把原本的 php 版型覆蓋掉 )

 

WordPress 預設的覆寫( Override )機制

看懂 WordPress 主題的目錄結構

我們以比較多人使用的主題 Astra 主題來做為案例

Astra wordpress theme
Astra 主題目錄結構

基本上一個正常的主題,主要都會有包含以下檔案,其中.php 的檔案,大多為版型

說明如下,⭐是比較常用到的

檔案名稱 說明
404.php 找不到頁面時的版型
archive.php ⭐ 彙整頁( 就是文章的分類/標籤頁面 )的版型
comments.php 留言的版型
footer.php ⭐ Footer版型
functions.php ⭐ 這個不是版型,這是主題底下的函式檔,可以寫一些自訂的函式/功能/Hooks
header.php ⭐ Header版型
index.php 入口文件,如果你首頁不是套用到”特定頁面”而是”最新文章”時,就會使用此版型
page.php ⭐ 所有頁面的版型
search.php 搜尋結果版型
searchform.php 搜尋輸入框的版型
sidebar.php 側邊欄版型
single.php ⭐ 文章內頁版型

 

有些人可能會疑惑,那其他那些資料夾呢?又是什麼用途呢?

ℹ️ 雖然不是本文版型覆寫( Override )的重點,但還是簡單提一下

目錄名稱 說明
assets ⭐ 存放主題靜態資產 css, javascript, image, font 等檔案
inc / includes 主題的核心檔案,通常是放函式( function )定義與類( class )定義
language 語言模板多語系檔案 .pot / .po 檔
template-parts 有時候版型會再細分成多種不同的版型或者區塊,會存放在這裡,並依照不同邏輯來使用

 

創建子主題( child-theme )

在實現覆寫( Override )之前,我們必須先創建一個子主題( child-theme )

Astra 可以再其官方網站上創建後下載,其他主題可以參考 WordPress 官方手冊

有空再寫中文教學,如何創建子主題( child-theme )

upload wordpress child theme
上傳子主題 zip 檔

上傳後請直接啟用

 

為什麼需要子主題( child-theme )?

試想你是一個 php 程式高手,花了3天3夜直接在 Astra 主題目錄下寫了超多客製化代碼

結果有一天 Astra 通知你,有新版本可以更新,推出 5.0 版本,有超多超強新功能,你看了很心動,你就更新

你一更新,其實就是會把 Astra 主題目錄底下的檔案洗掉,換成 Astra 5.0 版本的代碼

然後你就會發現你之前辛辛苦苦寫的代碼全部不見了

黑人哭哭

因此我們最好把我們客製化的代碼寫在子主題( child-theme )內

子主題( child-theme )是由我們完全控制的,並不會隨著 Astra 主題更新而把代碼洗掉

 

如何覆寫 WordPress 預設版型

 

WordPress 子主題客製
現在我們的主題應該會長這樣

你啟用子主題後,應該不會覺得有什麼不同

只要你有啟用子主題( child-theme )的情況下:

⚡ WordPress 會先去子主題( astra-child )底下找版型,如果找不到,才會去母主題( astra )找

⚡ WordPress 會先去子主題( astra-child )底下找版型,如果找不到,才會去母主題( astra )找

⚡ WordPress 會先去子主題( astra-child )底下找版型,如果找不到,才會去母主題( astra )找

整篇文章最重要的文字在這,很重要,講三遍

 

你可以試著把母主題( astra )目錄底下的 page.php 複製到子主題( astra-child )底下,然後隨便打一些文字

override template
把 page.php 複製到子主題中
override template
前台畫面會顯示你剛剛打的資訊

這樣就證明,頁面版型有吃到子主題( astra-child )底下的 page.php

接下來,就輪到你發揮創意了!

你可以自由發揮在覆寫版型中編寫 HTML, CSS, Javascript, php自訂邏輯等…

 

結語

版型覆寫的優點

因為我們可能要經常針對不同的 post_type 或者不同的頁面去做不同程度的客製化以及不同的判斷規則邏輯,這時候版型覆寫機制帶給我們很大的便利

只要能夠掌握版型覆寫以及 Hooks 的使用,就用 WordPress 做出任何想要的客製化任何應用WordPress as Anything

即便是超高複雜互動的網頁,也可以透過版型覆寫來引入前端框架或者使用 Headless WordPress 來實現

 

版型覆寫的門檻

⚠️ 您必須至少熟悉 HTML, CSS, php,如果能熟悉 Javascript, jQuery 就可以做出更複雜的互動

 

下集待續:Woocommerce 預設的覆寫( Override )機制

 

覺得不錯的話,請給我點個推薦

您的支持與鼓勵是我們前進的最大動力!