WordPress 開發日常 2.0

花費了將近兩個月的時間,終於把自己的部落格改版升級為可以勸敗人的購物平台了XD,一直覺得要做客戶的專案方向很清楚,就是把客戶需要的功能給實現出來,但一樣的過程換成要做自己的網站時難度就會提升 200%,每天都被自己善變的心給折騰 > <

像是今天花了兩小時選的佈景主題明天就覺得膩了、LOGO 設計了八款最後還是用了第一版、修圖修了老半天最後覺得不好看所以沒放,就這樣網站改版這件事情一直被我拖延再拖延,最後我使出了大絕招:直接發包給夥伴幫我設計建置,有了預算的壓力逼得我不再拖延。

現在回過頭來看很慶幸自己做了這樣的決定,我請了優秀的 Hend 來幫我進行整個網站的規劃、設計與建置。Hend 是 Hend Desgin 的負責人,他也是去年 WordCamp Taiwan 2021 的副總召,之所以會認識他是因為我們一起合作了幾個專案,從合作過程中看到他有絕佳的執行力與效率,同時還能維持高品質,因此當初想請人協助我改版網站時我第一個想到的就是他。

傳說中的手稿

於是我跟他約喝咖啡並且把下面這張簡陋到自己都想笑的改版需求給他看:

我每次都會跟客戶說需求手畫的也沒關係,只要能表達你想表達的就好,輪到自己這樣做時只覺得好恥,這麼鬼畫符的東西真的有人看得懂嗎?幸好 Hend 跟我一樣專業,可以很快從這些簡陋的手稿中來進一步確認需求,並且逐步釐清我的想法,就這樣,我決定把我人生第一次的發包初體驗獻給了他 😘

大概不到兩週的時間首頁的設計稿就出來了,我第一眼看到非常喜歡,舒服的配色、又帶點文青的假掰感,完全就是我這中年大叔想要的裝年輕風格:

就這樣設計階段很順利的繼續進行下去,再過了大概三週,Hend 就把這些設計稿用 Elementor 建置完成,每次看網頁從不能動的設計稿到能開始互動瀏覽點擊的過程,我自己在做時都會覺得很感動,更不用說這次是在做自己的網站,看到具體的網站後腦海中又產生了更多的想法,於是向 Hend 提出修改需求。

在提出修改需求的當下,我不停的回想起自己以前在接案時最常出現的抱怨心態:「明明設計稿都已經給你確認過了,為何到了程式開發階段還要改這個?這些應該都是在設計階段就應該提出的需求啊啊啊~」

換了位置一定會換腦袋

為了要控制專案時程,我會讓客戶在開發階段只改功能面的需求,但如果是要改色系、字型、排版這些視覺呈現的內容,我心裡就會開始不平衡,直到這次發包的經驗我才換了位置換了腦袋,親身體驗到很多想法真的是要看到設計稿呈現在網頁中才會冒出來,只看設計稿腦袋都是一片空白。

中間來回的修改過程我都很擔心 Hend 覺得我是奧客,我自己也知道做好的東西要改動都會要花很多時間處理,也知道心裡都會有微微的挫折感,整個設計改動最大的部分是導覽列,我從頂部導覽換成側邊導覽,希望可以像 WordPress 的後台一樣放很多功能選單:

同時也把首頁那張文青假掰拿掉只換上小小的大頭照,只因為自己恥力不夠一直覺得太害羞,這些修改都是可以在設計稿階段完成的,縱使可以用 Elementor 視覺化編輯器來修改,但還是不會比用設計軟體來得快速跟方便,這樣幅度的修改讓我確信自己是奧客無誤XDD

但幸好這次的合作我也是採用敏捷式接案,每當提出新的修改需求我就會想可以讓 Hend 多累積點時數降低罪惡感,而他也會很貼心的幫我做上我自己當初根本沒有想到的實用功能,同時我也學習著如何用 Elementor、JetEngine 來實現自己想要的功能,雖然很多次都想靠著寫短碼來作弊解決XD

就這樣,Hend 幫我完成了 80% 的基礎架構,我又可以開始回去糾結 LOGO 設計、統一所有 H2、H3 標題的樣式、調整自己在意的每個小細節,如果沒有 Hend 幫我完成整體架構,這兩個月我可能只會完成一顆按鈕而已。

看到多年寫的文章可以透過改版重見天日,有種在看「全能住宅改造王」翻新老屋之後的成就感~

自己在修改的當下真的很慶幸自己會做網站,讓我親身體驗到客戶會一直想要改東改西不是要找我的碴,而是因為對於這個專案投注熱情想把它做到最好,因此有好的合作模式絕對是關鍵,並且捲起袖子親手下去實做,沒有任何一個人會比你自己還關注你的產品。

新功能介紹

這一次會想要改版的目的如下:

一、資訊架構重整

是想把文章重新進行分類,讓第一次來到網站的訪客能有清楚的指引,導覽主要分為四個大項目以及數個子選單,透過群組分類的方式來容納多層內容,選單部分是採用 Max Mega Menu 製作的,然後我再用 CSS 去加入群組的標題顯示以及加入 New 的提示:

二、獨立分類頁面

其次是分類頁的顯示與說明,我讓每個分類有自己的說明介紹文字,並能顯示屬於該分類的子分類,如果你今天想要看接案相關的文章只要進入「接案學」的主分類,就能看到實務經驗、專案管理以及敏捷開發的所有文章:

三、整合電子商務功能

我把購物功能整合到文章之中,希望可以提供顧客更完整的購物體驗,如果是販售外掛的文章,我放入了購買連結,並且使用 add-to-cart 的方式讓顧客只要點擊購買按鈕後就能直接進入結帳頁完成購買,並且整合了序號的查詢,這樣就能清楚查到曾經購買過的外掛序號以及到期日:

另外為了讓顧客可以在未購買的情況下實際試用看看外掛的功能,顧客可以在文章頁面輸入電子郵件,就能收到測試站的登入帳密與連結,登入後就能試用外掛的完整功能,而這測試站會在一小時內自動刪除,藉此確保測試環境不會被有心人士加以利用:

收到的信件如下:

改版遭遇的困難

雖然是已經用了十幾年的 WordPress 但還是每天都會遇到新的問題,這次改版當然也不例外,主要問題出在建置外掛測試環境的 Demo Builder 外掛,由於它的 Single Site 授權必須要在多站網路且網址結構為子目錄的模式才能運作,但已經有內容的 WordPress 網站無法啟用這樣的模式。

幸好主機方面有另一位高人協助我,那就是 WooWP 的勇哥,他協助我把環境全部重新建置,然後我再透過 wp-cli 將資料匯入,我一直以爲在未啟用多站網路的情況下,匯出的資料是無法成功倒入多站網路的站點,經勇哥告知才知道原來是可以的,就這樣成功完成 Demo Builder 的環境設定。

然後另一個問題我卡了三天關,問題同樣也是出在 Demo Builder 身上,先簡單介紹它產出測試環境的邏輯:首先,你要先建立一個子站,然後把要提供給顧客測試的外掛與內容都先設定好,然後在前台申請表單的短碼指定這個子站的 blog id,這樣當有人申請時它就會自動從該子站複製出新的子站,並發送帳密給申請測試者。

它在子站裡面可以設定要讓測試者在後台可以看到哪些選單,藉此只顯示對測試者必要的內容:

依照上圖的設定當測試者登入測試站後台就只會看到頁面、WooCommerce、商品以及使用者的選單,顯示的部分沒問題,而問題出在當我點進商品頁或是新增頁面時卻出現「很抱歉,目前的登入身分沒有存取這個頁面的權限。」

它可以設定測試者的使用者角色,我將其設成為商店經理結果還是不行,沒道理商店經理看不到商品頁,心一橫想說直接設成網站管理員應該就沒問題了吧,結果還是不行,依照過去的經驗會出現這樣的訊息應該是 Capabilities 的問題,於是我在原始的子站安裝了 User Role Editor 來檢查權限。

檢查後發現不管是商店經理還是網站管理員都確實擁有這些頁面的造訪權限,反覆看了他們提供的操作文件我確信我沒設錯,但不管怎麼改都還是無解,於是我就寫信去請求技術支援,但遲遲未收到回覆,就在這時候我又再度慶幸自己會寫一點程式。

打開他們的程式碼後才發現到「很抱歉,目前的登入身分沒有存取這個頁面的權限。」這個錯誤訊息並非由 WordPress 本身所拋出的,而是由這支外掛所處理的,因此我一開始的除錯方向完全搞錯,問題的核心是該外掛對於權限判斷有一套自己的規則:

本想研究為何會拋出錯誤,但想想還是先以讓網站能順利上線賣東西比較重要,於是我先把有用到這個函式的勾點註解掉,註解後當測試者進入後台就會看到所有的選單,這時候再用 Admin Menu Editor 之類的外掛把選單藏起來就好,後續如果有收到原廠的回信或是更新我再補上。

後續計畫

因為這幾年的文章我都不是放在 WordPress 裡面所以還在上稿舊文章中,如果你有發現連結不見或錯誤的再跟我說。下一個階段我會以開發新外掛商品為主,同時過去的文章也已經完成了一本書籍該有的架構,剩下的就是順過內容上架販售了。

另外我也想開放聯盟行銷機制,如果你的客戶透過你的推廣連結購買能多少回饋你一些,同時如果你也有寫外掛想賣,我都很樂意寫一篇開箱文來幫你代售,希望新版的 WordPress 開發日常可以讓你發掘到以前沒看過的文章!

目錄

發佈留言

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

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

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

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

訂閱電子報

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

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

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

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

訂閱電子報

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