如何將代碼放入部落格中?
3個簡單的方法快速完成
前言:什麼時候會需要放置代碼?
一個網頁是由非常多語法組織而成的,所以如果我們要讓某個工具放到網頁上(或在網頁上執行特定任務),使用的方法就會是把代碼嵌入進原先的代碼中。
而經營部落格,就會有很多時候需要將追蹤代碼放入網站中,常見的情境有:
- 放置廣告需要嵌入追蹤碼 (Google Adsense 或其他廣告聯播商)
- 申請聯盟計畫時驗證網站 (驗證你是否為真實網站管理者)
- 使用第三方的嵌入式工具 (如即時聯絡框、電郵工具等)
如果你是使用一些部落格平台,可能會無法放置代碼 (或是需要請官方幫你放置);但如果你是使用 WordPress 自架站,就可以自行在網站中放置代碼。
而這篇文章,就要來分享幾種在網站中放置代碼的方法,讓你能夠更順利完成接下來的任務。
方法一:直接到佈景主題編輯器中放置
第一種方式,就是直接到你的網站佈景主題編輯器中,把代碼放進去。這種會是最直接的方法,因為是在原始的程式碼中,直接添加新的程式碼。
但要特別注意的是,利用這種方式,每次佈景主題更新,你嵌入進去的代碼可能會被洗掉,就會需要重新加入一次。如果你想避免這樣的狀況,建議可以參考第三種方法。
要進入佈景主題編輯器,可以點選【外觀】>【佈景主題編輯器】,接著在許多的佈景主題檔案中,找到 header.php 的檔案 (如果找不到的話就用後面的其他方法)。
找到檔案並點擊後,可以看到檔案的完整程式碼,接下來我們需要從程式碼中找到 <head>,並將要嵌入網站的代碼,貼到 <head> 正後方,最後記得到下方更新檔案,就完成了。

方法二:利用WPCode(insert headers and footers)外掛
如果你覺得第一種方法太困難,或是你找半天找不到 <head>,那你可以試試看第二種方法。
第二種方法其實跟第一種道理一樣,只是有人寫了一套外掛,這套外掛叫作 WPCode (原名 insert headers and footers),裡面有個功能,可以讓這整個流程變得更簡單好操作。
step 1
首先,到 WordPress 後台新增外掛的地方,搜尋「WPCode」,會看到一個藍色 Logo 的外掛,此時就點擊【立即安裝】,安裝完後記得【啟用】。

step 2
接下來,左側清單匯出現【Code Snippets】可選擇,我們直接進入它的【header&footer】設定。
進入到設定頁面後,可以看到有很多不同區塊的編輯器,分別代表 header、body、footer,這些就是讓你選擇你要把代碼放到頁面的哪個部分,而通常我們都會直接放在 header (因為放在越前端會越快被讀取到)。
選擇 header 的編輯欄,並將代碼貼上,最後到右上角儲存,就完成了。

方法三:利用程式碼片段(Code Snippets)外掛
其實前兩種方法應該就能滿足 90% 以上的人了,但如果你今天覺得自己會有很多代碼需要嵌入,用第一種方法可能被洗掉,用第二種方法可能不好管理,那麼你可以試試看接下來的這個方法。
第三種方法是使用 Code Snippets 外掛,但這個外掛就比較進階一些,通常會是工程師用的外掛,但操作方法並不難,所以如果你更講究代碼管理的話,可以使用看看這套外掛。
step 1
到 WordPress 後台新增外掛的地方,搜尋「Code Snippets」,並將它安裝後啟用。

step 2
安裝完畢後,你的左側選單列,會看到有個【程式碼片段】的選項,點擊【新增程式碼片段】。
接下來,將代碼貼到中間程式碼編輯器中,然後為這個程式碼片段,最後按下儲存按鈕就完成了。

這邊要特別說明一下,因為有些人會發現怎麼代碼放上去按儲存後,結果跳出網站錯誤的警告。這是因為你的語法可能有些錯誤,系統無法將代碼正確嵌入到網站中。
貼上程式碼的時候,要記得檢查你的程式碼有沒有被以下的程式碼框住 (也就是你的程式碼要在 <style><style/> 中間):
add_action('wp_head',function(){ ?>
<style>
</style>
<?php });
(以下可開放複製)