為如何向WordPress頁首（head）或頁尾新增程式碼而苦惱？許多工具和跟蹤指令碼要求您將程式碼片段新增到WordPress網站的頁首或頁尾。但是，預設情況下，WordPress無法編輯這些檔案。
在本教學中，我們將向您展示如何通過使用WordPress外掛或手動將程式碼新增到您的functions.php檔案來向WordPress頁首或頁尾新增程式碼。對於大多數使用者來說，外掛方法是推薦的方法。但是中高階WordPress使用者可能更喜歡使用手動編碼方法。
如何使用外掛向WordPress頁首和頁尾新增程式碼
對於大多數使用者來說，向WordPress頁首和頁尾新增程式碼的最簡單方法是通過外掛。在下一節中使用外掛而不是手動方法的好處是：
- 如果您切換主題，您的程式碼片段將保持不變。
- 該外掛可以輕鬆地僅將程式碼片段新增到主頁的頁首或頁尾，這在某些用例中很有幫助。
- 該外掛對初學者更友好，因為它不需要深入研究程式碼。
雖然有幾個外掛提供此功能，但我們推薦Stefano Lissa的Head, Footer and Post Injections外掛，因為它比許多替代品提供更多的控制。它目前有超過200,000次活躍安裝。
Head, Footer and Post Injections外掛
第 1 步：安裝並啟用外掛
Head, Footer and Post Injections外掛在WordPress.org上免費提供，因此您可以直接從WordPress儀表盤安裝和啟用它，方法是轉到外掛 → 安裝外掛並搜尋它：
安裝外掛
第 2 步：將程式碼片段新增到外掛
啟用外掛後，您可以通過轉到WordPress 儀表板中的設定 → Header and Footer來訪問其介面。您將在外掛介面中看到許多選項卡。但是對於本指南，您將主要在預設的Header and Footer選項卡中工作：
Head, Footer and Post Injections
要將程式碼新增到站點的頁首中，您需要將其貼上到<HEAD> SECTION INJECTION區域下的框之一中：
- Every page– 將程式碼片段新增到您網站上每個頁面的標題中。這是您大部分時間想要使用的。
- Only home page– 僅將程式碼片段新增到主頁的標題中。
例如，要將Google Analytics跟蹤程式碼新增到WordPress，您只需將其貼上到Every page框中並儲存更改：
向頁面Header新增程式碼的示例
要將程式碼新增到您網站的頁尾，您可以向下滾動到BEFORE THE </BODY> CLOSING TAG (FOOTER)選項。同樣，您有兩個選項，儘管它們與Header部分不同：
- Desktop-儘管名稱如此，這會向您網站的桌面和移動版本的頁尾新增程式碼，除非您專門選中移動框。
- Mobile–選中後，您可以將不同的程式碼段新增到您網站的移動版本。
如果您只想為所有使用者新增一個程式碼片段到頁尾部分，無論他們的裝置是什麼，請將其貼上到桌面框中並取消選中移動 ：
向頁尾新增程式碼的示例
如果需要，您可以向每個框新增多個程式碼片段。
其他 – 將程式碼新增到Google AMP頁面的頁首和頁尾
這個外掛的另一個優點是，如果您使用Google AMP for WordPress，該外掛允許您專門將程式碼片段新增到Google AMP版本頁面的頁首和頁尾（只要您使用官方Automattic的AMP外掛）。
為此，請前往AMP選項卡的Header and Footer，然後將您的程式碼片段貼上到相應的框中：
Google AMP介面
如果您只是需要在站點範圍內新增不同的PHP函式，我們還建議您檢視免費的Code Snippets外掛。它消除了將自定義片段新增到主題的functions.php 檔案的需要。它目前有超過100,000次活躍安裝。
WordPress外掛-Code Snippets
如何手動將程式碼新增到WordPress頁首和頁尾
如果您不熟悉 PHP 的基礎知識，我們建議您堅持使用上面的外掛方法。手動方法對您來說可能過於複雜。
在本節中，您將學習如何通過functions.php檔案手動將程式碼片段新增到主題的頁首和頁尾。
如果您想通過上一節中的外掛繼續使用此方法，則必須使用WordPress子主題進行編輯。如果您不使用子主題，那麼如果您更新WordPress主題，您新增到頁首或頁尾的任何程式碼都將被覆蓋。
許多開發人員提供了子主題。準備好子主題後，您可以繼續執行以下步驟將程式碼新增到主題的頁首或頁尾。
雖然您可以將程式碼片段直接新增到header.php和footer.php檔案中，但更好的方法是使用您的functions.php檔案和適當的 WordPress 掛鉤。這使您可以將所有片段儲存在一個地方，避免修改核心主題檔案。
第 1 步：準備程式碼片段
為了讓您開始，我們將為您提供一個粗略的框架來向頁首和頁尾新增程式碼。
要將程式碼新增到您的header，請使用以下程式碼片段：
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
};
要將程式碼新增到頁尾，請使用以下程式碼片段：
/* Describe what the code snippet does so you can remember later on */
add_action('wp_footer', 'your_function_name');
function your_function_name(){
?>
PASTE FOOTER CODE HERE
<?php
};
對於每個片段，請確保更改：
- 註釋說明（當您需要記住一年後程式碼片段的作用時很有用）
- 所述your_function_name佔位符（這兩種情況下）
- 該PASTE X程式碼在這裡佔位符
第 2 步：將程式碼片段新增到子主題中的functions.php 檔案中
準備好相關程式碼片段後，您需要將它們新增到子主題的functions.php檔案中。您可以通過FTP連線到您的站點來編輯此檔案。或者，您可以轉到外觀 → 編輯器並選擇functions.php檔案。然後，將您的程式碼貼上到檔案末尾：
在functions.php檔案中新增程式碼
確保儲存您的更改並完成！
其他：僅針對特定頁面將程式碼新增到頁首或頁尾
如果您想更好地控制頁首或頁尾程式碼片段的顯示位置，可以使用if語句僅將程式碼新增到WordPress網站上的特定頁面。
例如，要僅將程式碼片段新增到主頁的頁首或頁尾，您可以使用：
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_front_page()) { ?>
PASTE HEADER CODE HERE
<?php }
};
另一種選擇是僅將程式碼片段新增到特定的文章或頁面。為此，您可以使用以下程式碼片段：
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_single(73790)) { ?>
PASTE HEADER CODE HERE
<?php }
};
確保將示例編號 – 73790 – 替換為您想要新增程式碼片段的文章或頁面的實際ID。
評論留言