profile

WordPress 開發日常

WordPress 20 週年慶:回顧我與 WordPress 的 10 年歷程

Published 11 months ago • 1 min read

抱歉無預警停了兩週電子報,第一週是因為身體不適,第二週是手邊工作太多不得不暫停,這禮拜剛好結算了五月的工作時數,趁這空檔趕緊來寫,但依照目前手上的工作量,我必須要暫停兩個月出刊了,下次出刊預計會在八月中,到時候再跟你分享這段期間我所學到的東西~

-

今年 2023 年很特別,除了疫情終於解封外,從來沒在慶祝的 WordPress 竟然突然冒出個 20 週年慶,但也因為這個活動,才讓我驚覺原來 WordPress 已經 20 歲了,算算它陪伴著我的日子也有 10 年了,它就像我工作上的伴侶,不離不棄的支援著我完成許多專案,為了慶祝它的 20 歲生日,我想分享我是怎麼認識它並且一起攜手走到現在的。

第一次架 WordPress 網站

我最早接觸的內容管理系統並非 WordPress,而是任職公司內部所採用的 Xoops,對於當時還不會寫程式的我來說,Xoops 的外掛讓我大開眼界,不用懂任何程式就可以實現很多功能,雖然常常因為找不到需要的外掛或是不知道怎麼客製化而困擾,但由於是公司內部使用,很多需求可以矇混過去XD

在當時為了想快點把助學貸款還清,我也同步開啟了接案生涯,對花錢找外包的客戶來說,不熟程式的我很難用 Xoops 矇混過關,而我的解法不是認真去學程式,而是找了另一套名為 Joomla 的 CMS 來接案,相較 Xoops 它有更多的外掛以及佈景主題,對於要架設企業形象網站還滿容易上手的。

但用它完成幾個案子後,也慢慢發現它的弱點,當時的版本後台不太直覺,像是修改文章的內容與分類是在不同的介面,頁面的修改是要進到外掛的設定頁做調整,這對要更新網站內容的客戶來說很痛苦,而我在結案後也必須要花費時間進行教學,認知到 Xoops 跟 Joomla 都不是接網站案件的好工具時,我最喜歡接的案件是名片設計…

為了要有自己的作品集可以接案,讓我意外接觸到 WordPress,我用 WordPress 完成的第一個網站就是自己第一版的作品集網站,之所以會選擇它是因為它的佈景主題比上 Xoops 跟 Joomla 都精緻的許多,再加上後台的操作邏輯很清楚,想修改前台顯示的內容可以很容易在後台找到對應的修改區塊,這對於那時候還沒有視覺化編輯器的年代是非常強大的優勢。

由於我當時已學會一些基礎的前端技能,在選不到自己喜歡的佈景主題後,我開始研究該如何設計自己的佈景主題,也因此接觸到基礎的 PHP 以及 WordPress API,完成後我還花了好多時間每天早上六點起來,把開發佈景主題的心得整理成系列文,發佈後收到的迴響超乎我預期的熱烈,才知道原來也有這麼多朋友對 WordPress 有興趣。

第一次參加 WordPress 小聚

我第一次參加的 WordPress 小聚是在台北市民生東路的果子咖啡,印象中大概有五~八位參加,自以為已經研究 WordPress 有點小心得的我卻受到打擊,因為在場大大討論的東西我有八成都聽不懂,什麼 Hook、Loop、Query 一律鴨子聽雷,我只能靜靜的在旁邊盡量多聽,回家之後開始一個一個研究。

而這也是我第一次受到社群的刺激,會後有好多想法想實現,我應該就是從那時候開始參加完小聚回家後會失眠,由於我待的公司非資訊科技相關產業,平時很少可以跟人聊 WordPress,參加小聚有種歸屬感,我可以把問題帶去且收穫滿滿。

有了小聚的充電後,我開始全數採用 WordPress 進行接案,當時 Visual Composer 剛推出不久,我會去 Themeforest 買包含這套編輯器的佈景主題來進行提案,在提案前先用內建的範本換成客戶的 LOGO 與文案,讓客戶可以想像新版網站的樣貌。

這樣的提案方式命中率還不差,而且在會議中直接展示 Visual Composer 的編輯功能,都能讓客戶嘖嘖稱奇原來有這麼方便的工具,還讓客戶誤以為是我開發的。在這個階段我都很怕客戶知道 WordPress,不管是在報價單裡面或是會議上,WordPress 是我絕口不提的禁忌字,總覺得讓客戶知道就不需要我了,可想而知 WordPress 有多強大。

但有在接案的朋友就知道,客戶的需求總是可以超出我們的預期,雖然 WordPress 很強大,但我也遇到許多無法解決的難題,尤其是後台的客製化,當時我的 PHP 還很弱,只能靠著一些前端的技術來修改後台的介面,以及跟在小聚中認識的 PHP 工程師合作來完成專案。

第一次開發專案 WordPress 佈景主題

跟後端相比,當時的我比較喜歡做設計與前端,看著設計稿可以變成互動網頁的過程給我很大的滿足感,再搭配 Advanced Custom Field 來建立後台的設定頁與客製化欄位,我覺得我有信心完成各種類型的專案。

因此我有一段時間都是跟朋友一起合作,他負責網站企劃、設計稿,而我把設計稿切版後跟 WordPress 進行整合,在這期間我終於搞懂了 Custom Post Type、WP Query,以及各種 WordPrress API 的應用。

也因為常用 WordPress API,讓我不再害怕接觸 PHP,不會像以前一樣只要看到它就會自動關閉心靈的聲音,還會主動看 WordPress API 的寫法,從實際的案例中去學習 PHP 的撰寫技巧,並且開始累積自己的程式碼片段。

同時也開始將前後端分離的技術應用在專案中,我採用的前端框架為 Vue.js,由於需要大量的 API 來進行資料的讀寫,也因此讓我學會了如何用 WordPress 自訂 REST API Endpoints 來取得資料,不知不覺也慢慢跨入後端的範疇。

第一次上 WordCamp Taipei

在社群夥伴的努力奔走下,終於迎來了台灣史上第一次的 WordCamp,靠著 WordPress 糊口的我當然不會錯過這次盛會,除了終於見到平常只會在社團裡聊天的大大外,我也自告奮勇上台分享平常接案在用的開發技術。

當天我還想不開用 Live Demo 來實際操作,結果真的就出包了,好加在沒花多久時間就排除,讓我再也不敢在簡報時做 Live Demo。而次年的 WordCamp Taipei 也認識了改變我接案人生的貴人,因為跟他的合作奠定了我現在的工作模式,讓我不用再為了結不了案而生活困頓。

參加完 WordCamp 覺得能以 WordPress 作為我工作的主力是我人生中第二棒的選擇,完整的生態系、龐大的工具支援、社群豐沛的能量,在台灣想找到人解決 WordPress 的問題大概就跟喝水一樣容易,如果找不到應該只是預算的問題XD

第一次經營 WordPress 主機代管服務

隨著 WordPress 的茁壯,我發現到有越來越多的中小企業需要 WordPress 的支援服務,像是主機代管、後台設定、效能最佳化、SEO 等需求,很多企業主可能自己使用 WordPress 架出一個網站雛形後,後續更進階的問題就遇到不少困難。

於是我跟工程師朋友合作,用 WordPress 架了一個形象網站、設計租賃方案、測試各家 VPS、接上定期定額金流後,來專門幫這些企業主代管主機以及排除 WordPress 的疑難雜症,這段時間我幾乎每天都在 LINE 上面回覆客戶的問題,像是他們的需求該用哪支外掛、網站變慢該怎麼辦、以及幫忙找合適的交往對象(?)

後來有許多客戶都變成了我的朋友,也成為我長期的合作夥伴,甚至還一起嘗試創業,我也在這期間學會一些伺服器管理的皮毛,從最基礎的 shell script、查看主機 log、使用 vi 改改東西,到如何使用 WP-CLI 管理 WordPress,這些都是開發佈景主題不會接觸到的領域。

第一次寫 WordPress 外掛

雖然做主機可以認識各行各業的大大,但繞了一圈我還是喜歡做開發,管主機的壓力對我來說太沈重,因此這幾年我逐漸縮編主機代管業務,把心力放在開發上。另一方面由於 Elementor 的崛起,讓純手工切版的必要性大大降低,許多朋友學習了 Elementor 後,可以不用寫任何一行 HTML/CSS 就能滿足專案的需求,這對於只會純手工切版的我來說是轉型的契機。

另一方面由於身邊都是已經有網站的客戶,該如何針對既有網站進行功能的擴充與整合才是客戶最關心的點,尤其是使用 WooCommerce 經營電商網站的客戶有非常大量的客製化需求,像是常見的金物流串接、簡訊寄送、CRM / ERP 系統整合,這些都是國外外掛無法滿足的空缺。

因此為了解決客戶的問題,我與前端漸行漸遠,每天看的東西從設計稿變成金流文件,從 HTML/CSS 變成 PHP,不知不覺我已經成為後端工程師,也就是那種如果要做 UI 會躲得遠遠的工程師XD

WooCommerce API 跟 WordPress 不太相同,它有許多複雜的資料與邏輯需要處理,尤其是要跟第三方服務串接,要考量的情境就再也不是 1px 的距離,而是安全性以及資料的流向,這對不是資訊相關科系畢業的我來說,常常需要大量的試錯才能找到正確答案。

同時也在學習該如何把 PHP 寫得更有條理,不管是從設計原則、設計模式下手,還是導入測試來驗證程式碼的正確性,這條路我走得跌跌撞撞,國內也很少針對 WordPress 的 PHP 來進行教學,只能靠著實戰來進行摸索,也努力把所學寫成文章分享出來。

第一次賣 WordPress 外掛

在摸索 WooCommerce 開發的過程中,發現到有不少需求都是國內企業主共有的,其中一個就是訂單通知的功能。在台灣 LINE 的普及率非常高,因此很多店家會希望在網站上的購買資訊可以透過 LINE 通知消費者,而這功能在台灣還沒有隨買即用的 WordPress 商業外掛。

於是我就模仿朋友的作法先在網站上寫一篇釣魚文,然後用 Photoshop 做了幾張示意圖來說明這支外掛的功能,並搭配文字說明解釋,附上一個聯繫表單,想不到來信數量輕鬆超過我設定的門檻,於是我便開始著手開發。

開發期間發生了難過的手殘誤砍事件,再加上手邊的工作耽擱,花了好幾個月的時間才把第一版的基本功能完成,結果正式開賣後一週就收到訂單,這是我十年來第一次有非專案以外的收入,而且能賣出依舊靠的是 WordPress/WooCommerce 的生態系。

隨著訂單的成長以及客戶的使用回饋,我陸續整合了台灣的簡訊商,讓店家可以用手機簡訊通知消費者訂單狀態,也增加了對於表單外掛、缺貨商品到貨通知外掛的推播通知,這支外掛已經長成店家想要的樣子。

透過販售這支外掛也讓我體會到,不用害怕競爭者或是跟別人做類似的工具,你所接觸的人事物,會逐漸把這產品發展成它應有的樣子,就像 WordPress 從早年的 CMS 競爭中脫穎而出,靠的就是在背後投入熱情的人們。

第一次發行 WordPress 電子報

而我也是對於 WordPress 抱有熱情的一顆種子,因為這熱情我在前些年報名參加 IT 鐵人賽,將這十年來用 WordPress 接案的歷程分享出來,寫完後雖然累得跟狗一樣,但總覺得意猶未盡,因此改成以每週的頻率發佈工作上遇到的問題與挑戰。

而這一寫也寫了一年半,期間也是收到非常多的回饋與鼓勵,最痛苦的時候還是遇到想寫的主題卻寫不出來,然後花上一整天的時間在掙扎,有時候會想為什麼每個禮拜都要怎麼累?週末到了不就是該好好耍廢嗎?

這些年因為身體的因素我已經沒有參加小聚了,因為小聚通常都在晚上,睡前接受過多的刺激總是會讓我頭痛失眠,進而影響接連幾天的工作狀態,有幾次我都報名好了,結果活動當天身體就出狀況,不知道是不是身體告訴我要好好待在家不要亂跑?

少了小聚的交流,我選擇用電子報的形式來回饋這個社群,把我知道的、實際遇到的狀況寫出來,這樣的交流方式對我來說是比較溫和的,因爲這個原因讓我想要繼續寫電子報,也希望能讓有志投入 WordPress 的朋友有更多的參考資料。

-

回顧這 10 年因為 WordPress 而遇到的人事物實在是多到數不清,有很多朋友也是因為 WordPress 才認識我,但我可以確定的是沒有 WordPress 就鐵定沒有現在的我,謝謝所有曾經為了讓 WordPress 變得更好而投入的朋友。

20 歲生日快樂!WordPress。

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