如何將代碼放入部落格中

如何將代碼放入部落格中？

3個簡單的方法快速完成

前言：什麼時候會需要放置代碼？

一個網頁是由非常多語法組織而成的，所以如果我們要讓某個工具放到網頁上(或在網頁上執行特定任務)，使用的方法就會是把代碼嵌入進原先的代碼中。

而經營部落格，就會有很多時候需要將追蹤代碼放入網站中，常見的情境有：

  • 放置廣告需要嵌入追蹤碼 (Google Adsense 或其他廣告聯播商)
  • 申請聯盟計畫時驗證網站 (驗證你是否為真實網站管理者)
  • 使用第三方的嵌入式工具 (如即時聯絡框、電郵工具等)

如果你是使用一些部落格平台，可能會無法放置代碼 (或是需要請官方幫你放置)；但如果你是使用 WordPress 自架站，就可以自行在網站中放置代碼。

而這篇文章，就要來分享幾種在網站中放置代碼的方法，讓你能夠更順利完成接下來的任務。

方法一：直接到佈景主題編輯器中放置

第一種方式，就是直接到你的網站佈景主題編輯器中，把代碼放進去。這種會是最直接的方法，因為是在原始的程式碼中，直接添加新的程式碼。

但要特別注意的是，利用這種方式，每次佈景主題更新，你嵌入進去的代碼可能會被洗掉，就會需要重新加入一次。如果你想避免這樣的狀況，建議可以參考第三種方法。

要進入佈景主題編輯器，可以點選【外觀】>【佈景主題編輯器】，接著在許多的佈景主題檔案中，找到 header.php 的檔案 (如果找不到的話就用後面的其他方法)。

找到檔案並點擊後，可以看到檔案的完整程式碼，接下來我們需要從程式碼中找到 <head>，並將要嵌入網站的代碼，貼到 <head> 正後方，最後記得到下方更新檔案，就完成了。

進入佈景主題編輯器貼上程式碼

方法二：利用WPCode(insert headers and footers)外掛

如果你覺得第一種方法太困難，或是你找半天找不到 <head>，那你可以試試看第二種方法。

第二種方法其實跟第一種道理一樣，只是有人寫了一套外掛，這套外掛叫作 WPCode (原名 insert headers and footers)，裡面有個功能，可以讓這整個流程變得更簡單好操作。

step 1

首先，到 WordPress 後台新增外掛的地方，搜尋「WPCode」，會看到一個藍色 Logo 的外掛，此時就點擊【立即安裝】，安裝完後記得【啟用】。

WPCode

step 2

接下來，左側清單匯出現【Code Snippets】可選擇，我們直接進入它的【header&footer】設定。

進入到設定頁面後，可以看到有很多不同區塊的編輯器，分別代表 header、body、footer，這些就是讓你選擇你要把代碼放到頁面的哪個部分，而通常我們都會直接放在 header (因為放在越前端會越快被讀取到)。

選擇 header 的編輯欄，並將代碼貼上，最後到右上角儲存，就完成了。

WPCode設定

方法三：利用程式碼片段(Code Snippets)外掛

其實前兩種方法應該就能滿足 90% 以上的人了，但如果你今天覺得自己會有很多代碼需要嵌入，用第一種方法可能被洗掉，用第二種方法可能不好管理，那麼你可以試試看接下來的這個方法。

第三種方法是使用 Code Snippets 外掛，但這個外掛就比較進階一些，通常會是工程師用的外掛，但操作方法並不難，所以如果你更講究代碼管理的話，可以使用看看這套外掛。

step 1

到 WordPress 後台新增外掛的地方，搜尋「Code Snippets」，並將它安裝後啟用。

Code Snippets

step 2

安裝完畢後，你的左側選單列，會看到有個【程式碼片段】的選項，點擊【新增程式碼片段】。

接下來，將代碼貼到中間程式碼編輯器中，然後為這個程式碼片段，最後按下儲存按鈕就完成了。

Code Snippets設定

這邊要特別說明一下，因為有些人會發現怎麼代碼放上去按儲存後，結果跳出網站錯誤的警告。這是因為你的語法可能有些錯誤，系統無法將代碼正確嵌入到網站中。

貼上程式碼的時候，要記得檢查你的程式碼有沒有被以下的程式碼框住 (也就是你的程式碼要在 <style><style/> 中間)：

add_action('wp_head',function(){ ?>
    <style>



    </style>
<?php });

(以下可開放複製)

step 3

如果未來有不同的代碼，都可以用同一個外掛新增，並且能夠直接利用後台的切換開關來管理，像是如果暫時不需要某段代碼的話，就可以將它按鈕切換至關閉。

Code Snippets管理

結論：如果沒成功就換一種方法

以上是教大家將代碼放入部落格的方法，會了這些方法，在整個部落格運營上，會更加順暢。

而如果你試了任何一種方法，發現好像沒有成功將代碼嵌入網站，那我會建議直接換一種方法，因為我自己在實務上，也常常會遇到放上去後結果沒反應的狀況，通常換一種方法就會解決了。

而如果你還想要學習更多關於部落格經營的小知識，歡迎點擊下方按鈕，看看我為你準備的資源。

DEAN閱

你也想要打造一個有品牌的部落格嗎？

我每周都會親自寫一封信與我的訂戶聊聊，而從中我將大家回饋最多的內容，重新編修，整理成一堂名為「DEAN 閱」的文字產品，如果你是想利用部落格經營個人品牌的新手，我相信這些實戰內容，會對你非常有幫助。

現在輸入【deanlife】，即可獲得 Dean 讀者專屬折扣。

立即輸入 deanlife 獲取 100 元折扣

部落格經營相關文章

【手機版 表格資訊在下方】

加入創作者社團 部落格DNA
如何將代碼放入部落格中？3個簡單的方法快速完成 1

相關文章

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

產品&服務
產品&服務
error: 內容已被保護！
Scroll to Top