在 WordPress 中添加內聯腳本的最有效方法

已發表: 2022-06-16

內聯腳本是兩個讓開發人員不寒而栗的簡單詞。內聯腳本是一種在 WordPress 帖子的文本中添加 JavaScript (JS)、CSS 和 HTML 的簡單方法。雖然它們可以用於多種用途，但一種一般用途是在您發布新的 WordPress 文章時即時進行更改。有些人可能會認為這沒有必要，但這樣做可以確保您的網站順利高效地運行。

大多數 WordPress 用戶忽略的一件事是在他們的網站上補充腳本。無論您是想在單個頁面上還是在整個網站上實現內聯文本，都有很多方法可以使用 WordPress 來實現。一旦您了解了正確執行此操作的正確方法，將內聯腳本添加到您的 WordPress 網站就可以非常簡單。這篇博文將討論在 WordPress 中輕鬆添加內聯腳本的最有效方法。繼續閱讀以了解更多信息。

通過 Wp_print_scripts 添加

如果您要添加 WordPress 內聯文本，那麼 WordPress wp_print_scripts 或/和 admin_print_scripts 函數就是您的答案。 WordPress wp_print_scripts 可以在文檔的頭部顯示文本標籤，這通常在包含 JS 或 CSS 文件時完成。此 WordPress 功能將使您的網站更具交互性或添加新功能。與任何 WordPress 功能一樣，在您的網站上使用它之前，需要遵循一些簡單的規則。

此函數基於 WordPress 插件選項建立三個變量，並使用 admin_print_scripts 鉤子將它們輸出到前端（頭部）。要將內聯字符添加到管理區域，您還可以將 wp_print_scripts 替換為 admin_print_scripts 函數並收工。

首次安裝 WordPress 時，它帶有許多自動添加到站點的文本。這可能會導致服務器上的加載時間和 CPU 使用率增加。解決此問題的一種方法是使用 wp_print_scripts 函數，因此您僅在需要或需要時才加載文本。也就是說，讓我們快速看一下使用 wp_print_script 函數在 WordPress 帖子中添加內聯字符的一些優點和缺點：

優點：

將任何內聯文本添加到 WordPress 頁面的“頭部”總是很簡單的；
您添加的代碼沒有任何限制，這意味著您可以添加 JS 變量、函數、方法、條件或任何您想添加到站點的內容。

缺點：

沒有特定的方法可以將您添加的代碼與註冊的腳本相關聯；
在大多數情況下，各種因素的輸出代碼可能不是控制輸出代碼位置的真實且一致的方式。但是，您始終可以利用 <add_action> 下的 <priority> 參數來控制添加代碼的位置。

使用 wp_add_inline_script() 函數

最近，WordPress 推出了一項新功能，用於將內聯 JavaScript 添加到 WordPress 帖子中。但是，這種新的集成是兼容的，從 4.5 WordPress 版本開始，與其他可用選項相比，它是一種更突出的添加內聯文本的方式。我們正在定義 wp_add_inline_script() 函數，您希望它可以完美地完成工作。即使是最有經驗的 WordPress 開發人員也可以證實這一事實。

wp_add_inline_script() 函數是一種無需編輯 WordPress 頁面上的任何代碼即可將內聯字符添加到站點的方法。這使您可以實時進行更改，而無需 FTP 訪問或使用插件。此功能也是可用於自定義 WordPress 網站的基本集成之一。該過程允許您在網站代碼中添加內聯文本，這意味著它們將直接添加到網頁上的 HTML 標記中。這比使用外部 JS 文件或指向其他網站的鏈接提供了更多的自定義。

優點：

wp_add_inline_script() 函數是向您的 WordPress 博客添加內聯字符的一種有價值的方法；
它可以是開發人員在不更改 WordPress 主題或插件文件或編輯 header.php 模板文件的情況下添加 JS 代碼的一種簡單方便的方式；
這對於添加諸如 Google Analytics 代碼之類的腳本很有用。每次有 Google Analytics 功能或設置更新時，它都可以讓您免於編輯 header.php 文件。

缺點：

wp_add_inline_script() 函數的唯一缺點是它僅從 4.5 WordPress 版本開始可用。

使用 wp_localize_script() 函數

wp_localize_script() 函數是一個有用的 WordPress 實用程序，可將內聯字符添加到 WordPress 網站上的各個頁面。如果您需要網站上的快速和臨時功能，例如活動或促銷，這是完美的選擇。該函數接受可變數量的參數並輸出添加到文檔頭部的 JS 字符串列表。這樣做會很有幫助，例如，如果您正在使用 jQuery，並且只希望腳本的代碼出現在某些頁面上。

Wp_localize_script() 將您的 JS 文件排入隊列並為其提供“shapeSpace_script”的 ID/句柄，它定義了一個包含您的變量的關聯數組。最後，這些 JS 變量被傳遞給 wp_localize_script() 以包含在已註冊的 shapeSpace_script 中。因此，它使您能夠應用任何 JS 變量，例如 shapeSpace.varl 等。此函數專用於本地化 JS 變量以用於語言翻譯和國際化。但是，大多數 WordPress 開發人員將其用作向其網站添加內聯字符的常用方法。

優點：

Wp_localize_script() 啟用與現有註冊腳本的“read:require”關聯。這意味著它提供了一種出色且一致的方式來控制您網站的自定義文本輸出的相對位置。

缺點：

唯一的缺點是您只能添加 JS 變量（ var = 'value' ）。因此，使用 wp_localize_script() 添加其他內聯腳本是不可能的，例如函數、條件、方程式等。

使用後備

如前所述，具體方法如 wp_add_inline_script() 僅從 4.5 WordPress 版本或更高版本開始可用。但是，通過將所有內容放在一起，無論您使用的是哪個 WordPress 版本，您都可以設計一種向 WordPress 文件添加內聯字符的防故障方法。最有效的方法是通過 head 部分（前端）post 插件中的三個函數。

要做的第一件事是將您的 JS 文件排入隊列並調用以下函數以通過 wp_add_inline_script() 函數添加內聯行。第三個功能是回退到任何早於 4.5 版本的版本。這無疑適用於 WordPress 4.5 和任何獨特的版本。這就是真正的魔法發生的地方。您可以繼續使用後備方法，該方法將在您選擇的 WordPress 變體上完成工作，回到 2.1 或其他版本。

優點：

您可以在您的網站上擁有多個 JS 文件，而無需添加額外的 HTTP 請求來一次加載它們。這意味著您將能夠減少網站訪問者的加載時間。
如果一個腳本失敗，相同後備功能中的其他腳本仍然可以工作，因為它們是從不同線程異步加載的，因為它們相互依賴。

缺點：

當腳本失敗時，在少數情況下，用戶會看到一個空白區域而不是代碼。這看起來似乎沒什麼大不了的，但作為 WordPress 開發人員，這是需要注意的重要事項。

在 WordPress 中添加內聯腳本的回顧

您可以使用的替代技術的限制使 wp_add_inline_script() 函數成為添加 WordPress 內聯字符的高級方法。這被認為是當今最有效的解決方案，並且與流行的看法相反，如果您使用後備技術，則可以在任何版本的 WordPress 上使用此功能。供您參考，以下是在 WordPress 核心中添加內聯腳本的最有效方法的快速回顧：

wp_add_inline_script()允許您將任何 JS 代碼添加到任何已註冊的腳本中；
wp_print_scripts 或 admin_print_scripts允許您在前端或標題部分安裝任何代碼；

wp_localize_script()還允許您將 JS 變量添加到任何已註冊的腳本；
Fallback讓您可以設計出一種完全適用於任何 WordPress 版本的完整技術。

注意：如果您想添加內聯樣式/CSS 而不是 JavaScript，WordPress 為您提供了一組類似於用於添加腳本的“添加樣式”功能。 例如，查看 wp_print_styles 和 wp_add_inline_styles。

結論

內聯腳本是向 WordPress 網站添加功能的一種快速簡便的方法。通過用 JavaScript 編寫腳本，您可以創建一個內聯腳本，在頁面上執行您希望它執行的任何操作，而無需額外的插件或代碼。本教程概述了在 WordPress 中添加內聯腳本的最有效方法。

您是一位 WordPress 編輯器，並且有向 WP 網站添加腳本的經驗嗎？對於希望快速完成工作的新手開發人員，您會推薦哪種方法？請隨時使用評論部分分享您的意見並提出任何令人不安的問題。

作者簡介：

Arthur 是一位數字營銷專家和商業博主。他通過各種社交媒體開發有趣的初創公司，並與客戶分享他的經驗，以更好地推廣他們的業務。業餘時間，Arthur 學習日語並撰寫有關數字化轉型趨勢的文章。