profile

WordPress 開發日常

WordPress 註冊 Email 驗證外掛

Published 8 months ago • 1 min read

記得小時候生病三天就可以生龍活虎,超過 40 歲後一感冒沒有七天以上好不了。上週感冒躺平了整整一個禮拜,症狀緩解後又出現之前得新冠肺炎的腦霧症狀,除了工作無法集中精神外,走路還會頭暈,生病拖累了原本預定的工作進度,還好吃了中藥有慢慢改善,也因此電子報的發刊期間不太固定,還請見諒,只要有體力我一定會努力出刊~

距離 WordCamp Taiwan 剩下不到一個月的時間,我正在如火如荼的製作簡報中,聽到一些朋友說怕會聽不懂所以不敢報名,我就跟他說去 WordCamp 聽演講是其次,重點是在休息時間可以跟同樣在使用 WordPress 但卻是不同產業的朋友交流,聊得來還可以促成日後的合作機會,我的貴人就是這樣跟他在 WordCamp 相認的。

因此,如果 10/14 當天你沒事的話,可以趕快到這邊去搶最後幾張的票,今年報名的速度飛快,一轉眼就快賣光了,證明 WordPress 在台灣的市場一年比一年成長,我有以 WP 開發日常的名義贊助擺攤,如果你當天會出現的話記得來找我,讓我可以當面謝謝你的支持訂閱電子報!

這週開發了兩支新外掛,介紹如下:

WordPress 註冊 Email 驗證外掛

前陣子朋友的網站一直深受假帳號註冊的困擾,雖然沒有造成實質上的損失,但卻增加了管理成本,特別是在活動期間這些假帳號開始洗抽獎資格,進而影響到真實會員的權益。雖然後來裝上了機器人驗證與 Email 信件驗證來排除該問題,但對於使用上多少還是有些不便利。

對註冊的會員來說需要通過 reCAPTCHA 的考題,然後還要再開啟信箱點選驗證信才能開通帳號,對管理員來說設定 reCAPTCHA 也有一定的申請步驟跟流程,於是我就在思考有沒有更快速又便利的解決方案。

何謂有效的 Email?我將它定義為可以收得到信的電子郵件,至於該如何確定這個信箱可以收信,很簡單,實際發信過去看看,如果對方信箱回應的狀態碼是正確的,那麼這個 Email 就是有效,抱持著這個思路,我跟夥伴開發了 WP Mail Checker 外掛,運作畫面如下:

只要啟用外掛後,所有電子郵件欄位就會在使用者輸入時同步進行檢查,檢查的方式是透過 API 進行呼叫,流程是先進行 DNS 檢查信箱網址,通過的話再使用程式實際發信測試,如果測試回垂結果告知不能收信,就會返回如上圖的錯誤訊息,要求使用者更換一個信箱。

除此之外,WooCommerce 的結帳欄位、登入註冊表單中的電子郵件也會做這個檢查,準確的說是只要有需要輸入電子郵件的地方,在外掛啟用後都會自動加入發信測試判斷,身為管理者你的設定成本是零,而會員也不用再實際去收件後點擊驗證連結,藉此降低註冊的阻力:

後來發現這樣的做法雖然可以避免輸入收不到信的信箱,但現在有許多一次性的臨時信箱可以使用,我們的解決辦法是在後台提供設定項來設定能夠註冊的信箱網址,像是限定 gmail 或是 hotmail,如果站長不介意註冊者使用臨時信箱註冊,留空不設定即可:

我們希望把驗證電子郵件這件事做到最單純,不管是對註冊者還是管理者都一樣,能夠用最少的步驟完成驗證信箱是我們設計這支外掛的目標。該外掛目前還在進行更多的測試,如果你有這樣的需求可以來信跟我說,我會在正式釋出後的第一時間通知你!

WordPress Meta Pixel 設定外掛

有在處理廣告投放需求的朋友應該聽過 Meta 像素的設定,前陣子幫忙客戶設定後才知道原來現在除了透過瀏覽器端的追蹤,還可以從伺服器這邊來傳送相關的事件,避免因為瀏覽器本身的限制而讓追蹤失敗。

透過伺服器傳送的方式叫做轉換 API,他有一系列的事件可以設定,像是購物網站加入購物車、購買等事件,或是也可以自訂客製化的事件,然後每個事件可以加入相對應的參數,就能在企業管理平台看到對應的數據。

目前該功能最多人使用的應該是 PixelYourSite 這支外掛,安裝數有超過 40 萬,而 Meta 本身也有提供 facebook-for-woocommerce 的外掛,這兩支外掛可以設定的功能很多,尤其是前者,提供除了 Meta 以外的追蹤設定,像是 Google Analytics、Google Ads,甚至還有 Pinterest 與 TikTok。

但也因為可以支援的管道很多,每個管道的設定環境有有點不太一樣,因此在設定事件時會看到所有管道的設定選項,如果單純只是想用 Meta 像素的話這個設定介面比較不直覺,容易被太多的選項干擾。

抱持著這樣的出發點,我們開發了一款全新的外掛名為 WP Meta Pixel,顧名思義就是只專注在 Meta 像素的設定上,希望讓站長可以以非常簡潔的方式來完成設定,並且不用寫任何一行程式碼就能完成事件追蹤,操作介面如下:

1. 新增像素

從左側 Meta Pixel 選單點選新增,在文章標題的地方輸入像素 ID,並將狀態設定為啟用,這樣就完成像素基底程式碼的安裝,在網站上的所有頁面都會置入該像素程式碼:

2. 設定標準事件與觸發頁面

接下來點選啟用事件,選擇事件的類型以及會觸發該事件的所在頁面,事件數量沒有上限,同一個事件也能在多個頁面進行觸發:

3.設定轉換 API

為了可以更精準的取得事件觸發的成效,該外掛也整合了轉換 API 的設定,只要點選啟用後,把事件管理後台中的 Token 貼入即可:

4.設定自訂事件與觸發頁面

除了 Meta 的標準事件外,還可以依照需求加入自訂事件,這樣在事件管理後台中就能方便辨識:

WP Meta Pixel 會自動去帶入使用者的電子郵件、造訪 IP 位置,一些比較特殊的事件像是加入願望清單、訂閱等也會支援 WooCommerce 常見的相關外掛,讓事件追蹤可以更完整的支援 WordPress 生態系。

如果你最近剛好有設定 Meta Pixel 的需求並且覺得現有的解決方案都不好用,歡迎來信跟我說,我會在該外掛正式釋出後通知你!

-

最近朋友凹我幫他宣傳一下徵才訊息:https://www.linkedin.com/jobs/view/3712795506/

他們主要在做 AI 相關的產品,需要一堆我看不懂的技術,像是 LangChain、LLM、LLaMA-2 等一堆 L 的知識,產品本身主要是協助電商平台的銷售,如果你略懂機器學習、對新創公司擁有無限的憧憬,趕緊去跳坑吧!我們下期見!

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