fbpx
WP Engine 主機優惠:首 4 個月免費 | 優惠碼:JULYCWV

如何新增 HTML、CSS 和 JavaScript 程式碼到你的網站裡?Insert Headers and Footers 外掛應用

這次分享新手很容易「卡關」和感到煩惱的問題,你有否因為 Google Search Console、Google Analytics 或 Facebook Pixel (像素) 等的站長和社交工具,要求你把一些「程式碼」放在網站某個地方而感到無所適從?WordPress 網站這麼大,到底應該要放在什麼合適的地方,我會不會放錯後,網站會被弄壞掉?放心,這次教學會引導大家使用非常安全的方法,去置入第三方的程式碼在你網站合適的位置。

常見的使用情景和實際需求參考

WordPress 外掛目錄:Insert Headers and Footers 外掛頁面
WordPress 外掛目錄:Insert Headers and Footers 外掛頁面

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 區塊

  1. 獲取相關「程式碼」和瞭解官方建議的置入方式
  2. 安裝 Insert Headers and Footers 外掛程式
  3. 在 (網站後台) > (設定) > 打開 (Insert Headers and Footers) 外掛
  4. 把相關的程式碼放置在 Header 或 Footer 區塊
  5. 重新整理網站頁面或按下 Ctrl + F5 / 清除網站的快取 Cache

Insert Headers and Footers 外掛教學影片

影片長度:8 分鐘
語言:粵語 (廣東話)
字幕:繁體中文【請打開繁體中文字幕】

「頁首 Headers」和「頁尾 Footers」 在網頁上的角色

部分程式碼容許放置在「頁首 Headers」和「頁尾 Footers」也沒有所謂,但網頁是從上而下,分別最優先會執行 HTML 裡的 <head>,然後就是 <body>,最後才是 footers 的部分,這代表你應該將重要的東西放在 Headers,反之,比較次要或不重要的東西,放在 Footers 之上,讓它慢慢跑和顯示出來即可。

我是程式設計新手,不懂如何分辨置入的時機?

絕大部分的情況,你要「不需要思考」這個問題,大公司如 Google 或 Facebook 早就為你思考這個問題,你只需要依照他們提供的參考指引去放置程式碼即可。他們要求你放在 <head>,你就放在 <head>,反之仍然。

如何【安裝】Insert Headers and Footers 外掛?

如何【安裝】Insert Headers and Footers 外掛?
如何【安裝】Insert Headers and Footers 外掛?

步驟一

在您的 WordPress 網站後台,在【外掛】裡選擇【安裝外掛】。

步驟二

進入【安裝外掛】的介面,在右方的(搜尋欄位)輸入【Insert Headers and Footers】。

步驟三

稍等片刻,您會看到【Insert Headers and Footers】的外掛資訊出現,請確保是如圖中的那個外掛。

如何【啟用】Insert Headers and Footers 外掛?

如何【啟用】Insert Headers and Footers 外掛?
如何【啟用】Insert Headers and Footers 外掛?

步驟一

在您的 WordPress 網站後台,在【外掛】裡選擇【已安裝外掛】。

步驟二

從外掛清單之中,找到免費版的【Insert Headers and Footers】的外掛,並按下【啟用】。

如何【刪除】Insert Headers and Footers 外掛?

如何【刪除】Insert Headers and Footers 外掛?
如何【刪除】Insert Headers and Footers 外掛?

步驟一

在您的 WordPress 網站後台,在【外掛】裡選擇【已安裝的外掛】。

步驟二

從外掛清單之中,找到免費版的【Insert Headers and Footers】的外掛,並按下【刪除】。

Insert Headers and Footers 設定介面

Insert Headers and Footers 設定介面
Insert Headers and Footers 設定介面

你沒有看錯,這款外掛只有「一個介面」,就是只有 3 個輸入框,讓你輸入對應的程式碼,所以非常適合什麼都不懂的新手。因為給予你太多選擇,有時可能會對引起不必要的猜疑和困惑,讓我們了解一下這些輸入框對應的功能。

區域 01 – HTML 裡 <head> 運作的區域

一些比較重要和需要優先執行的語法,一般會放在 <head>,所以在 3 個區域之中,這個是最重要和常用的。

區域 02 – HTML 裡 <body> 開頭運作的區域

像 Facebook Message 的聯天外掛等,會要求放在 <body> 開頭裡,只要依照官方的說明置入即可,我們通常不需要知道背後的運作原理。

區域 03 – HTML 裡 <head> 結尾運作的區域

承上題,這個 <head> 結尾會是最後才執行,所以一般是網頁大部分元素如圖片等等都相繼載入後,這個區域才會執行,算是放置非常次要的程式碼。

區域 04 – 確認無誤,儲存設定

這個外掛並非立即生效,除非你按下儲存設定,所以儲存之前請三思而後行,要再三確認程式碼的正確性。

3 種主流方法把程式碼插入在網頁的「頁首 Headers」和「頁尾 Footers」

直接修改 PHP 程式碼檔案【不推薦新手使用】

WordPress 檔案裡的核心文件 <header.php> 和 <footer.php> 是分別控制這個部分,但如果新手沒有任何程式背景,強烈不建議碰任何核心文件。

使用子主題 (Child Theme)【不推薦新手使用】

在 2018 年之前,這個是主流的方式,因為子主題 (Child Theme) 不會隨佈景主題和 WordPress 核心文件更新而被覆寫內容,不過隨著像 Code Snippets 這類管理程式碼的外掛出現,可以更方便維護和更新,子主題的重要性下降了,不過程式碼管理超出這次教學的範例和難度,往後有機會才會寫教學。

使用 WordPress 外掛控制程式碼【推薦新手使用】

其實像 Insert Headers and Footers 外掛這類的工具市場上有很多取替品,功能都非常類似和免費,不過這款外掛比較知名和開發團隊背景比較堅實,所以相對推薦這家,你可以搜尋其他相似外掛也可以。

案例分享:將 Google Fonts 語法置入在網站 (01)

透過存取在 Google Fonts 的字體去到我們的網站
透過存取在 Google Fonts 的字體去到我們的網站

這次案例,我們以常見的改變網站字體作為示範,透過存取在 Google Fonts 的字體去到我們的網站,首先當然需要前往 Google Fonts 官方網站,並選取出適合自己網站的字體。

案例分享:將 Google Fonts 語法置入在網站 (02)

請把這段「語法」,放置在網站 HTML 裡的「<head」位置
請把這段「語法」,放置在網站 HTML 裡的「<head」位置

然後,進入字體的字重選擇和了解置入的方式。

區域 01 – 教授如何把語法置入網站裡

描述說的 To embed a font, copy the code into the <head> of your html,意思就是請把這段「語法」,放置在網站 HTML 裡的「<head」位置。

區域 02 – HTML 語法的具體內容

隨著你選取的內容不同,這段語法也會不同,官方已經預先替我們處理好,所以我們只要複制貼上即可。

案例分享:將 Google Fonts 語法置入在網站 (03)

Insert Headers and Footers 外掛的設定位置在「網站後台」>「設定」裡,如果看不到,請重新確認是否已經正確安裝。
Insert Headers and Footers 外掛的設定位置在「網站後台」>「設定」裡,如果看不到,請重新確認是否已經正確安裝。

區域 01 – 網站後台

Insert Headers and Footers 外掛的設定位置在「網站後台」>「設定」裡,如果看不到,請重新確認是否已經正確安裝。

區域 02 – HTML 語法的具體內容

點擊 Insert Headers and Footers 名稱,進入簡單的設定介面。

案例分享:將 Google Fonts 語法置入在網站 (04)

把之前從 Google Fonts 複制的語法直接貼上來即可以看到效果
把之前從 Google Fonts 複制的語法直接貼上來即可以看到效果

區域 01 – 網站後台

把之前從 Google Fonts 複制的語法直接貼上來即可以看到效果。

區域 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 外掛程式是免費?

完全免費,也沒有提供任何收費項目和限制,這代表你可以安心地自由使用,而不必擔憂任何的額外成本和收費。

參考資料和引用文獻:

立即訂閱我們的網站

我們的團隊並不會濫發信息和廣告,每月定期會整理優惠和 WordPress 相關的更新情報,例如系統、外掛和佈景主題相關的更新,也會推送資訊安全的漏洞注要事項,確保您的網站保持和世界的連繫。

加入免費學習社團

學員人數:5,000+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術