如何在 WordPress 中添加頁眉和頁腳代碼
已發表: 2020-10-30使用代碼自定義您的 WordPress 網站可能很可怕。 通常,您需要深入研究核心文件來修改配置或添加新參數,如果您以錯誤的方式進行操作,可能會破壞您的站點。
但是,添加頁眉和頁腳代碼往往要簡單得多。 通常,您只需要復制和粘貼特定的代碼片段。 這意味著如果您知道如何訪問您的頁眉和頁腳文件,那麼您已經過了最可怕的部分。
在本文中,我們將教您如何手動和使用插件在 WordPress 中添加頁眉和頁腳代碼。 這兩種方法都非常簡單,所以讓我們開始吧!
為什麼您可能需要在 WordPress 中添加頁眉和頁腳代碼
如果您經營一個網站,您可能至少熟悉一項需要您嵌入代碼才能連接到它的第三方服務。
一些最受歡迎的示例包括 Google Analytics、Search Console、Facebook Pixel 和許多其他涉及網站跟踪的工具。
所有這些服務都要求您在網站的頭部標籤之間添加特定的腳本。 您網站的標題是一個重要的組成部分,包括腳本、標題、樣式文件等元素。

頁腳標籤的工作方式與頭標籤類似。 從技術上講,如果您將代碼片段添加到網站的頁腳,它們的運行方式應該與您將它們包含在您的頁眉中一樣。
但是,重要的是要了解您的網站將按照包含它們的順序執行腳本。 另外,標題代碼將 在頁面加載之前運行,而頁腳代碼將在它之後運行。
如果您可以選擇並且關心網站優化,那麼將 JavaScript 移動到您網站的頁腳可以幫助加快加載時間。 但是,某些服務會明確要求您將其代碼添加到您的標頭中以避免任何執行問題。
根據經驗,如果某項服務要求您這樣做,我們建議您遵循其建議。 對於其他 JavaScript 代碼片段,請將它們放在您的 WordPress 網站的頁腳中。 CSS 代碼總是進入標題。
如何在 WordPress 中添加頁眉和頁腳代碼(2 種方法)
與 WordPress 的情況一樣,您可以通過手動修改文件或使用插件來實現相同的目標。
讓我們從討論插件方法開始。
1. 使用頭、頁腳和後期注入等插件
使用插件將代碼添加到 WordPress 中的頁眉和頁腳文件是最安全的方法。 使用插件,您無需手動修改主題文件或確保在正確的位置添加腳本。
雖然有很多不錯的插件可供選擇,但我們對這項工作的推薦是 Head、Footer 和 Post Injections 插件。

這個插件讓您可以很好地控制要在代碼中添加代碼片段的位置。 它還提供了為您的網站的移動和桌面渲染添加不同腳本的選項。
要添加插件,請轉到儀表板中的插件 > 添加新插件,然後使用搜索功能查找插件。 點擊安裝,然後激活插件。
插件激活後,您可以直接跳轉到Settings > Header and Footer 。 您會看到多個字段,您可以在其中添加代碼片段。

如果您深入研究插件的選項,您會發現它為您的代碼片段提供了許多額外的展示位置。 但是,在大多數情況下,您可以堅持使用頁眉和頁腳選項卡。

對於全局代碼,請確保將這些片段放置在On Every Page字段中。 但是,如果您只需要在主頁上運行代碼,請使用Only On The Home Page選項。
完成向您的網站添加代碼後,保存對插件的更改,您就可以開始了!
2.通過你的functions.php文件添加代碼片段
在 WordPress 中手動添加頁眉和頁腳代碼並不復雜,但它確實需要比插件方法更多的考慮。
您可以將代碼直接添加到活動主題的header.php或footer.php文件中。 您可以在/public_html/wp-content/themes/目錄中找到這些文件,方法是打開活動主題的文件夾並查看內部:

您可以通過文件傳輸協議 (FTP) 訪問這些文件,並使用您喜歡的代碼編輯器對其進行編輯。 但是,直接編輯頁眉和頁腳文件可能會很麻煩。 考慮到這一點,如果您打算使用手動方法,我們有兩個建議:
- 為您的主題創建一個子主題。 這樣,您在更新父主題時不會丟失任何自定義。
- 使用鉤子通過您的functions.php文件添加代碼。 這為手動編輯頁眉和頁腳文件提供了一種更簡潔的方法。
理想情況下,如果您計劃進行任何類型的主題定制,您應該始終使用子主題。 您可以在/wp-content/themes目錄的文件夾中訪問您的子主題的functions.php文件。
在代碼編輯器中打開functions.php文件。 要添加您想要的代碼,您需要使用wp_head 或wp_footer 鉤。
以下代碼段將您的自定義代碼添加到您網站的標題中:
add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }
如果要將代碼放入頁腳,可以使用wp_footer掛鉤而不是wp_head 。 如果需要,您還可以更改函數的名稱(test_script) 。
完成對functions.php文件的調整後,請記住保存更改,僅此而已。 您添加的任何代碼現在都應該可以工作了!
結論
許多第三方服務(例如 Google Analytics 或 Facebook Pixel)要求您將代碼片段添加到您的網站,以便它們可以連接到它。 但是,這只是您需要在 WordPress 中向頁眉和頁腳添加代碼的眾多情況之一,因此知道如何去做是值得的。
有兩種方法可以將代碼片段添加到頁眉和頁腳。 您可以使用諸如“Head, Footer and Post Injections”之類的插件,或者通過您的functions.php文件添加代碼片段。
您對如何在 WordPress 中添加頁眉和頁腳代碼有任何疑問嗎? 讓我們在下面的評論部分中討論它們!