12 mins read ‧ 2022/07/11 普
利用 WordPress 版型覆寫機制( Override ),客製化任何畫面 #1
Table of Contents
什麼是覆寫( Override )機制?
覆寫( Override )機制是我最常用來客製化 WordPress 版面的機制之一( 另一個最常用的是 Hooks )
一句話講完就是:用來客製化 php 版型( 把原本的 php 版型覆蓋掉 )
WordPress 預設的覆寫( Override )機制
看懂 WordPress 主題的目錄結構
我們以比較多人使用的主題 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 )
上傳後請直接啟用
為什麼需要子主題( child-theme )?
試想你是一個 php 程式高手,花了3天3夜直接在 Astra 主題目錄下寫了超多客製化代碼
結果有一天 Astra 通知你,有新版本可以更新,推出 5.0 版本,有超多超強新功能,你看了很心動,你就更新了
你一更新,其實就是會把 Astra 主題目錄底下的檔案洗掉,換成 Astra 5.0 版本的代碼
然後你就會發現你之前辛辛苦苦寫的代碼全部不見了
因此我們最好把我們客製化的代碼寫在子主題( child-theme )內
子主題( child-theme )是由我們完全控制的,並不會隨著 Astra 主題更新而把代碼洗掉
如何覆寫 WordPress 預設版型
你啟用子主題後,應該不會覺得有什麼不同
只要你有啟用子主題( child-theme )的情況下:
⚡ WordPress 會先去子主題( astra-child )底下找版型,如果找不到,才會去母主題( astra )找
⚡ WordPress 會先去子主題( astra-child )底下找版型,如果找不到,才會去母主題( astra )找
⚡ WordPress 會先去子主題( astra-child )底下找版型,如果找不到,才會去母主題( astra )找
整篇文章最重要的文字在這,很重要,講三遍
你可以試著把母主題( astra )目錄底下的 page.php 複製到子主題( astra-child )底下,然後隨便打一些文字
這樣就證明,頁面版型有吃到子主題( astra-child )底下的 page.php
接下來,就輪到你發揮創意了!
你可以自由發揮在覆寫版型中編寫 HTML, CSS, Javascript, php自訂邏輯等…
結語
版型覆寫的優點
因為我們可能要經常針對不同的 post_type
或者不同的頁面去做不同程度的客製化以及不同的判斷規則邏輯,這時候版型覆寫機制帶給我們很大的便利
只要能夠掌握版型覆寫以及 Hooks 的使用,就用 WordPress 做出任何想要的客製化、任何應用, WordPress as Anything
即便是超高複雜互動的網頁,也可以透過版型覆寫來引入前端框架或者使用 Headless WordPress 來實現
版型覆寫的門檻
⚠️ 您必須至少熟悉 HTML
, CSS
, php
,如果能熟悉 Javascript
, jQuery
就可以做出更複雜的互動
下集待續:Woocommerce 預設的覆寫( Override )機制
覺得不錯的話,請給我點個推薦
您的支持與鼓勵是我們前進的最大動力!