內容目錄
歡迎回到鵠學苑！WordPress網頁設計超詳細攻略 – Google reCAPTCHA 教學 我不是機器人 驗證 按鈕 架站必學技能，在這篇 reCAPTCHA 架設的教學文章中，鵠學苑將告訴大家如何到Google 申請最新的 reCAPTCHA(v2)，以及在Contact Form 7聯絡表單中加入reCAPTCHA我不是機器人 的驗證按鈕。那麼什麼是reCAPTCHA功能呢？簡單來說就是避免有心人士使用機器人在網站中大量散播廣告或者是垃圾郵件，或者阻擋自動化的惡意軟體註冊網站創立假帳號，發表不實言論等，對於網站管理者而言是一個相當重要的WordPress相關工具。Google reCAPTCHA有分成兩種類型，一種是本篇教學要介紹的 reCAPTCHA(v2) ，另外一種則是 Invisible ReCAPTCHA ，如果說想要多了解這兩種驗證方法的差異性，可以參考這一篇文章：[ 跳過recaptcha 驗證 ] – Google Invisible reCAPTCHA 隱形驗證碼 教學 。
現在是互聯網的時代，科技的進步讓我們可以隨時隨地的使用智慧型手機無線上網，當遇到任何問題，都能夠隨時透過上網來找到答案(雖然網路上的未必是最正確的解答)，不管是哪一方面的問題，無外乎就是透過查找部落格、專業知識網站、網路論壇等等來獲得想要了解的答案，但是當網友所分享的內容並不完整或者對於答案有所疑惑，大部分的使用者都會去觀看其他網友留下的評論或回覆，一方面是尋求解答，另一方面是查看這篇文章或商品介紹得到怎樣的評價，如果多數人對於內容是保持正面傾向，那麼內容自然是可信賴度較高。
透過上述的情境描述， 相信聰明如你，應該明白無論是哪一種類型的網站，留言評價是多麽重要吧！與使用者互動的網頁區塊常常被忽略，但這個部分卻是很大程度影響到使用者對於網站內容的體驗，如果說今天我們在網路上查找 WordPress 網頁設計 的相關部落格或網站設計公司，點擊進入網站後發現在留言的區塊充滿了色情、賭博、直銷等垃圾留言或廣告，會懷疑這個站點是不是所謂的釣魚網站或者對於這個網站的內容信任度會降低，如果任由這樣的狀況發生，那對於網站的影響是相當嚴重的。本篇文章主要是以 reCAPTCHA(v2) 的驗證模式來教學，接下來跟著鵠學苑的腳步，讓我們開始學習吧！（可點擊下方Google官方影片觀看對 reCAPTCHA 介紹 ）
(小提醒：鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範！)
Google reCAPTCHA驗證申請網址
https://www.google.com/recaptcha/intro/invisible.html
第一步：首先必須要有一個Google帳號，登入之後，點擊 reCAPTCHA 進入如下圖的介紹頁面，如果確定以登入Google帳號，直接點擊右上方的 Get reCAPTCHA 。
第二步：進入後會看到如下圖所示的申請頁面，主要是為想申請reCAPTCHA驗證功能的網站列表建立API keys，填寫欄位的部分以下開始說明：
第三步：將網站加入 reCAPTCHA 驗證後，會產生如下圖所示的 keys 以及將 reCAPTCHA 放入網站的步驟，在圖中紅色方框圈選處有一段 Java script 的程式碼，要將其加入到 HTML 中 <head> 的位置，讓網站在載入時可以執行 reCAPTCHA 驗證的命令。
第四步：進入到 WordPress 後台，找到外觀→主題編輯器，如下圖中右上角的部分選擇網站使用主題的名稱，在下方列表中找到head.php這個檔案，點擊進入。
第五步：找到頁首元素的區塊，並且將剛JAVA script 的程式碼復制貼上到</head>的上方，按下儲存的按鈕，即完成加入執行reCAPTCHA驗證命令的步驟。
第一步：在如果沒有安裝 Contact Form 7 聯絡表單，可以參考這篇教學文章：Contact Form 7 教學 WordPress 表單，進入到聯絡表單的設定頁面，點選如圖一中加入reCAPTCHA 驗證的核取方塊，會出現圖二的畫面，要求安裝Api 金鑰組。
第二步：在後台側邊工具欄聯絡表單的子項目中可以找到”整合“的選項，進入後點選如下圖紅色方框所標示 設定金鑰 的按鈕。
第三步：如回到剛剛申請reCAPTCHA所顯示的數值頁面，找到keys的部分，分別有Site key及Secret key兩個欄位。
第四步：如下圖一在站台金鑰的欄位貼上Site key的數值，秘密金鑰貼上Secret key的數值，按下儲存按鈕後會跳到圖二畫面，表示設定完成。
第五步：回到聯絡表單的設定畫面，點選reCAPTCHA核取方塊。
第六步：此時reCAPTCHA驗證功能已經啟用了，因此可以插入reCAPTCHA我不是機器人的按鈕。也可以自行設定reCAPTCHA按鈕的大小以及樣式，設定完成點選插入標籤。
第七步：插入標籤後reCAPTCHA會以短代碼的方式出現在設定畫面中，這裡我將reCAPTCHA的標籤設定在傳送的上方。
第八步：回到網頁前端，可以看到reCAPTCHA驗證的按鈕已經加入成功，並開始限制惡意軟體自動發送垃圾或釣魚電子郵件的，將空間保留給真正的使用者。
第九步：檢查reCAPTCHA驗證的功能，當輸入資訊後沒有勾選我不是機器人的方框，將會出現請驗證的字串並且不能發送郵件，表示reCAPTCHA驗證功能正常運作。
在教學的最後，簡單的說明 reCAPTCHA 的應用，因為在本篇文章中是對Contact Form 7 這個WordPress外掛來做安裝示範，如果是想要加入 reCAPTCHA 驗證到留言功能中，應該要麽做？在使用 WordPress 架設的網站中，可以使用 Invisible reCaptcha for WordPress 來實現，這套外掛中只要填入在本篇教學文章中Site key及Secret key這兩個欄位的金鑰，就可以直接啟用reCAPTCHA驗證的功能到其所支援的留言外掛或網頁位置，這也是為什麽鵠學苑一直推薦大家使用 WordPress 來架站的原因，對於新手站長來說如果要透過寫入PHP來寫入程式碼以實現 reCAPTCHA 驗證的功能，其實是相當耗費時間的，在 WordPress 中透過外掛即可輕鬆完成，把時間花在其它真正該使用的地方上，才是正確的網站架設做法。今天的教學到這裡告一段落了，不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來 鵠學院 就對了！我們下次的教學見～
如何使用 Elementor 建立 WooCommerce 單一商品頁？圖文步驟教學
Elementor 選單小工具 – 客製化 Menu Widget 功能與樣式操作教學
Site Kit For WordPress – 網站後台顯示 Google 分析數據外掛教學