無痛上手 WordPress 樣式客製化

如果你有架設過 WordPress 網站並且購買過國外佈景主題就知道,只要換上了中文內容就會大跑版,不是標題太大就是內文太小,整個排版看起來就是怪,雖然大部分的佈景主題都有提供調整的功能,但光是要找這個設定會影響到頁面中哪個部分就會花上不少時間。

另外一種狀況比較棘手,那就是想要調整一些介面上的細節但佈景主題不支援,這時候去 Google 就會找到一些關於 CSS 的關鍵字,然後照著找到的答案試著調整,有時候運氣好複製貼上就搞定,但如果你不了解 CSS 運作的基本邏輯就很難去做進一步的修改。

我之前寫過「WordPress 佈景主題 CSS 客製化」這篇文章,希望讓不會寫 CSS 但又需要調整一些畫面細節的朋友可以對 CSS 有一些基礎認識後能夠做更進階的調整,文章提到可以把常用的 CSS 屬性寫成自己的 class,這樣就可以在其他地方重複使用,而這也是許多 CSS 框架在做的事情。

全世界市佔率最高的 CSS 框架是 Bootstrap,有許多 WordPress 的佈景主題都是採用這套框架,因此如果你熟悉它的 class 名稱就能很快的設計出標題、段落或是按鈕的樣式,甚至還可以做出許多像是彈跳視窗、輪播等等的互動介面,你只要知道如何寫 HTML 就能實現這些功能。

Bootstrap 我用很多年也用得非常習慣,它是以元件為主的框架,也就是說當你今天用 .btn-primary 來做按鈕的時候它就會給你一個按鈕(廢話),但假設我想要調整這個按鈕的一些細節,像是字級大小或是行高,實作起來會比較麻煩,因為元件的屬性預設都被定義好了,要客製化的話需要重新編譯預設值或是直接用原生的 CSS 去覆寫。

偷懶的我通常都是採用第二種方法,然後有時候發現覆寫不過去就會加入 !important 來挖洞給自己跳,尤其是在修改既有的佈景主題時這樣的作法很容易改東牆壞西牆,維護起來很痛苦,直到後來遇見了新歡就再也回不去 Bootstrap 了。

Tailwind CSS ( 以下簡稱 TW 台灣 ? )相較於 Bootstrap 以元件為核心,TW 的則是以 CSS 的屬性為主,也就是官網所稱的 Utility First,它可以從 class 名稱中非常直觀的看出這個元素所套用的樣式有哪些,我同樣以按鈕來舉例:

Bootstrap

<a href="#" class="btn btn-primary">我是按鈕</a>

Tailwind CSS

<a href="#" class="block bg-blue-500 text-l leading-6 hover:bg-blue-600">我是按鈕</a>

Bootstrap 的 btn-primary 具體會呈現什麼樣的按鈕完全是個謎,你可能要透過檢查元素才知道它使用了哪些屬性,而 TW 的版本我可以直接念出來:「這是一個藍色的按鈕,尺寸大概是中型的,滑鼠停在上面會變深藍色」,透過這樣的敘述就很像平常自己在寫 CSS 的感覺,因此寫起來非常流暢與直覺,但前提是要對於 TW 的 class 名稱稍有認識。

所有的 class 名稱可以在官方文件查詢,因為多到爆炸,所以我都是有用到的再去查就好,邊做邊查久了之後就會慢慢記得了,更完整的中文教學可以參考 2021 年鐵人賽的這篇得獎大作:「排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!」,作者搋兔大大的「搋」念 「ㄔㄨㄞ 」,意思是 Try to~

Tailwind CSS 與 WordPress

目前如果有經手到前端的 WordPress 專案我都會使用 TW 來處理,因為預設的環境設定比較複雜,需要配置 Node.js 環境以及安裝不少套件,我直接採用由 Calvin Brew 所整理的 Starter Theme,然後再其移植到外掛之中,TW 有一個很棒的功能 PurgeCss 可以清除沒有用到的 class,這能讓最後發佈的 CSS 檔小到只有 10kb 左右。

另外還有一套叫做 TailPress,可以直接透過 Composer 安裝,並且提供 CLI 直接建立整合好 TW 的佈景主題,同時還支援區塊編輯器,我自己是還沒試過但如果下次要手刻佈景主題的話我會考慮採用它。會發現這套是因為我本來想取這個名字作為外掛名稱,可惜被捷足先登了XD

事實上我覺得對於設計師來說,與其用 Elmentor 來設計 UI,可以考慮嘗試 TW 看看,TW 可以客製化的程度非常高,而且生態系越來越豐富,除了有很多 HTML 的範本外,市面上也有許多視覺化工具可以讓設計師先快速堆疊出基本的內容後再進入細節的修改,像是:ShuffleWindframeTails 等等,將產出的 HTML 複製進 WordPress 之中再替換成動態資料即可。

Tailwind CSS Play CDN

之前在鐵人賽頒獎典禮上認識搋兔大大本人,閒聊中得知 TW 3.0 提供了一種以 CDN 來引入的方式讓我莫名興奮,它透過一支 JS 檔來產出頁面中有使用到的 CSS class,這代表可以讓完全不懂安裝 Node.js 配置編譯環境或是不會寫程式的朋友也可以很輕易的使用 TW,尤其以外掛為主的 WordPress 使用者更是適合,因此我花了幾小時開發了 Tailwind CSS Play CDN for WordPress 這支外掛,主要的功能如下:

一、無痛引入 Tailwind CSS

當外掛啟用後會直接在所有頁面中引入 TW 的 JS 檔:

除了可以在前台引入外,有時候如果需要客製化一些後台的操作面也能在後台引入。我這邊有特別針對後台進行預設樣式 ( Preflight ) 的調整,不然引入後會發生一些跑版的狀況。

二、前綴、設定檔、自訂 CSS

根據官方文件所提供的功能,該外掛提供以下設定選項:

首先是名稱前綴,要使用 TW 的 class 名稱最好加入自己的代號,不然很有可能會與其他既有的 CSS 框架或是內建的樣式衝突,TW 為了方便記憶所以 class 名稱都很短,像是 block 指的是 display:blockhiddendisplay:none,這種菜市場名沒有前綴的話絕對會跟其他人撞。

其次是 config 的設定,TW 用 JSON 定義設定檔,包含加入新的樣式、修改預設值的參數等等,Custom CSS 區塊可以自訂樣式,這些設定是提供給前端工程師使用,一般來說用內建的樣式就已經非常足夠。

三、支援官方外掛

TW 的 CDN 最強大的地方在於還能引入官方的外掛,目前支援四種,未來應該會越來越多:

我最喜歡用的是 Typography,只要兩個 class 就可以讓內文變得清晰好閱讀,而且還可以針對裝置去改變整體內文的行高與字級大小,更多使用方法可以參考官方文件:https://tailwindcss.com/docs/typography-plugin

使用這支 WordPress 外掛需要注意的地方是官方提醒 Play CDN 只適用於測試環境中,因為還在持續開發有可能會因為加入新功能而導致未預期的狀況,為了避免這個問題,我把目前的版本先抓了一份到外掛的目錄中,並且未來如果 TW 有新版的 CDN 釋出時,我會將舊版本保留下來並且增加 CDN 版本的選擇設定,藉此來避免因為官方加入新功能或是 CDN 掛掉時而導致網站爆炸。

但如果要用 TW 官方外掛的話就無法使用目錄中的 JS 檔,一定要使用 CDN 版本才能正確引入,因此當有使用官方外掛卻發生網站爆炸時,第一時間先停用 TW 的官方外掛來排除,相信他們會持續完善 Play CDN 的各項功能以及增加穩定性。

我個人目前是把 Play CDN 用在自己的個人網站上,用得非常順暢也沒遇過任何問題,但如果你想用在客戶的網站上我覺得你還是要評估下,看你要用到多少 TW 的 class 以及萬一 CDN 爆掉會造成的影響程度。

另外一個你可能會考慮的點是檔案尺寸的問題,上文有提及如果是以 Node.js 環境來做編譯的話 CSS 檔案會非常小,而 Play CDN 那支 JS 檔就要 300 KB,並且會將 CSS 直接寫在頁面中,我實測透過 gzip 壓縮可以到 90 KB 上下,因此如果你非常在意檔案尺寸的話建議還是從本機來用 TW 會比較恰當。

Tailwind CSS Play CDN for WordPress 外掛目前持續開發中,我之後也會把自己有用到的功能再加進去,如果你有好的建議也可以跟我說喔~

下載連結

文章標籤CSS

目錄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

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

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2024 想點創意科技有限公司

想點創意科技有限公司 | 統一編號 90516823
Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!