12 mins read ‧ 2022/07/11 普

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

---

什麼是覆寫( Override )機制？

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

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

 

WordPress 預設的覆寫( Override )機制

看懂 WordPress 主題的目錄結構

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

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

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

 

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

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

 

創建子主題( 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 )機制