這篇文章最後更新日期：2023 年 3 月 31 日
作者： Mack Chan
這次分享新手很容易「卡關」和感到煩惱的問題，你有否因為 Google Search Console、Google Analytics 或 Facebook Pixel (像素) 等的站長和社交工具，要求你把一些「程式碼」放在網站某個地方而感到無所適從？WordPress 網站這麼大，到底應該要放在什麼合適的地方，我會不會放錯後，網站會被弄壞掉？放心，這次教學會引導大家使用非常安全的方法，去置入第三方的程式碼在你網站合適的位置。
Youtube 教學影片：
| 影片長度： | 11 分鐘 |
| 語言： | 國語 |
| 字幕： | 繁體中文 |
常見的使用情景和實際需求參考
Insert Headers and Footers 是一款很簡單的工具，讓新手可以在不懂任何編程技術的情況之下，應對像 Google 應用服務或 Facebook 類別的要求，新手不會看到如何插入程式碼就停止學習的步伐。當然如果基礎知識比較不足之下，仍然會感到一絲迷惑，但這外掛的確解決了大部分的疑難。
- 加入谷歌網站管理員工具 (Google Search Console) 追蹤碼，它是 Google 開發的一個面向網站管理員的免費工具，網站管理員可以通過該工具了解自己網站的收錄情況並最佳化其網站的曝光率。
- 加入 Google分析 (Google Analytics) 追蹤碼，它是一個由 Google 所提供的網站流量統計服務，現在是網際網路上使用最廣泛的網路分析服務，還提供了一個 SDK，允許從 iOS 和 Android 應用程式收集使用資料，稱為 Google Analytics for Mobile Apps。
- 將 Facebook Pixel (像素) 的追蹤碼 置入你的網站裡，並持續收集有效的用戶數據和轉換動作，這是網上行銷和廣告投放的基本功。
- 把 Google Fonts 雲端字形置入網站，你只需要把相關的代碼放在合適的位置即可。
- 商業合作，如果您跟一些商業合作單位進行一些企劃或活動的合作，對方可以要求把一個可以追蹤成效的追蹤碼置入你的 HTML 程式碼之中，當然這是商業合作領域常見的做法，一般部落格網站就比較少這類舉動。
5 個步驟和觀念插入 Header 或 Footer 區塊
- 獲取相關「程式碼」和瞭解官方建議的置入方式
- 安裝 Insert Headers and Footers 外掛程式
- 在 [網站後台] > [設定] > 打開 (Insert Headers and Footers) 外掛
- 把相關的程式碼放置在 Header 或 Footer 區塊
- 重新整理網站頁面或按下 Ctrl + F5 / 清除網站的快取 Cache
「頁首 Headers」和「頁尾 Footers」 在網頁上的角色
部分程式碼容許放置在「頁首 Headers」和「頁尾 Footers」也沒有所謂，但網頁是從上而下，分別最優先會執行 HTML 裡的 <head>，然後就是 <body>，最後才是 footers 的部分，這代表你應該將重要的東西放在 Headers，反之，比較次要或不重要的東西，放在 Footers 之上，讓它慢慢跑和顯示出來即可。
我是程式設計新手，不懂如何分辨置入的時機？
如何 [安裝] Insert Headers and Footers 外掛？
步驟一：
步驟二：
步驟三：
如何 [啟用] Insert Headers and Footers 外掛？
步驟一：
步驟二：
如何 [刪除] Insert Headers and Footers 外掛？
步驟一：
步驟二：
Insert Headers and Footers 設定介面
你沒有看錯，這款外掛只有「一個介面」，就是只有 3 個輸入框，讓你輸入對應的程式碼，所以非常適合什麼都不懂的新手。因為給予你太多選擇，有時可能會對引起不必要的猜疑和困惑，讓我們了解一下這些輸入框對應的功能。
區域 01 – HTML 裡 <head> 運作的區域
區域 02 – HTML 裡 <body> 開頭運作的區域
區域 03 – HTML 裡 <head> 結尾運作的區域
區域 04 – 確認無誤，儲存設定
3 種主流方法把程式碼插入在網頁的「頁首 Headers」和「頁尾 Footers」
直接修改 PHP 程式碼檔案【不推薦新手使用】
使用子主題 (Child Theme)【不推薦新手使用】
使用 WordPress 外掛控制程式碼【推薦新手使用】
案例分享：將 Google Fonts 語法置入在網站
這次案例，我們以常見的改變網站字體作為示範，透過存取在 Google Fonts 的字體去到我們的網站，首先當然需要前往 Google Fonts 官方網站，並選取出適合自己網站的字體。
步驟二：將 Google Fonts 語法置入在網站
然後，進入字體的字重選擇和了解置入的方式。
區域 01 – 教授如何把語法置入網站裡
<head> of your html，意思就是請把這段「語法」，放置在網站 HTML 裡的「<head>」位置。區域 02 – HTML 語法的具體內容
步驟三：將 Google Fonts 語法置入在網站
區域 01 – 網站後台
區域 02 – HTML 語法的具體內容
步驟四 ：將 Google Fonts 語法置入在網站
區域 01 – 網站後台
區域 02 – 確認正確無誤，請記得儲存資料
總結：
Insert Headers and Footers 外掛作為業界內標誌性的產品，自然帶來很多模仿者，不過由於技術門檻相對不高，現在不少 WordPress 佈景主題或頁面編輯器已經內建了類似的功能。這款外掛的缺點是無法處理 PHP 或其他更進階的程式語言需求，這點用家可以要往研究 Code Snippets 這類管理程式碼的外掛發想。不過新手比較想碰到都是像 Google 或 Facebook 等的驗證或置入追蹤碼的簡單需求，這套外掛簡單免費而實用，足夠應付有餘。
常見問題 FAQ
如何在 WordPress 新增 Header 和 Footer 程式碼？
獲取相關「程式碼」和瞭解官方建議的置入方式
安裝 Insert Headers and Footers 外掛程式
在 [網站後台] > [設定] > 打開 (Insert Headers and Footers) 外掛
把相關的程式碼放置在 Header 或 Footer 區塊
重新整理網站頁面或按下 Ctrl + F5 / 清除網站的快取 Cache
Insert Headers and Footers 外掛程式是免費嗎？
完全免費，也沒有提供任何收費項目和限制，這代表你可以安心地自由使用，而不必擔憂任何的額外成本和收費。
參考資料和引用文獻：
- 維基百科：什麼是 HTML
- 維基百科：什麼是 CSS
- 維基百科：什麼是 Javascript
- WordPress 外掛目錄：Insert Headers and Footers
- 什麼是 Facebook Pixel (像素)？
- 什麼是谷歌網站管理員工具 (Google Search Console)？
- 什麼是 Google分析 (Google Analytics)？
- HubSpot：How to Insert Headers and Footers on Your WordPress Website
- 網站迷谷：什麼是傳統編輯器 (Classic Editor)
- 網站迷谷：什麼是區塊編輯器 (Block Editor)
- WPBeginner：How to Add Header and Footer Code in WordPress (the Easy Way)
我們提供市場上最新的網站架設
新聞、教學和相關知識，我們不會向用戶
發送垃圾和推廣內容，而你可以隨時「取消訂閱」。
WordPress 學員人數
12,000+ 人 (持續增加之中)
謝謝這麼清楚的分享!
想請問一下，我將原本在GA設定的網站資源刪除，重新建立了一個；但是wordpress後台insert headers and footers 中的 head內容卻不能刪除 (移除外掛再安裝也一樣是舊的head內容)，請問應該怎麼辦?
謝謝
您好 Alison，初步瞭解你的情況，不過到底是「無法更新」？還是更新之後，系統仍然找取舊的內容？在網站設計的領域，如果發現更新後，內容仍然是「舊」的。一般我們會懷疑是網站的快取 (Cache) 外掛引起，請停用快取外掛數天，並將其他快取功能停用，例如主機快取和瀏覽器快取。
由於這裡無法上傳圖片，建議你將這個問題，發去我們的 WordPress 討論社團，那邊可以作更深入的探討和研究，感謝 ^_< https://www.facebook.com/groups/wp.valley/