如何在 WordPress 頁面上寫 PHP 程式碼?快速理解 WP 客製的第一步!


作者: | 2019/12/30 | 9 則迴響


「我要怎麼在 WordPress 頁面加上我的程式碼?」這是多年前我第一次安裝完 WordPress 後,看著後台頁面編輯器時心中所想的第一個問題。

如果你跟那時候的我一樣,略懂 PHP 程式碼,想開始客製 WordPress,寫點 PHP code,還沒有打算深入研究,只想快點進入狀況,那這篇文章就是為你而寫的。

不要修改 WordPress 核心檔案

首先,任何情況下你都不要去修改 WordPress 的核心檔案,也就是你下載 WordPress 解壓後,wp-content/ 目錄以外任何地方的「程式碼」都不應該被更改 (wp-config.php 裡的設定可修改,但它就是作為設定用),因為你改了核心檔案,之後你的網站 WordPress 要升級,就會把你修改的核心檔案都蓋掉,所以這不是一個正確的客製方式。所有 WordPress 客製的東西,大概都是存放在 wp-content/ 底下,因此若要備份你辛苦客製的程式碼,就可以先從 wp-content 來備起。

後台寫內容,前台透過佈景檔案呈現

一開始你可以把 WordPress 粗淺理解區分為「前台」和「後台」,後台 (就是 wp-admin/) 可以讓你寫入內容存到資料庫以及上傳檔案到主機。一般而言,WP 會把後台上傳的圖片放到 wp-content/uploads/ 下,前台負責顯示資料庫裡的內容和 /wp-content/uploads/ 裡的圖片。而前台版面的顯示方式,就是由「佈景主題」(themes) 來負責,看你在後台設定的是哪個佈景主題,對應到的就是 wp-content/themes/ 下的哪個主題目錄。

所以你要在頁面上執行你要執行的 PHP code,第一步你應該要從 wp-content/themes/你的主題目錄/ 裡的程式碼來研究。進入佈景主題的目錄後,你會看到很多佈景檔案,那到底這些檔案都負責做些什麼事呢?

Template Hierarchy 說明

要理解 WordPress 的佈景檔案的載入邏輯,就要先理解官方這篇 Template Hierarchy 圖文說明,但是官方的圖非常大張,不適合快速入門,所以我把 Template Hierarchy 這張圖簡化,只談最常見的 Archive (彙整頁) 和 Singular Page (單頁),如此比較方便說明:

我們來看圖說故事,相信你就能快速理解。

這張圖要先從左邊開始看起。當訪客進入一個 WordPress 網站時,WordPress 會以「網址」來判斷你正要開啟的是「哪一種」頁面,比方你現在正在看我寫的這篇文章,它就是屬於 Template Hierarchy 最左邊的 Singular Page (單頁) 其中的 Blog Post (文章),其內容也就是對應到後台的「文章」。

WordPress 在你開啟文章頁面時的預設行為之一,就是會先幫你下 SQL 指令撈出這個頁面需要的資料 (The Loop),所以你在修改版型檔的時候,通常就是寫一個迴圈,直接把撈到的資料拿來排版,所以你暫時先不用擔心連線資料庫和取得資料的事。

當你在瀏覽器輸入本篇文章的網址後,WordPress 就會判斷這是一篇 Singular Page (單頁),而且是 Blog Post (文章),所以它就會由 Template Hierarchy 的左邊開始往右邊尋找對應的 .php 模版檔,它會先找看看 /wp-content/themes/你的佈景主題/ 底下有沒有 single-post.php 這個檔案,如果有,它就會使用這個 .php 檔來顯示你的文章,如果找不到 single-post.php (像我的佈景就沒有這個檔案),它就會再往右邊找看你的佈景主題有沒有準備  single.php、singular.php,邏輯依舊是「有就使用,沒有就再往右找」。 我的佈景有 single.php,所以就會套用它,並且結束向右尋找 PHP 版型檔的流程。

看到圖的最右邊你會發現所有類型的頁面,最終都是流向 index.php,這表示你的佈景裡至少要準備 index.php,通常它會是一個比較通用形式的版面,如果佈景主題本身比較無聊,沒有太多種花俏的排版和樣式,通常裡頭準備的檔案就不會太多種,理論上最無聊的佈景主題,也可以只有 index.php 一個 php 版型檔。

而 Archive Page (彙整頁),就是分類、標籤這種「彙整、列表」形式的頁面,也就是當你點下任何一種文章分類連結、標籤連結之後,會條列出文章的頁面。你一樣可以透過 Template Hierarchy 的流程,從右至左來找出你想修改的目標 PHP 檔案,這裡就不贅言囉。在你了解怎麼看簡化版的 Template Hierarchy 之後,接著就可以看看官方 Template Hierarchy 完整版本的說明了,如此就能很直觀的把你想客製的程式碼放到正確的佈景檔案上,也就開始了客製的第一步了。

讓你直接在後台寫 PHP code 的外掛

也許你會找到一些外掛可以讓你直接在後台編輯器寫上你的 PHP 程式碼,但如果你對 WordPress 還不夠了解,通常不建議冒然使用這種方式,因為你可能還不知道這種方式會面臨哪些風險,也無法判斷是不是符合你的使用情境,我覺得先從了解原理來下手還是比較踏實的。

下一步

當你有了 Template Hierarchy 的概念後,就可以去探索其他我的簡化圖裡沒有的 template,像是 Custom Post Type (自訂文章型別),就是一個能擴張更多文章類型的工具 ,若你還想更進一步了解客製 WordPress 的方式,建議你可以研究 WordPress Hook 機制,這是一個可以讓客製程式碼系統化及規模化的工具,也是前往 WordPress 外掛開發的必經之路。


標籤:, ,

分類:

本文作者是Audi Lu

9 則留言

  • Zoe says:

    前幾天爬文 WP 爬到這裡, 去年到現在, 我始終沒找到用 WP 建立網站的人, 不知道未來是否會有機會撰寫此類的文章, 傳授如何尋找或是分享推薦有實力的 WP 高手呢? 謝謝.

  • k says:

    您好,我想請問一下WP原始碼編輯頁面要怎麼切換即時預覽及時修改的頁面,謝謝!

  • 檸檬 says:

    您好,最近剛應徵一家公司,他們之前有請別的公司幫忙製作網站(也就是wp),我們有wp 後台的帳密權限,可是我要如何將這網站匯入到mamp呢?不知道是否能詢問,已經找了很多從零到有的文章跟影片,卻沒有接手別人網站的導入方式

    • Audi Lu says:

      Hi 您好,
      你可以找一下關鍵字「WordPress 搬家」或「WordPress migration」研究一下作法,我簡述一下方法。
      大致是這2個步驟:
      1. 將「資料庫」裡資料匯出,把裡面的網址取代成你在 mamp 要用的網址,如果是本機大概就會是 http://localhost 之類,然後再匯入 mamp 的 mysql。
      2. 將「wp-content/」目錄下的目錄和程式檔案複製一份,放到 mamp 的網站對應目錄下。
      不過現在很多外掛會幫忙做這些事,你可以再研究一下,或者到 FB 社團「WordPress Taiwan 正體中文社團」(https://www.facebook.com/groups/wordpresstw) 來發問討論。

  • Cathy says:

    不好意思!請問修改PHP是否要是商務版的才能夠修改?

    • Audi Lu says:

      文章寫得是針對 wordpress.org,是下載程式自己架站的版本。你用的應該是 wordpress.com ,如果是的話確實要商務版,但客製程度還是比較有限的。

  • Jaden says:

    我在Web被使用別人的網站模板,但創作者是外國人,他的模板是英語,有沒有方法可以把他的網站的模板改成中文

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料