如何將自定義 JavaScript 添加到 WordPress(3 種方法)

[ad_1]

增強網站前端功能的最佳方法之一是添加 WordPress 自定義 JavaScript。 然而,弄清楚如何做到這一點可能很棘手,尤其是如果您習慣於使用定製器來插入自定義 CSS。

幸運的是,您可以根據自己的經驗水平和想要達到的目標,使用幾種不同的策略。 一旦您了解了您的選擇,您就可以選擇最適合您的自定義 JavaScript 解決方案。

在這篇文章中,我們將向您介紹可用於向 WordPress 網站添加自定義 JavaScript 的三種方法,並討論每個選項的優缺點。 以下是我們將介紹的三種方法 – 您可以單擊以直接跳轉到特定方法:

  1. 使用 Head & Footer Code 插件(非技術用戶最簡單的選擇)
  2. 在functions.php文件中添加代碼
  3. 向頭部添加代碼(使用 wp_enqueue_script 函數或 wp_head 鉤子)

讓我們跳進去!

1. 安裝 Head & Footer Code 等插件

使用插件是將 WordPress 自定義 JavaScript 添加到您的網站的最簡單方法之一。 例如,頁眉和頁腳代碼就是一個很好的工具:

這個免費插件使您能夠以多種方式插入代碼。 您可以將其用於 Facebook Pixel、Google Analytics、自定義 CSS 等。

首先,通過從管理儀錶板導航到插件→添加新插件,然後搜索「頁眉和頁腳代碼」,將插件添加到您的站點。

單擊「立即安裝」和「激活」按鈕後,您可以通過轉到「工具」→「頁眉和頁腳代碼」來找到插件的設置。 在此屏幕上,頁眉、頁腳和正文部分有三個框:

標題插件的設置屏幕。

您可以將您的 WordPress 自定義 JavaScript 輸入到這些框中的任何一個中。 完成後,選擇屏幕底部的「保存更改」按鈕。 然後代碼將載入到您網站的每個頁面。

使用插件的利弊

使用插件的主要優點是它是初學者友好的選擇。 您無需擔心編輯主題文件。 如果您正在尋找一種無縫方式添加其他類型的代碼和自定義 CSS,那麼 Head & Footer Code 插件也可能會派上用場。

但是,這種方法的缺點是它涉及安裝第三方插件,一些網站所有者試圖避免這種情況。 如果您想將擴展保持在最低限度,最好使用其他方法之一。 此外,該插件專為站點範圍的 JavaScript 更改而不是特定頁面或帖子而設計。

2. 使用你的functions.php 文件

將 WordPress 自定義 JavaScript 添加到您的網站的另一種方法是利用內置函數和掛鉤來編輯 functions.php 文件。 這種方法涉及手動將腳本上傳到您的伺服器。

在開始之前,我們建議您創建一個子主題。 此步驟有助於確保您仍然能夠安全地更新父主題。 您還應該備份您的網站,以防萬一出現問題。

此方法涉及使用 IS_PAGE 函數。 您可以添加條件邏輯以將您的自定義 JavaScript 應用於單個帖子或頁面。

首先,找到並打開您的 functions.php 文件,然後複製並粘貼以下代碼片段:

function ti_custom_javascript() { ?> 此代碼會將 JavaScript 添加到您的標頭中。 要將其應用於單個帖子,您可以使用以下內容:

function ti_custom_javascript() { if (is_single (‘3’)) { ?> 請注意,您需要將上面示例中的 3 替換為要添加代碼的帖子 ID 號。 要找到該號碼,請從您的管理儀錶板導航到該帖子,然後單擊「編輯」。 在瀏覽器欄的 URL 中,ID 號是「post=」旁邊的數字:

瀏覽器欄中 WordPress URL 的帖子 ID。

替換 ID 號後保存文件並將自定義 JavaScript 添加到指定區域。 您也可以對單個 WordPress 頁面重複相同的過程。

編輯functions.php文件的利弊

編輯您的functions.php 文件的一個優點是您不需要安裝另一個插件。 您還可以使用此技術為您的主題和 WordPress 本身添加特性和功能。 例如,此方法可以將 JavaScript 插入單個帖子或頁面或所有頁面。

這種方法的唯一缺點是它涉及使用代碼和編輯站點文件。 因此,如果您在該部門沒有經驗,這可能不是最佳選擇。

有一種方法可以通過將 請注意, wp_head 掛鉤僅在您網站的前端觸發。 這意味著您使用此方法添加的任何自定義 JavaScript 都不會出現在管理或登錄區域中。 但是,如果您想將 JavaScript 添加到這些區域,您可以分別使用 admin_head 和 login_head 操作掛鉤。

將 JavaScript 添加到標題的利弊

wp_enqueue_script 函數是開發人員的首選,因為它可以防止與其他選項(例如直接將腳本添加到 header.php 文件)可能出現的衝突。 此外,使用此方法不會創建任何依賴腳本。

將自定義 WordPress JavaScript 添加到站點標題的主要問題是,它可能會導致載入自己腳本的其他插件出現問題。 此設置還會導致多個腳本載入不止一次,這會影響您網站的整體速度和性能。

開始使用 WordPress 自定義 JavaScript

默認情況下,WordPress 不允許您將 JavaScript 代碼片段插入到您的頁面和帖子中。 幸運的是,一些方法可以添加您的 WordPress 自定義 JavaScript,而不會破壞您的網站。 最好的方法取決於您編輯站點文件的舒適程度以及您想要應用腳本的位置。

正如我們在這篇文章中所討論的,您可以通過三種方式將 WordPress 自定義 JavaScript 添加到您的網站:

  1. 安裝一個插件,例如頁眉和頁腳代碼。
  2. 使用您的 functions.php 文件將自定義 JavaScript 添加到單個頁面或帖子。
  3. 使用 wp_enqueue_script 函數或 wp_head 鉤子將 JavaScript 添加到您的標頭中。

既然您知道如何向 WordPress 添加自定義 JavaScript,您可能會對我們關於向 WordPress 添加自定義 CSS 的其他指南感興趣。

您對將 WordPress 自定義 JavaScript 添加到您的網站有任何疑問嗎? 在下面的評論部分讓我們知道!

相關文章