WordPress 組裝多個 PHP 模板文件,以在瀏覽器中向用戶呈現可讀的內容。WordPress 主題包含 header.php、footer.php、single.php(用於帖子)、page.php(用於頁面)和 sidebar.php 文件,最新的主題使用額外的模板部分來生成主要內容。
當您在瀏覽器中查看 WordPress 頁面時,所有這些模板都被整齊地組裝和顯示。通常,您不需要修改這些文件,並且有插件可用於插入自定義功能。但是,在某些情況下,您需要在 WordPress 的頁眉和頁腳部分中插入代碼。
在本文中,我們將解釋如何在沒有插件和使用插件的情況下做到這一點。
為什麼要在頁眉或頁腳中插入代碼?
頁眉和頁腳部分可以方便地進行各種代碼集成以及為您的站點添加額外的功能。以下是一些要求您在 WordPress 網站的頁眉和頁腳中插入代碼的最佳示例。
- 插入來自 Google AdSense 的自動廣告代碼或來自任何其他廣告程序的標頭出價廣告代碼。
- 安裝 Google Analytics 和 Facebook Pixel 跟踪代碼。
- 插入來自 Bing Webmaster Tools、Google Search Console、百度、Yandex 和任何其他平台(如 Pinterest)的驗證碼。
- 在頁眉中添加自定義 CSS,例如在頁腳中添加 Google 字體樣式表和 JavaScript。
- 使用 Yoast SEO 等插件時,在標題中插入自定義組件,如麵包屑。
如您所見,根據您的需要,列表會更長。
在 WordPress 的頁眉和頁腳部分添加代碼
默認情況下,WordPress 不提供在頁眉和頁腳部分插入代碼的任何選項。簡單的選擇是直接編輯文件並插入您的代碼。但是,也有可用於此目的的插件。在本文中,我們將解釋在任何 WordPress 網站的頁眉和頁腳部分添加代碼的兩種方法。
- 手動編輯 WordPress 主題的 header.php 和 footer.php 文件。
- 使用插入頁眉和頁腳插件無需文件編輯即可添加代碼。
此外,我們還將解釋使用一些主題在頁眉和頁腳中使用 wp_head 和 wp_footer 鉤子插入代碼。
手動插入 WordPress 頁眉和頁腳代碼
此選項需要在您的 WordPress 站點主題中編輯 header.php 或 footer.php 文件,並且可能對初學者不友好。
- 首先,從準備代碼片段或從第三方站點複製開始。準備好頁眉和頁腳代碼後,將鼠標懸停在站點儀表板中的“外觀”菜單上,然後單擊“主題編輯器”選項卡。
- 忽略您收到的任何警告消息,並從“選擇要編輯的主題:”下拉列表中選擇您的活動主題。
- 選擇當前視圖右側的“header.php”或“footer.php”文件。
- 對於頁眉,確保將代碼粘貼在結束“”標記下方,然後頁腳的代碼應在““ 標籤。有時,您可能還需要在結束標記之前插入代碼。
- 最後,單擊“更新文件”按鈕以使用添加的代碼段將更改保存到您的站點。
確保測試您的站點並檢查您插入的功能是否按預期工作。
使用插件插入 WordPress 頁眉和頁腳代碼
默認情況下,WordPress 允許您在“外觀 > 自定義 > 附加 CSS”部分下將自定義 CSS 添加到您的網站。但是,您不能在該部分中插入 JavaScript。有許多免費插件和插件可用於插入代碼,在這裡我們將使用“WPBeginner 插入頁眉和頁腳”進行解釋。該插件具有超級簡單的界面,初學者可以輕鬆使用。
- 首先,安裝並激活“插入頁眉和頁腳”插件。通過您的 WordPress 網站儀表板,將鼠標懸停在“插件”菜單上,然後單擊“添加新”。
- 使用搜索插件功能查找“插入頁眉和頁腳”,然後單擊“立即安裝”按鈕。安裝過程結束後,“激活”插件。
- 轉到“設置”菜單,找到並單擊“插入頁眉和頁腳”子菜單。
- 該插件提供了三個框,用於在頁眉、正文和頁腳中放置腳本以插入代碼。在此之前,像 Google Analytics 這樣的第三方提供商會指導你在哪個盒子上放置他們的代碼片段。否則,請確保了解要插入代碼的確切位置。
- 將這些代碼粘貼到相應的代碼中,然後單擊“保存”以完成您的站點更改。
- 代碼腳本現在會自動加載到站點運行的特定位置。
您可以隨時進一步編輯代碼並保持插件處於活動狀態,因為它的停用將導致無法添加自定義功能並禁用所有先前添加到您網站的腳本。
請注意,如果偶然“插入頁眉和頁腳”插件被錯誤地停用或卸載,您的代碼將保留在您的站點數據庫中。只需重新安裝或重新激活插件即可使早期代碼開始工作。此外,建議您在為插件中的頁眉和頁腳代碼片段添加和保存更改時清除 WordPress 站點的緩存。
使用主題編輯頁眉和頁腳
無論您是手動編輯主題文件還是使用插件,您插入的代碼都會影響整個網站。您需要使用插入 HTML 片段之類的插件或嘗試在古騰堡編輯器中使用自定義 HTML 塊,以便僅在特定帖子或頁面中插入自定義代碼。但是,您可以使用 GeneratePress Premium 和 Astra Pro 等最新主題在頁眉和頁腳中插入代碼。這些主題使用標準的 wp_head 和 wp_footer 掛鉤並允許應用自定義限制。例如,您可以僅在單個帖子中插入麵包屑而不影響頁面。
在這裡,我們將使用 Astra Pro 主題進行說明,您可以在 GeneratePress Premium 主題中使用“元素”選項執行類似的步驟。
- 安裝 Astra Pro 附加插件後,轉到“外觀 > Astra 選項”。
- 激活“自定義佈局”選項,然後單擊該選項的“設置”鏈接。
- 單擊“添加新”按鈕,然後將要插入的代碼粘貼到框中。
- 在“自定義佈局設置”部分下,單擊“佈局”下拉菜單並選擇“掛鉤”選項。
- 在“操作”下拉列表中,選擇 wp_head 作為頁眉部分,選擇 wp_footer 作為頁腳部分。
- 如果您只使用一個代碼片段,請將“優先級”留空。但是,當您在同一個鉤子位置插入多個代碼時,請確保設置優先順序以插入代碼。您可以使用 10、20、30 等作為優先級,最低的將優先於其他。
- 如果需要,提供以像素為單位的頂部和底部間距詳細信息。
- 在“Display On”下拉菜單中選擇要顯示代碼的位置。您可以選擇特定的帖子、頁面、分類或插入整個網站或插入特定的帖子類型,如帖子、頁面或您網站中使用的任何自定義帖子類型。
- 在“用戶角色”下拉列表中選擇您希望代碼處於活動狀態的用戶角色。
完成所有設置後,單擊“發布”按鈕以使您的更改生效。
使用插入頁眉和頁腳插件的原因
編輯主題文件或使用自定義主題有很多缺點,你會堅持使用插件方法。以下是使用該插件可以獲得的一些好處,除了您可能不是技術人員或者您可能是初學者。
- 由於插件商店在單獨的位置添加了腳本,因此您無需擔心升級、更新或更改主題期間的代碼擦除。您也不需要子主題,因為插件獨立於您網站的主題工作。
- 它可以輕鬆快速地在頁眉和頁腳中添加自定義代碼。此外,這有助於在單個位置維護代碼片段的組織。
- 在選擇編輯您的 WordPress 主題時可能會遇到錯誤,因此使用插件有助於揮手、防止和避免此類錯誤。
最後的想法
在許多情況下,您需要更改外觀、改變方式或向 WordPress 網站添加其他功能。無論是哪種情況,當您不具備技術傾向時,請記住使用插件方法插入頁眉和頁腳代碼。雖然 Astra 和 GeneratePress 等主題可以幫助您解決此問題,但您需要購買高級版本。此外,它會使更改主題變得困難,此時您需要尋找使用插件。