WordPress 主題編輯器 – 修改後自動更新 css js

Introduction

有使用 WordPress 的朋友,如果有一點 coding 基礎,相信都會希望對自己的主題做一些客製化,因此就會使用到 WordPress 主題編輯器 ,像是修改 css 讓文字放大,修改 js 讓某些區塊隱藏等。但在主題編輯器修改了程式,按下了更新,切換到網站頁面,卻發現剛才的修改都沒有生效?你需要加一些東西到 functions.php。

快取(Cache)?

今天即便不是 WordPress,只要是網站要將圖片、字型、js 或 css 等前端資源讀進來,都會牽扯到被快取(cache)的問題,這是因為每次進來同一個網站,都要向網站發出請求,取得大多時候都相同的前端資源,是很耗資源耗流量的,因此快取機制的出現,讓以上的問題被避免。

對看網站的一般使用者很棒,讀網頁又快又省流量,但對於我們開發網站的人來說,我今天只是想要改個字體大小(css),看一下在畫面上呈現是什麼樣子,怎麼改了老半天都像沒改一樣?(沒錯,對網站來說的確都讀同一份 css …)。

因此我們開發者當然也有方法應對,既然是快取是因為「都在讀一樣的檔案」,那我們就「讓檔案變得不一樣」,簡單來講,就是改檔名啦!因為程式不會去看檔案內容有沒有更動,而是直接用檔名是否有變化,來判斷是否要快取。

但改檔名說得簡單,原本叫做 main.css 的檔案,今天改個字體變 main2.css,明天改個顏色變 main3.css,經過頻繁修改的檔案,冒出個幾千隻 css 開頭都是 main,該有多恐怖、多占空間……

main.css
main2.css
main3.css
...
mainWhatever.css

於是我們希望能夠「同一個檔名,但告訴瀏覽器『這是不一樣的』」,解法就是在檔案後面帶參數啦!比如 main.css?ver=1,其中後面的參數也不一定要叫 ver,只要後面那個 1,每次都會往上加,main.css?ver=2main.css?ver=3 ……,就能夠維持同一個檔名,但取到最新的內容。

雖然上述的方法可行,但我個人不太偏愛使用 index (1、2、3) 來當參數,因為這樣我就必須每次修改檔案之前,都要先記下目前的 index 是多少,才會知道修改後,index 有沒有如期往上加。我們今天要加的參數是,任何時候看到,都可以判讀是不是最新版。

避開快取?

打開「主題編輯器」裡面的「佈景函式庫」(function.php),在第一個「<?php」區塊裡面加上這段程式:

function version_id() {
    return date("h:i:s");
}

接著在 function.php 裡面搜尋你的檔案名稱,比如 main.css,(如果沒有就要看是在哪一隻檔案 include 它的)。應該會看到他被包在 wp_enqueue_style 裡面,把這個 wp_enqueue_style  的第五個參數改成 version_id(),(如果是 js 就是 wp_enqueue_script 的第四個參數),按下更新檔案,大功告成。

// css
wp_enqueue_style( 'empathy-main', $theme_directory . '/css/main.css', null, version_id() );
// js
wp_enqueue_script( 'empathy-main', $theme_directory . '/js/main.js', null, version_id(), true );

That’s it!

試著修改 main.css 裡面的 style,到網站打開「開發人員工具」的「Network」頁籤,重新整理看看 main.css 後面是不是帶了一串參數,裡面寫的就是目前的 hh:mm:ss(小時:分鐘:秒數) 哦!

Wordpress 主題編輯器

Note

我們現在刻意繞過快取,不過可別忘了快取機制的初衷, 是要讓使用者更快速看到內容的,所以如果網站已經開發到一個段落,不會再進行頻繁修改,也要記得到 function.php,把最上面那個 version_id 註解掉哦!

function version_id() {
    // return date("h:i:s");
}

另外,可能會有人提議只要將「開發人員工具」的「Network」頁籤上方的「Disable cache」打勾,應該就可以省掉我上述那些步驟,我一開始也這樣認為著,但後來看了 Stackoverflow 的回覆 才知道,這個不是 local 端的 cache,而是 hosting server 端的 cache,會根據 hosting server 不同,需要5~10天的時間,才會 refresh cache,如果等不起的,目前還是只能採取上述的方法哦!

Reference

WPEngineer

Sabrina Zeidan

留個言吧!