profile

WordPress 開發日常

共同工作空間初體驗

Published 8 months ago • 1 min read

自從全職接案以來,我都是習慣在家工作,雖然書桌旁邊有 PS4、Switch,但我早已練就工作時可以不受娛樂的誘惑,上下班時間也非常固定,對於工作與休息的界線,在「家」這個空間中我可以劃分的非常清楚,因此就算我成立公司之後,也完全沒有想要在外面租辦公室的念頭,在家工作就是我效率最高的場域。

而我後來才了解這是因為有老婆陪我一起在家工作的緣故,由於她當成人美語老師的時間比較彈性,我們可以一起吃三餐,晚上還有時間去公園散步或是追韓劇,工作時她也會跟我聊天打屁講些五四三的,就好像我有同事一樣,而且是可以非常輕鬆自在聊天的好麻吉。

但有時候她當天上課時數比較長,家裡就會變得很安靜,雖然我還是一樣在 Coding,但就是會覺得少了些什麼,如果時間再久一點就會覺得寂寞空虛冷,這讓我想起還沒結婚前也有一段自己在家工作的經驗,很容易因為在工作上遇到困難而讓自己的情緒不穩定,像是解決一個難題就會超 High 的鬼吼鬼叫,卡關的時候就會三字經連發…

我一直跟老婆說如果她去當上班族的話我一定沒辦法一個人在家工作,花錢租辦公室可能才不會讓自己瘋掉,但有時候也會想跟夥伴可以一起面對面工作,交換彼此的工作心得與更新專案進度,這時就會覺得有個辦公室好像也不錯。

於是這禮拜我就約夥伴一起出來 Co-working 一下,上網找了一下有沒有合適的場所,可以有網路、咖啡、茶水、廁所、能待上一整天的地方,查到的結果發現到原來現在有不少的共同工作空間,除了提供公司行號月租辦公室以外,還有單日租用的方案。

最後我選擇了這一間,原因是他們可以直接線上刷卡預定,卡座座位方案適合兩個人,一天 500 元使用時間為 9:00~19:00,地點在台北車站南陽街,坐捷運走路五分鐘可以到。整個空間不算大,一共有四個樓層,單日券的開放空間在三樓,樓梯有點抖不太好走:

卡座座位還算寬敞,我跟朋友兩個人身高超過 180cm 公分也可以坐得很舒適,只是因為我靠牆側坐一直不小心把電源線給踢掉,如果插座的位置是在桌上或是高一點的話可能會比較好。

在他們網站上預約付款完成後,會收到一封信,信裡面有入場用的 QRCode,要進場需要使用它掃描門鎖,整體的使用流程還滿順暢的,硬說說缺點的話就是空間比較小,交談的內容很容易讓其他桌的人聽到,因為有幾位一人工作者在那邊工作,我都覺得我們交談的音量會吵到他,開放共享工作空間可能還是比較適合一個人,下次要 Co-working 我應該還是會選擇咖啡廳了。

偶爾能跟夥伴面對面交流開發心得、腦力激盪真的十分爽快,先從跟彼此介紹最近在忙什麼案子,到近期業界的活動,然後討論專案的進度,討論完就開始動手解決問題,這是平常遠端工作沒辦法體會到的,有時候還真的會因爲這個好處想弄間辦公室上班,只是晚上到家覺得好累,這樣高密度的工作好像不太適合我,看來在老婆還願意陪我待在家裡上班前,我還是乖乖待在家裡好了。

WooCommerce 建立訂單時取得金流回傳資料的勾點

這週遇到一個狀況時我需要在訂單成立的時候取得第三方金流回傳的資料,我之前的處理方式是使用 woocommerce_order_status_changed 來做,但如果是剛成立的訂單且訂單狀態還停留在等待付款中時,這個勾點就不會觸發到。

我首先嘗試使用 woocommerce_new_order 這個勾點可以在訂單建立時觸發,但我卡在客戶的網站有使用第三方金流,我需要在訂單建立時就能取得第三方金流所回傳的付款資訊,像是 ATM 虛擬帳號或是付款結果。

爬了 WooCommerce 的程式碼之後發現到類別 WC_Order_Data_Store_CPT 裡面有幾個訂單資料寫入的方法,像是 create()、update(),後者裡面有一個 woocommerce_update_order 勾點,看起來是會在訂單寫入相關資料後進行觸發。

因為我需要當金流外掛將回傳資料寫入後進行觸發,因此覺得 woocommerce_update_order 就是我所需要的,嘗試之後果然沒錯,有成功拿到我需要的資料並且是在訂單建立時就會觸發。但,這個勾點會在每更新一次訂單資料的時候觸發,也就是說如果你的訂單有 100 筆資料要更新,那麼勾點就會觸發 100 次,我在測試的時候差點把 API 打到掛掉 > <

於是我繼續搜尋還有沒有跟訂單狀態有關的勾點,也思考著是不是要尋找 PHP 的非同步解決方案,等待金流回傳資料寫入完成後再做事情,但光想就覺得燒腦,後來念頭一轉,要能夠在訂單資料建立且拿到回傳資料,這不就是前台結帳會發生的流程?

想通之後就不再拘泥於訂單的勾點,而是改用 woocommerce_thankyou 勾點來進行觸發,這樣就能實現在訂單狀態不改變的情況下,拿到第三方的回傳資料。

WordPress 表單推播外掛

歷經了一年的調整,WooCommerce 推播外掛在上個月月底總算正式推出 1.0 版,在這一年中很感謝各位大大提供了許多寶貴的建議,讓我知道該把哪些功能整合進去,也逐漸摸索出整個程式碼架構該如何規劃才能因應未來的擴充需求,這些都是在一般專案中無法得到的寶貴經驗。

1.0 版我把程式碼進行重構,主要的重點有三個:

  1. 抽象化推播方式
  2. 增加訊息參數對於第三方外掛的支援
  3. 增加觸發推播事件勾點

這一年來最常遇見的需求是支援新的推播通知管道,像是增加不同的簡訊商、LINE Notify,之前為了求快都直接將相同的程式碼複製貼上,然後修改成對應的 API,結果後來要改裡面的東西時,有幾個推播管道我就要改幾次,想當然就會發生漏改的情況。

我的作法是把推播管道相同的程式碼拉出來做成抽象類別,然後每個管道去繼承這個抽象類別來修改成他們自己的推播方式,未來要新增時就會方便許多,不用再複製貼上一大堆相似的程式碼,維護上也只要修改抽象類別就能同時對所有推播管道產生作用。

其次是訊息內文參數,隨著使用場景的增加,有客戶希望可以支援特定外掛的參數,像是金流或是物流相關的資訊,以便讓顧客收到通知時能看到物流單號或是 ATM 轉帳帳號,這部分的擴充機制也於 1.0 版完成,可以讓第三方外掛進行整合。

增加觸發推播事件是比較困難的部分,因為會關係到第三方外掛的勾點設計以及資料取得方式,目前已整合的事件有五種,除了與 WooCommerce 訂單、商品到貨通知事件外,其他是三款不同表單外掛的通知,分別是 Elementor Form、Gravity Form 以及 Fluent Form。

在客戶的實務應用中,觀察到表單送出後的通知也是有滿多的需求,常見的像是課程報名表單填寫完成後,可以讓學員透過 LINE 或是簡訊收到上課通知,或是預約某項服務時能確認服務時間,多種通知管道是這些表單外掛比較不會著重的功能。

於是某天跟一位朋友聊到,他問我說會不會出一個精簡的版本只支援表單外掛推播,這句話炸開了我的腦洞,我一直想推出免費的版本但不知道該如何切割功能,如果是拔掉 WooCommerce 只支援表單外掛並且維持其他功能,似乎就能服務到沒使用 WooCommerce 的網站,抱持著這個想法讓我決定要開始進行開發。

拜重構所賜,把原本的外掛拔掉 WooCommerce 相關功能非常容易,不到一個禮拜的時間就搞定了,我把該外掛的功能簡單介紹一下:

Form Notify 表單推播外掛

該外掛可以協助有使用表單外掛的站長,讓填表者送出資料後,能夠在 LINE 官方帳號、手機簡訊以及電子郵件中收到相關的填寫結果資訊,而管理員也能在 LINE Notify 中接收到通知,以便做後續的追蹤與管理。

目前支援的表單外掛如下:

  • Elementor Form
  • Fluent Form
  • Gravity Form

目前支援的推播管道如下:

  • LINE 推播
  • LINE Notify
  • 電子郵件
  • Every8d 簡訊
  • 三竹簡訊
  • easyGo 簡訊

為了提供 LINE 推播功能,該外掛也支援 LINE 登入以取得會員的 LINE User ID 來進行推播,以下就實際的使用場景來進行相關設定說明。情境是我們需要讓訪客在填寫表單前先登入會員,並且在送出資料後於 LINE 官方帳號內提醒他於表單內選擇的上課時間,步驟如下:

一、安裝表單推播外掛

先前往此處下載外掛主程式:https://oberonlai.blog/form-notify.zip

從後台進行上傳並點選啟用,啟用後會在後台側邊欄看到「表單推播通知」的選單:

二、設定 LINE Login 與 LINE Channel

點選表單推播通知 > 設定,點選第二個 LINE Channel 頁籤:

在這邊要在 LINE 的開發者後台取得 LINE Login 與 LINE Messaging API 的 Channel 資訊,相關設定教學可參考以下文章:

三、設計登入頁與表單欄位

新增一個頁面來加入 LINE 登入按鈕,或是你也可以在文章中的任何一處使用區塊編輯器來加入。如果是在區塊編輯器中,輸入斜線打 LINE Login,就可以找到 LINE Login Button 的小工具,或是透過左上角的加號新增,找到小工具的類別:

加入後可以透過右側的區塊設定來進行按鈕樣式的調整:

如果你用的不是區塊編輯器,也可以用短代碼的方式加入登入按鈕,使用方式如下:

[linelogin text='快速登入' size='m' lgmode='true']

短代碼名稱為 linelogin,設定參數說明如下:

text – 按鈕的文字名稱

size – 按鈕的尺寸,可選參數有 f、 l、m、s 四種尺寸,f 為滿版按鈕

lgmode – 跳轉的模式,設定 true 時會重新導向回原頁面,設定網址時會重新導向至該網頁

align – 對齊方式,可選參數有 left、center、right

如果是在會員已登入的狀態下,前台頁面會不顯示該按鈕。

表單的部分這邊用 Elementor Form 做示範,我們先設計三個欄位:姓名、Email 以及場次的單選方塊:

四、編輯推播通知內文

進入後台表單推播通知 > 新增,輸入頁面標題,事件的地方選擇「 Elementor Form 表單送出後」,表單區塊選擇剛剛新增的表單,然後點選下方通知方式的新增按鈕:

下一步通知加入訊息內文,先選擇類型為 LINE 推播,內文的部分從右側欄「可帶入參數」複製需要的資料,然後在自訂接收推播欄位貼入 Email,程式會自動判斷如果該 Email 是經由 LINE 登入且帶有 LINE User ID 時,就會將訊息推播到他有加入的 LINE 官方帳號內:

五、測試接收通知

在前台使用 LINE 登入後填寫表單,確保 LINE 有收到相關報名資訊:

設定功能

WordPress 表單推播外掛提供以下功能:

  • LINE Login、LINE Notify 與 LINE Messaging API 的憑證設定
  • 簡訊服務的憑證設定
  • LINE 登入功能設定,包含是否在 WordPress 的登入表單中顯示 LINE 登入按鈕,以及設定登入後的重新導向網址、客戶角色與未取得電子郵件授權時的處理。
  • 查看歷史推播紀錄,可依照週、月篩選

以上是 WordPress 推播外掛的功能與操作教學,如果你有常用的表單外掛卻沒在列表中,或是你希望你的會員是可以從 Slack、Telegram 收到通知都可以跟我說,我非常樂意整合這些功能,希望這支外掛可以更實用,幫助到更多人!

再次附上 WordPress 推播外掛的下載連結,我已經有提交上架 .org,但最近審核人力似乎不足,可能有得等了~

另外這邊先打個預告:今年即將於十月在台北國際會議中心舉辦的 WordCamp Taiwan 2023,我已經報名講者來分享這支外掛的開發秘辛,但前提是我的講題要有入選才行XD,今年報名很踴躍,整個議程感覺十分精彩,還沒購票的朋友趕快去搶票吧:https://taiwan.wordcamp.org/2023/tickets/

WordPress 開發日常

Read more from WordPress 開發日常

每次遇到想要跟我學習 WordPress 外掛開發的朋友來信,總是只能丟些教學文件給他們,畢竟我也不知道他們想做什麼東西,只能提供官方文件給他們參考,雖然這幾年來也寫了不少,但好像都缺少比較完整的開發教學。 想到之前為了教老婆開發而整理出的一套課程大綱,似乎有這個契機可以把它發展下去,但如果只是講理論而沒應用好像無法立即派上用場,於是想到可以整合之前寫過的小工具作為內容,就可以設計出真的能做出東西的教材。 剛好上週為了除錯的事情順手寫了一支日誌外掛,整合理論與實務的教學計畫如下: -- 前言 日誌紀錄是開發者與網站維護人員最重要的好夥伴,除了可以在開發當下輸出執行結果來確認程式的邏輯外,當網站發生錯誤時也能從紀錄中去檢查問題所在原因。查看 WooCommerce 的日誌紀錄步驟為:進入後台側選單 > 點選 WooCommerce > 狀態 > 日誌紀錄 > 選擇日誌檔 > 查看,就會顯示相關的資訊。 一、WooCommerce 內建日誌紀錄的問題 WooComerce 內建的日誌有以下幾個痛點: 選單的目錄層級過多,日誌檔太多時東西不好找...

6 months ago • 1 min read

上週五工作到一半,家裡的門鈴響起,開門後是衛生局的人員通報說社區附近出現登革熱案例,需要整棟樓進行消毒,正當我想著那我就不要出門就好,結果想不到對方說連屋內都要消毒時,我一整個傻眼,家裡這麼多吃的穿的睡的,全部都要暴露在殺蟲劑下,一想到頭就暈。 第一時間先上網查一下這是不是新型態的詐騙手法,才知道原來對臺南人來說這已是司空見慣的作業流程,還查到「養生膠帶」這個神器,它可以把大型傢俱鋪上一層塑膠袋作為防護,於是當晚趕快去水電行買了兩捲,想說隔天早上再蓋就好。 到了隔天一早九點,大樓就傳來噴藥機的巨大聲響,衛生局人員敲每戶的門,說要開始進行消毒了,那時候我們才剛吃完早餐,一整個被殺個措手不及,只好趕快把養生膠帶鋪上,但因為太趕,很多傢俱都沒有鋪到,就這樣半推半就的被請出家裡。 坐進電梯前看到消毒人員拿著在戶外消毒水溝的大型噴藥機直接在家裡面狂噴,不知為何有種荒謬感,好像我家是喪屍病毒外洩的實驗室必須徹底消毒一番,然後跟著鄰居們一起被迫撤離家園,似乎也拉近了鄰居之間的距離(?)...

6 months ago • 1 min read

這兩週在忙著準備 WordCamp 簡報以及擺攤相關事宜,雖然既累人又噴錢,但過程還是充滿了樂趣,我弄了宣傳 DM、易拉展、桌上立牌,以及手工裁切貼紙,好久沒做平面設計了,光設計一份 DM 就搞了五小時。 我是用 Figma 做的,由於它是專門用來做介面設計的,因此色彩模式並沒有 CMYK,所以只能用 RGB 輸出,為了要精準還原電腦上的顏色,前前後後不曉得打樣了多少次,最後還是睜一隻眼閉一隻眼讓它過了,不然可能花上七天七夜還搞不定… 明天就是期待已久的 WordCamp Taiwan,我覺得身為聽眾真的超幸福,只要人到屁股坐下,就能獲得這些講者們累積好多年的經驗與知識,會後還能去扒著他們不放問問題,光這樣想就覺得值回票價,我想分享一下身為開發者的我會去聽哪幾場,以及我是如何認識這些大大的: 上午 9:30 - WordPress 社群中的成長旅程 by Eric 在 WordCamp Keynote 由台灣人主講印象中這還是頭一次,我覺得這超棒的,以往的 Keynote 都是由 WordPress 官方代表來負責,通常會宣傳新的功能或是官方想要傳達的主題,這次是由 Eric...

7 months ago • 1 min read
Share this post