profile

WordPress 開發日常

WordPress 自動筆記外掛

Published about 1 year ago • 1 min read

之前看到新聞說有學校禁止學生使用 ChatGPT(小雀),看到當下只覺得應該沒這麼嚴重吧,只要老師好好指導學生使用它的方法與範圍,善用這個工具絕對能讓學習的效率提升,但最近才發現我太天真了,人的天性往往會讓事情變得不單純。

起因是這陣子收到一封在校學生的合作來信,表明自己對於 WordPress 網站開發有一定的能力,希望可以跟我一起合作接案,可以收到這樣的來信讓我非常興奮,如果以前自己念大學的時就有機會跟業界人士共事,這樣的成長速度絕對比自學來得快千百倍。

抱持著不能誤人子弟的心情仔細看了信件內文,雖然作品要能夠接案還有一段距離,但能感受到他對於相關工具有一定的掌握度,然而讀完了全文以後我內心開始糾結,不知道是不是這陣子我用太多小雀了,讓我可以輕易辨識出這封信有很高機率是用小雀寫出來的。

主要的特徵有大量的中國用字,像是編碼、鏈接、創建,然後每一個段落重複出現相同的句子,文末的結尾很唐突,讓我很想要輸入「繼續」請他寫完,整體的感覺就像是我告訴小雀一些關鍵字,然後用它產生這一篇文章。

當下我好像可以體會教授看到學生交上來是這樣報告時的心情,雖然內容沒有錯誤,語意上完全可以閱讀,但就會開始懷疑學生到底花了多少心思在這件事情上面,如果今天是要交辦客戶或是專案給他我一定會抖抖的,會讓我不信任他的程式碼品質以及投入程度,用小雀產出堪用的程式碼很方便,但要能用在專案中的又是另外一回事了。

另一方面,由於他的信件讓我對於在寫內容時用字精確有不同的領悟:身邊有不少朋友都會覺得文字只要可以傳達意思、能夠溝通就好,是哪一國的用法根本沒有差,往往這時候只能訴諸政治意識形態,最後只會讓彼此的討論沒有交集。

你有用過小雀就知道,雖然一直跟它講要用繁體中文回答,但它還是三不五時會跑出簡體中文或是中國用字的繁體寫法,我想原因應該是簡體中文的訓練資料比繁中多上太多,因此出現簡中的機率很高,因此在寫文字的時候,如果你的用字不精準,很容易就會被人懷疑你寫的內容是用機器人產出的,這對於你努力塑造出來的專業形象會有大的殺傷力。

AI 提供的資料應該只是輔助,即使是小雀今天已經升級到可以寫出完美的繁體中文,也不應該將它作為最終產出的內容,因為這樣就等於是把身為人的價值隱藏在機器後面了。

因此從現在開始好好選字吧,萬一不經意的用錯字也虛心接受他人指教,或是去查字典找到正確的用法再寫出來,在 AI 大量生產內容的年代,要保有自我只能靠著這些細節的累積,這才是能在 AI 時代創造出差異化的不二法門。

一、在 wp_insert_post() 中處理程式碼文字提示

區塊編輯器可以使用 Markdown 語法,但當我想用 wp_insert_post() 來建立文章時,內容中帶有程式碼的區塊卻無法正確顯示,依舊會是以純文字的方式呈現,雖然有第三方外掛可以將程式碼區塊做反白提示,但礙於要達成自動化的目標有些問題無法克服:

1.Code Syntax Block

https://tw.wordpress.org/plugins/code-syntax-block/

這支外掛可以讓區塊編輯器內建的程式碼區塊以不同的樣式來呈現語法,並且還可以顯示行數以及程式碼說明,能比預設的程式碼區塊有更明顯的樣式:

在區塊編輯器中切換到「程式碼編輯器」,就可以看到該區塊的 HTML 語法,只要將語法放在 wp_insert_post() 的參數之中,就可以建立帶有程式碼內容的文章:

事實上 Jetpack 也有 Markdown 的區塊工具,但不可行的原因在於我想要寫入的內容格式不固定,我沒有辦法精確的掌握到寫入程式碼的開頭跟結尾,唯一能辨識的就只有 Markdown 語法中標記程式碼的符號。

雖然可以用這個符號來替換成區塊編輯器的註解,但處理起來需要花點時間,於是換個角度想何不直接寫入 Markdown 更快,但嘗試結果區塊編輯器無法直接認得 Markdown,都還是要增加區塊註解才能辨識。

2.WP Githuber MD

https://tw.wordpress.org/plugins/wp-githuber-md/

於是索性停用區塊編輯器,改用 Terry 大大開發的 WP Githuber MD Markdown 編輯器,但發現到使用 wp_insert_post() 寫入 Markdown 後,我必須要手動進入後台再點擊一次更新按鈕,才能在前台看到程式碼提示以及段落的排版,不然在預設情況下會全部擠在一行無法閱讀,這對於想要全自動化的我來說還差了一點。

3.WP Editor.md

https://tw.wordpress.org/plugins/wp-editormd/

最後換成了這一套就可以直接透過 wp_insert_post() 來寫入 Markdown 並且帶有段落以及程式碼的提示效果,但衍伸的另外一個問題是我的內容有網址連結,我希望系統可以自動判斷當內容中帶有 http 的純文字時可以自動加上 <a> 標籤。

在跟規則運算式奮戰了好一陣子後,才發現原來 WordPress 有內建超方便的 make_clickable() 可以搞定這件事,只要使用勾點 the_content 就可以將文字轉換為連結,完整程式碼:https://oberonlai.blog/wordpress-code-syntax/

最後我目前採用的解決方案就是使用 WP Editor.md + wp_insert_post() 來寫入帶有 Markdown 的文字內容。

二、WordPress 自動筆記外掛

這禮拜花了幾小時實作了一個小外掛,目的是想要結合 OpenAI API 以及 WordPress 的排程功能,自動在每天半夜十二點幫我寫筆記,筆記內容是每天介紹一個 WooCommerce 函式的說明並附上程式碼範例,並帶有該函式的原始說明連結。

會想要做這個外掛的起因是每次寫程式在卡關時,都會查到原來 WordPress/WooCommerce 有這些內建的函式可以使用,如果可以早點知道的話就可以省下很多卡關的時間,因此想讓自己每天可以多認識一個函式,就能多一點解決問題的知識。

相較於 WordPress Code Reference 都有提供函式的具體使用範例,WooCommerce 的文件就少了這一塊,因此想說就可以請 ChatGPT 幫忙寫出這些函式的具體用法,之後就可以整理成程式碼片段來用。

有了這個想法後我就開始實作,OpenAI API 很好接,申請 API Key 用 wp_remote_request() 打不用十分鐘就搞定了,但產出實際內容後才發現原來 ChatGPT 是這麼不受控的傢伙 Orz,程式碼如下:https://oberonlai.blog/wordpress-openai-ai/

1. 回答重複的內容

我的提示語是這樣下的:「介紹 WooCommerc 函式的用法,格式為函式名稱、函式說明、程式碼範例、註解、參考連結,使用繁體中文且不要重複」,我希望透過格式名稱去把它回答的內容拆解為陣列,我預期它每一次都會介紹不一樣的函式。

但試了幾次之後發現到 wc_get_product() 出現頻率最高,其次是 wc_get_order(),看來這是網路上大家最常問的兩個函式,理論上我應該可以把它講過的內容再餵給它以避免重複,但又怕一整個使用量爆表,最後還是覺得應該要先把完整的函式列表整理出來,然後隨機選取後請它介紹。

但 WooCommerce Code Reference 的分類方式不太好整理函式列表,而且除了函式外還有類別以及勾點,還好小程丟給我這個網站,剩下的可能就是要手動更新資料:https://wp-kama.com/plugin/woocommerce/function

2. 回答格式不固定

我預期的回答內容會是這樣:

-

函式名稱:wc_get_products()

函式說明:透過使用 wc_get_products() 函式,可以取得 WooCommerce 後台系統中所有的商品。此函式具有完整的快取支援,可提高程式執行效率,並可用在任何需要儲存商品資料的情境。

程式碼範例:…

-

雖然得到的格式幾乎都正確,但有時候冒號會變成半形、冒號後面的文字會換行、程式碼沒有用 Markdown 的程式碼語法包住等等,於是我就要不停的根據它回答的格式做內容判斷,因為我想要拿它的函式名稱作為文章標題,格式不固定讓我有點困擾。

3. 回答內容的正確性

最嚴重的問題還是回答內容的正確性時好時壞,我遇過它寫出來的程式碼範例根本就沒有包含它所介紹的函式,或是解釋的說明完全不相關,附上的參考連結也常常 404,更不用說所處可見的簡體中文用字與用法。

實作後我對於使用 OpenAI API 自動寫筆記的想法有點冷卻了,最大原因在於我還是必須要人工去審核產出的結果,除了要先確認範例程式碼可否運作,還要檢查參考連結是否有誤,或是我應該換個想法,坦然接受現階段小雀的能力就是只能產出這樣的內容,反正我的目的是學習,有能力糾正錯誤也是很重要的一環,實際測試一陣子後再看看吧~

三、WooCommerce Notify 的開發循環

以前在接案時總是有個幻想,希望可以好好的專注在一個產品的開發,盡自己最大的努力把它做到最好,想不到回過神來現在的我已經走在這條路上:每天處理客戶反應的臭蟲、新增客戶想要的功能、改善自己覺得沒寫好的地方。

這樣的努力帶來了良好的循環,這個月的營業額創下新紀錄,於是開始無法抑制自己內心的慾望,有點落入了靠增加新功能來帶動銷售的想法,而且還睽違已久的加了班,想盡快把客戶想要的功能加進去。

只能說產品開發是一連串的取捨,要專注在產品的核心功能還是開發支線加入一些客戶想要但事實上不那麼核心的功能?還好我還滿想享受這樣的過程,畢竟這不就是我一直以來的幻想嗎?XD

本週更新項目:

1. 新增 WooCommerce 結帳頁 LINE 登入按鈕的文字設定

提供給站長自訂 LINE 登入按鈕的文字,可以用行銷文案來增加顧客使用 LINE 登入的轉換率。

2. 加入訂單推播判斷

之前的作法是我沒有先檢查該訂單是否帶有顧客的 LINE User ID 就直接推播,因此會造成 API 回傳錯誤訊息,客戶擔心這些沒成功寄出的推播會不會算進 Messaging API 的使用量,因此這此更新多加了判斷,避免在沒有 LINE User ID 的情況下去呼叫 Messaging API。

3. 增加訂單內 LINE User ID 顯示

讓站長可以判斷該訂單的客戶是否有使用 LINE 登入,以利後續的行銷追蹤與客戶服務。

4. 新增綠界物流編號參數

在推播管理中增加綠界物流編號參數,讓站長可以發送物流通知以利顧客追蹤到貨狀況。

5. 排除 Nextend Social Login 取得 LINE User ID 錯誤

WordPress 知名的 Nextend Social Login 外掛付費版也有提供 LINE 登入功能,WooCommerce 推播通知會自動取得透過該外掛進行 LINE 登入的 User ID,但在資料庫的語法上我手殘多加了一個底線,因此無法正確取得 Nextend Social Login 的 LINE User ID,這次的更新修復了這個錯誤。

感謝每一位有對 WooCommerce 推播通知外掛提供意見回饋的朋友,雖然聽起來很陳腔濫調,但真的是因為有你們的回饋我才有動力繼續開發下去,對開發者來說最痛苦的莫過於閉門造車寫了一堆沒人用的工具,希望這支外掛在未來也能幫得上你的忙!

-

最後我還是沒有回信給那位學生,想不出來要寫什麼才不會讓他覺得我在說教,希望他有訂閱我的電子報XD。下週連假不確定是否出刊,要看姨甥女們有沒有來我們家玩了 :p,祝大家清明連假愉快,一路交通順暢!

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