如何在 WordPress 中添加頁眉和頁腳代碼

已發表: 2022-09-19

WordPress 平台在幫助那些沒有編碼經驗的人實現幾乎任何類型的功能方面做得很好。 但是，在某些情況下，您需要在 WordPress 中添加頁眉和頁腳代碼，以幫助第三方服務嵌入自己的功能。

最典型的用例是將 Google Analytics 集成到您的網站中。 但是，您還有很多其他原因想要執行此操作——您可能已經知道為什麼要執行此任務。

在本教程中，我們將向您展示幾種在 WordPress 中添加頁眉和頁腳代碼的方法。 不過，首先，我們將首先了解您希望這樣做的各種原因。

使用網站頁眉和頁腳中的額外代碼可以實現什麼

一個標準的網站會分解成幾個不同的組件，就像一個文本文檔：

  • 標題。 您網站的標頭包含許多“預加載”元素，以及有關您的安全套接字層 (SSL) 證書、加密、任何 JavaScript 等的詳細信息。
  • 頁腳。 這與您的標題類似，但最終位於頁面底部。
  • 身體。 您在網站上實現的大部分功能都在內容的“正文”中。 這是 WordPress 儀表板中幾乎所有內容的主要焦點，正文代表您在頁面上看到的內容。

服務器將以線性方式加載頁面——頭部、正文、頁腳。 這意味著標題中的代碼將首先加載，但頁腳代碼將在其他所有內容之後加載。

日常代碼片段用例

社交媒體和搜索引擎優化 (SEO) 工具通常需要您在 WordPress 中添加標頭代碼。 這是因為這些服務在站點加載時必須優先考慮，以便記錄之後的所有內容。

CSS 代碼的情況與此類似，因為這決定了您網站的外觀。 如果這是在頁腳中，您會在看到樣式之前看到一系列佈局更改。

雖然 JavaScript 可以幫助我們生成、查看現代網站並與之交互，但它不是必需的組件（在技術意義上）。因此，頁腳中的 JavaScript 在許多情況下會給你帶來更好的性能，如果你有的話選項，你應該去。

事實上，還有更多用例，我們將在 WPKube 博客上的另一篇文章中更詳細地介紹它們。 但是，在典型的 WordPress 情況下，您無權訪問網站的頁眉和頁腳元素。 為此，您需要親自動手，或尋求外部幫助。

如何在 WordPress 中添加頁眉和頁腳代碼（2 種方式）

在本文的其餘部分，我們將介紹在 WordPress 中添加頁眉和頁腳代碼的兩種方法。 兩者都很簡單，但我們更喜歡其中一個：

  1. 您可以使用插件來幫助您將代碼添加到站點的正確區域。
  2. 您可以將代碼添加到您的functions.php文件中，並且您需要具備有關如何訪問站點文件的額外知識。

我們將首先查看插件選項，原因我們稍後會解釋。

1.使用插件將代碼添加到您的頁眉和頁腳

如果您想在 WordPress 中實現某些功能，插件應該為您完成這項工作。 在大多數情況下，我們會將插件視為 WordPress 網站的默認插件。 因此，如果您想在 WordPress 中添加頁眉和頁腳代碼，嵌入代碼插件將是理想的：

來自 WordPress.org 的嵌入代碼插件。

這是我們的姊妹網站 DesignBombs 開發的解決方案，它為您提供了一種快速、輕鬆的方式來將代碼添加到您的整個網站、特定頁面或帖子，甚至自定義帖子類型。

要使用它，您將以典型的 WordPress 方式安裝和激活插件。 此過程完成後，您將在儀表板上看到一個新的設置 > 嵌入代碼選項：

WordPress 儀表板上的嵌入代碼鏈接。

在此屏幕上，您會發現兩個文本區域：一個用於頭部，一個用於頁腳。 您甚至會得到關於您輸入的代碼在 HTML 中的位置的提示：

WordPress 設置中的全局嵌入代碼頁眉和頁腳部分。

使用這個工具非常簡單。 輸入代碼後，保存更改。 這將在全局（即站點範圍）級別上添加任何代碼。 但是，您可能只想將代碼添加到單個帖子或頁面。 您可以通過塊編輯器執行此操作 - 您需要的元框和選項位於屏幕底部：

單個塊編輯器頁面上的嵌入代碼插件元框。

雖然嵌入代碼是我們的首選方法，並且您應該盡量避免大驚小怪，但還有另一種方法可以讓您獲得所需的結果。 我們接下來看看這個。

2. 將代碼片段添加到您的functions.php文件中

每個 WordPress 安裝都可以訪問其頂級或特定主題目錄中的專用functions.php文件。 這使您能夠添加代碼片段以幫助 WordPress 使用更多功能。 但是，在開始之前，您需要了解並具備一些先決條件：

  • 您使用安全文件傳輸協議 (SFTP) 訪問您的 WordPress 核心文件 - 以及擴展的functions.php文件。因此，您需要了解它是如何工作的，以便找到您的站點文件並使用它們。
  • 我們還建議您使用子主題，以便在相關主題收到更新時保留您的更改。
  • 您至少需要 WordPress 鉤子、操作和過濾器的工作知識。 更重要的是，您需要了解 WordPress 如何通過這些鉤子訪問您的頁眉和頁腳。

在使用 SFTP 時，WPKube 提供了一些您可以考慮閱讀的文章：

  • 安全文件傳輸協議 (SFTP) 初學者指南
  • 如何使用 FileZilla：分步指南
  • WordPress 文件權限初學者指南

您可能還想查看 WordPress Developer hook 庫，尤其是wp_head和wp_footer的條目，儘管這是可選的，因為您不會以嚴厲的方式使用它們。

從這裡開始，該過程需要幾個步驟。 首先，在您的 SFTP 客戶端中打開您網站的服務器，然後導航到wp-content/themes 。 在這裡，打開您當前主題的目錄，並查找相關的functions.php文件：

在文本編輯器中打開主題的 functions.php 文件。

您需要在您喜歡的文本或代碼編輯器中打開此文件。 在其中，您可以放置​​以下代碼段模板：

 add_action( 'wp_head', '<SNIPPET_NAME>' ); function <SNIPPET_NAME>() { ?> <!-- Place your HTML code or other script here. --> <?php }

簡而言之，這將使用您稱之為<SNIPPET_NAME>的任何內容為 WordPress 添加一個操作掛鉤。 在函數本身中，您將在註釋行（即以<!--開頭的行）下方替換或鍵入。如果您想將代碼添加到頁腳，您需要將'wp_head'替換為'wp_footer'並繼續正常。

保存更改後，這應該適用於您的站點。 根據您添加的代碼，前端頁面本身、WordPress 儀表板甚至第三方儀表板中都應該有一些可見的內容。

包起來

雖然 WordPress 不需要典型的編碼知識即可完全使用，但在某些情況下，您可能需要在 WordPress 中添加頁眉和頁腳代碼。 例如，您可能想要使用分析，這是破解網站文件的常見原因。

這篇文章介紹了兩種將代碼添加到頁眉和頁腳的不同方法：

  • 諸如嵌入代碼之類的插件可讓您使用儀表板向 WordPress 添加頁眉和頁腳代碼。 因此，您只需複制和粘貼，無需擔心訪問您的服務器。
  • 但是，如果您有相關知識，您可以將代碼片段添加到您的functions.php文件中。 您需要 SFTP 知識，以及對 WordPress 文件的一點經驗，但這種方法與插件選項一樣好。

您將使用什麼方法在 WordPress 中添加頁眉和頁腳代碼？ 在下面的評論部分讓我們知道！