在台北看見彩虹的 WordPress 小聚

心得關鍵字:小聚人超多場地快爆炸、繼光香香雞好香、Akamai 有 100 鎂的免費額度、19 歲的講者已經玩 WordPress 6 年、跟 Eric 討拍、Mike 自動化運彩投注好心動、沒帶電腦的我上台閃電講亂入、Chatbot 開發交流。

好久沒有來 WordPress 小聚了,台北場雖然離我家最近,但以前每次來參加的時候,總是會因為興奮過頭導致晚上睡不著覺,導致隔天的精神很差,因此就越來越少來了,這陣子重新開始接案,想說多認識一些新朋友或是與老朋友搭上線,看有沒有合作的機會。

再加上這場的主題是我很有興趣的 Vibe Coding,很想看看其他人都是怎麼進行的,會不會有更好的方法可以讓 AI 協作更容易,還好這次參加完之後回家倒頭就睡,看起來好像可以重新復出了 (?)。

WordPress 開啟 Vibe Coding 的創意新玩法

講者愷翊整場的分享重點圍繞著與 AI 協同開發的一些關鍵技巧以及專有名詞,讓對於剛踏入 AI Coding 的朋友可以有一些基礎的認識,主要包括以下幾個部分:

  1. 如何控制 AI 的回答風格
  2. 開發工具的推薦
  3. 如何產生需求文件
  4. 通用提示詞的設計

愷翊以大邵資安報為範例,他發現到這些與 WordPress 相關的資安報告製作流程很繁瑣,讓維護者增加不少工作負擔,設計一份資安報告需要從許多國外網站取得相關資訊,並且要人工篩選這些外掛是否在 WordPress 的官方目錄上架,確認好之後還要再使用 Photoshop 或繪圖軟體設計成圖片,最後再發布到社群上面。

愷翊在了解使用者的需求痛點之後,就開始跟 AI 討論相關的解決方案,最後決定用爬蟲以及導入 AI 的方式來做內容的翻譯以及資料的篩選,等到分析完成後,使用 html2canvas 的功能,把原始的資料轉換成一張圖片,再透過 WordPress REST API 發布到網站,社群的部分也可以用 API 的方式自動化貼文。

透過這樣子的自動化解決方案,從以前做一篇原本需要 1~2 小時變成只要在有需要的時候啟動爬蟲,讓它自己去收集這些資料,啟動後就可以不管它,轉而去處理自己的事情,讓時間從重複的工作中解放出來。

這個部分我非常有感,之前我一直想爬全世界的 WordPress 網站卻遲遲沒動工,除了不會寫以外,也一直在思考要如何透過爬蟲做更進一步的分析,而不單單只是取得固定的內容。

有了 AI 之後可以寫爬蟲完全無障礙,還能做到像是分類、翻譯、摘要等進階分析,這些功能全部都有辦法整合進爬蟲,進而達成自動化收集大量資料的目標,並從中發掘相關的洞見,資料搜集的門檻也因此降低了許多。

三種創意玩法

愷翊首先介紹使用編輯器來寫作,搭配語音輸入法可以解放雙手,進入一種沉浸式寫作的狀態。再搭配 WordPress REST API 就能在寫完文章的當下直接發布到網站上面,省去在不同視窗之間切換的時間成本。

這樣的做法不只可以發布內文本身,也能根據一些自訂欄位來做對應,像是如果要發布的文章含有很多自訂欄位,在編寫時就可以先把這些欄位設定好,發布到網站後 AI 會自動幫你寫入到對應的欄位,就不需要再手動輸入。

我現在也有在使用語音輸入進行寫作,但不是用 IDE 而是用 Heptabase,因為若要格式化文章內容,筆記軟體感覺還是比 IDE 來的方便,目前也還沒有做到自動發布到 WordPress 上的這一段環節,我還是習慣手動貼上並且進行編排,順便看一下區塊編輯器的發展進度,但也許不久的將來,我們再也不需要「內容編輯器」了。

愷翊介紹的第二種玩法是可以透過 AI 批次上傳,處理帶有許多欄位的資料內容,像是 WooCommerce 的商品資訊,通常就是要透過 CSV 進行上傳,如果 CSV 裡面的資料有所更動,就必須要重新上傳,這樣子一來一往也會花上不少時間。

透過 AI 可以直接在對話框裡面進行資料的修改,不需要再重複進行繁瑣的檔案上傳動作,他以他自己的網站 Vibe Coding 工具轉運站為例,300 筆資料的新增與更新,全部都是透過本機的 AI 編輯器來進行維護:

第三種創意玩法是採用 Headless 的技術,讓前端使用前端框架,而後端依舊使用 WordPress 來作為內容管理系統,這樣的好處是可以讓整個網站的 loading 不會這麼重,但還是可以保留資料庫以及後台的操作介面。

我身邊有一些朋友都已經開始請 AI 用 React 來做 WordPress 的前端介面,我自己以前則是使用 Vue.js 做過 WordPress + Headless 的架構,因為太久沒有用前端框架了,現階段也還沒有遇到專案必須要用這些框架來進行,為了避免日後維護的問題,目前我還是採取 WordPress 傳統的佈景主題寫法。

我的開發原則如下:

  1. 盡可能使用 WordPress 內建功能來設計
  2. 盡量減少引入第三方套件,避免增加網站負擔
  3. 能夠自己處理的外掛就自己寫

這樣也比較好控制整個網站的 Request,避免 Loading 過重。

Vibe Coding 適合對象

愷翊認為產品經理、開發者、設計師都是很適合使用 Vibe Coding 來開發一些工具,但如果你是常常想要改東改西、還沒想清楚就要執行的人,或是直接把 AI 當成全自動解決方案的人,就不適合使用 Vibe Coding。

另外在資安領域、金融科技等需要高度監管以及安全性的產業,Vibe Coding 上也不適合,特別是一些關鍵的基礎設施。

我是覺得跟 AI 一起協作並沒有誰適不適合的問題,主要還是看使用場景以及對於任務的掌控度,當我想要快速開發一些小工具時,我會放手讓 AI 自己執行,完成後只會確認功能是否符合需求,至於內部的程式碼基本上只要沒遇到問題,我就不會去檢查。

但如果是要開發給大眾使用的產品或是客戶託付給我的專案,我與 AI 的協作方式就會改變,我會帶領著它來幫我實作細節,並且檢查它寫出的每行程式碼是否會帶來潛在的效能或是安全性問題,所以使用場景會決定 AI 所扮演的角色。

演講逐字稿:https://gemini.google.com/share/3ad1bfe01acd

閃電講

閃電講(包含我自己)總共有三場,第一場因為當時在跟愷翊聊天,所以沒有聽到內容,第二場超有趣,Mike 分享他如何使用 n8n 來收集國外的資訊,並用 LINE 通知他該去運動彩券進行下注,我聽到眼睛為之一亮,我覺得這是近期自己聽過 n8n 最實用的案例,沒有之一XD

我的話則是把之前上線的 bazewp.com 做一個簡單的介紹,因為投影幕有點小,再加上我自己又沒有帶電腦,Demo 的效果似乎不太好,會後還有夥伴跟我詢問網址是什麼,當下覺得自己的介紹有點失敗,連網址都忘記附上 Orz…

心得

WordPress 小聚真的是活力滿滿,很喜歡在 Live Demo 發生問題的時候,台下的大大們會發出錯誤的音效來化解尷尬(真的很靠杯XD),講者與台下的互動,就好像在跟朋友聊天一樣,不會有一種在聽演講的感覺,非常喜歡這樣的氛圍。

會後繼續跟愷翊聊 Chatbot 機器人的設計,看到他後台的介面十分完整,並且也考慮到很多使用情境,騎車回家的路上不禁思考著,小我兩輪的優秀年輕人可以借助 AI 達到這個成就,我這些年累積的經驗在 AI 面前還有任何意義嗎?

於是回想起人生本來就沒有任何意義,意義是要靠自己去尋找出來的,有這樣的思路後,心裡萌生了一個想法,那就是盡可能地把自己的經驗分享出來,雖然不是多厲害的內容,但至少可以靠著分享來產生連結,有連結就會產生火花,再從火花中去尋找自己的意義吧。

最後雖然有點雞湯,但還是要謝謝這麼多年來持續投入 WP 社群的志工,讓像愷翊這樣的年輕人有發揮的舞台,也讓我這中年大叔有機會靠參加小聚再水一篇文章XD,期待下次的小聚,希望可以遇見你!

目錄

發佈留言

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

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

Picture of 賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

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

訂閱電子報

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

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

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

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

訂閱電子報

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