在插件或主題中包括JavaScript，以正確的方式

高效加載WordPress主題和插件中的JavaScript代碼

關鍵要點

• 在WordPress插件或主題中包含JavaScript代碼時，務必謹慎操作，避免使生成的頁面不必要地臃腫。可以使用wp_enqueue_script()函數，避免多次插入同一文件。
• wp_enqueue_script()函數至少需要兩個參數：腳本名稱和腳本URL。它還可以接受三個附加參數，以便更好地控制腳本的包含方式。
• wp_register_script()函數用於指示如何包含腳本，但實際上並不包含它。此函數對於管理依賴關係非常有用，因為它允許其他插件使用已註冊的腳本。
• 不應在所有地方都註冊腳本。相反，開發者應該思考何時或何地需要他們的腳本，並使用Action/Filter API或WordPress函數僅在必要時包含腳本。
• wp_enqueue_script()函數確保不會兩次包含同一個腳本，並將其正確地包含在頁眉或頁腳中。但是，如果在特定時間或位置需要腳本，則應將wp_enqueue_script()調用放在正確的函數中。

目前，WordPress.org上有超過33,000個插件和2,600個主題，我們還可以添加更多不在此平台上的主題和插件。它們可以執行許多不同的操作，並且通常使用JavaScript提供一些功能。

基本上，將JavaScript代碼包含到主題或插件中並不困難：WordPress生成的只是一個HTML文件，因此使用script標籤直接在其中包含代碼或使用src屬性鏈接到文件就足夠了— —如果你獨自開發，與世隔絕的話。

但事實並非如此。使用WordPress的用戶可以安裝與你的插件或主題並存的插件或主題，而這些工具的開發者也可以使用JavaScript。此外，WordPress本身也在使用JavaScript。問題是，如果每個人都隨意包含他們的腳本，生成的頁面將變得不必要地臃腫。

問題

一個例子會更清晰，我將用一個我熟悉的例子：我自己的。

我開發了WP Photo Sphere插件，允許用戶在他們的文章中添加全景圖。為此，我需要不同的JavaScript文件：用於顯示全景圖的庫和檢索顯示全景圖的特定標籤的文件。此外，在這個最後一個腳本中，我使用了jQuery，所以我需要包含它。

如果我不關心用戶，我可以將這三個腳本插入到網站的所有頁面中，這意味著訪問者必須下載這些文件，即使頁面不需要它們。

目前，問題已經很嚴重了，但當我們考慮jQuery時，問題會變得更大。如果兩個使用此庫的插件都有這種行為會怎樣？用戶不僅會下載無用的文件，還會下載兩次！

頁面越重，加載時間就越長。加載時間過長的網站訪問量低於加載速度更快的網站。如果你的插件或主題使加載時間過長，它們將不會被使用。這無疑是優化你的工具的一個強大動力，對吧？

不可避免的腳本插入函數

為了避免重複插入同一文件的問題，WordPress提供了一個很棒的函數：wp_enqueue_script()。當你想要插入一個腳本時，這個函數必須成為你最好的朋友。

顧名思義，此函數會將你的腳本添加到隊列中，並在正確的時間將其包含到頁眉或頁腳中，因此不會在頁面的中間添加任何script標籤。

單獨使用時，wp_enqueue_script()函數至少需要兩個參數：腳本名稱和腳本URL。例如，如果我想包含我的插件需要的腳本，我將此行添加到其主文件中（我們將在下面看到正確的方法）。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

但是，三個附加參數允許你更好地控制腳本的包含方式，特別是最後一個布爾參數：默認情況下，此佈爾值設置為false，你的腳本將包含在head標籤中，但如果將其設置為true，則你的腳本將包含在footer標籤中。

第四個參數在你創建腳本的不同版本時很有用：它是一個包含版本號的字符串，該版本號將附加到URL的末尾。添加版本號可確保訪問者獲得正確版本的腳本，而不管緩存如何。

第三個參數是最有趣的參數之一，因為它允許你指示腳本的依賴項。例如，如果你的腳本需要jQuery庫，你可以使用此參數。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

如你所見，即使只有一個依賴項，也必須在數組中指示依賴項。你在這個數組中指示的名稱是通過第二個函數註冊的腳本的名稱：wp_register_script()。

第二個函數的使用與第一個函數完全相同：你指示腳本的名稱、其URL、其依賴項、其版本號以及是否必須將其包含在頁腳中。最後三個參數是可選的，但其他參數是必需的。

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

註冊腳本不會包含它。你仍然必須使用wp_enqueue_script()函數來包含你的腳本，但是它的使用就會簡化：你只需要指示腳本的名稱。

wp_enqueue_script('test');

你可能想知道wp_register_script()的有用性，因為wp_enqueue_script()可以完成所有工作。此函數用於指示應如何包含腳本，但如果不需要，則不會包含它。

一個例子會更清晰，所以想像一下，你需要包含兩個JavaScript文件。第一個文件是一個庫，第二個文件使用這個庫來做一些事情。該庫需要jQuery才能正常工作，因此我們將其註冊如下：

wp_register_script('mylib', plugin_dir_url(__FILE__) . 'lib/mylib.js', array('jquery'));

此時，庫尚未包含，但是如果我們要包含主文件，則需要包含此庫：我們將其指示為依賴項。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

所有的魔力都出現了。包含了myfile.js文件，但是它需要mylib.js文件才能工作：這就是依賴項的工作，它將包含此文件。但是！ mylib.js文件需要jQuery，所以也包含了jQuery。一行代碼包含三個文件。

但這並不是wp_register_script()函數的唯一優勢：如果你註冊你的腳本，其他插件將能夠使用它。因此，如果你想製作各種插件，其中一個定義了一些庫，其他插件將能夠包含它們。

wp_enqueue_script()函數最大的優點是它不會兩次包含同一個腳本。例如，想像一下，兩個文件都需要jQuery：這些文件將其指示為依賴項，WordPress將在包含第一個文件時包含該庫。然後是包含第二個腳本的時間。 WordPress將jQuery視為依賴項，但是該庫已經包含了，因此不需要再次包含它：WordPress不會這樣做。

當你嘗試使用不同的名稱但具有相同URL的兩個腳本時，也會出現相同的行為。在下面的示例中，WordPress將只包含該文件一次。

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

但是，請注意：此行為是有限制的：如果至少在一個wp_enqueue_script()調用中指示版本號，即使此版本號相同，該腳本也會被包含兩次。下面的例子似乎與之前的例子相同，但它會包含該文件兩次。

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

也就是說，一般來說，你沒有理由使用不同的名稱註冊同一個腳本。但這有必要闡明這種情況。

如你所見，這兩個函數是管理依賴項的最佳方法：你註冊它們，WordPress將自動處理其餘部分。

請注意，我們使用名稱“jquery”來指示我們想要將jQuery與我們自己的文件一起包含，但我們沒有註冊它。此名稱已由WordPress註冊：當你下載CMS時，它包含jQuery。

此庫並非唯一一個：你可以在此頁面中找到WordPress註冊的所有腳本。你可以直接或通過依賴項註冊它們，而且很酷的是，你無需提供文件，因此每個使用這些腳本的插件或主題都將使用相同的文件：在我們的示例中，如果另一個插件使用jQuery ，則該庫將只包含一次。

不要在所有地方都註冊你的腳本！

wp_enqueue_script()函數確保不會兩次包含同一個腳本，並將其正確地包含在頁眉或頁腳中。但是，如果顯示的頁面甚至不需要你的腳本怎麼辦？

使用Action/Filter API

以向內容編輯器添加媒體按鈕為例：只有當用戶在編輯器中時才需要JavaScript文件。事實上，當普通訪問者閱讀文章時，他們不需要這個腳本：包含它是無用的，並且會使頁面更重。

因此，當你想將腳本包含到頁面中時，請自問以下問題：何時需要此腳本？當然，這個問題的答案會根據你的腳本的功能而有所不同。

但是一旦你找到這個答案，嘗試找到相應的action。 WordPress Codex為我們提供了一個可用的action列表，因此你可以在此處找到你搜索的action。找到了嗎？太好了，創建一個新的函數，該函數將在你的插件的主文件中或你的主題的functions.php文件中註冊你的腳本，例如：

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

然後，在你的action被觸發時運行它：

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

例如，當我們想要添加媒體按鈕時，我們使用了wp_enqueue_media action，這很完美：

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

如果你嘗試在上面鏈接的參考中搜索此action，你可能什麼也沒找到：在撰寫這些行時，wp_enqueue_media 未列出。此列表並非詳盡無遺，但它是一個良好的起點。

如果你找不到正確的action，你也許可以找到另一個具有相似行為的action，或者你應該嘗試在過濾器中搜索。

使用WordPress函數的功能！

通常，插件是為了特定原因而創建的，這些原因可能無法完全使用Action/Filter API。例如，插件可以修改文章中的某些元素，但並非所有元素：短代碼就是一個典型的例子。

假設你的插件需要一些由替換短代碼的代碼使用的腳本。沒有action或過濾器可以精確地定位你的短代碼。但是，有一個地方你可以確定你的短代碼已被找到，你可以確定你的腳本是必需的。

這個地方是每次找到你的短代碼時WordPress調用的回調函數。在該回調函數中調用wp_enqueue_script()，你的腳本將不會被包含，除非它們是必需的。

但是，如果你的短代碼被找到兩次或更多次會怎樣？答案很簡單：什麼也不會發生。

事實上，嘗試兩次調用wp_enqueue_script()函數，使用相同的腳本：此腳本將只包含一次，這就是為什麼此函數是一個非常好的工具。

因此，你可以將此調用插入到你的回調函數中或你的插件或主題的任何其他部分，在那裡你可以確定你的腳本是必需的：即使它們需要多次，它們也只會被包含一次。

請注意，根據wp_enqueue_script()調用的位置，要求WordPress將其包含在head標籤中可能為時已晚：你唯一的選擇是頁腳。如果你的腳本由於某種原因必須位於head標籤中，請考慮一下。

你現在可能有一個問題：什麼時候太遲了？

每個主題都必須使用兩個特定的函數：wp_head()和wp_footer()。當調用前者時，WordPress將自動添加head標籤中所需的所有行：如果你請求在head標籤中包含你的腳本，則在調用wp_head()時將包含它們，因此如果你在wp_head()調用之後請求此包含，則你的腳本將不會包含在head標籤中。

但是WordPress很聰明，你的腳本仍然會被包含：你將能夠在頁腳中檢索它們，當調用wp_footer()函數時，以及當必須在此處包含的腳本被包含時。

所以你得到了答案：如果你絕對想將你的腳本包含在head標籤中，請在wp_head()調用之前請求包含，wp_head()調用應該在主題的head標籤的末尾。 wp_footer()調用應該在文檔的末尾，在body標籤的末尾之前。

結論

你的腳本對於你的插件或主題在特定位置執行的操作很有用，但是將它們包含在不需要它們的頁面中會使這些頁面不必要地更重。

WordPress為我們提供了多種工具，使我們能夠正確地包含我們的腳本，只有在需要時才包含它們。當你想要使用這些工具時，唯一需要問的問題是：我的腳本何時或何地需要？其餘部分取決於答案：查找action或過濾器，將wp_enqueue_script()調用放在正確的函數中，使用此函數的功能，或將所有這些結合起來。

你可以在此處提供的測試插件中檢索上面描述的一些示例。它註冊一個腳本和一個“庫”，並創建一個使用另一個無用腳本的短代碼。

關於在插件或主題中包含JavaScript的常見問題解答 (FAQ)

• 在WordPress主題或插件中包含JavaScript的最佳方法是什麼？

在WordPress主題或插件中包含JavaScript的最佳方法是使用wp_enqueue_script()函數。此函數允許你在WordPress主題或插件中包含JavaScript文件，而無需直接編輯主題或插件文件。它還確保你的腳本以正確的順序加載，防止任何潛在的衝突或錯誤。

• 我可以直接將JavaScript添加到我的WordPress文章或頁面嗎？

是的，你可以直接將JavaScript添加到你的WordPress文章或頁面。但是，這並不推薦，因為它可能導致腳本加載順序出現問題，並可能與其他腳本衝突。相反，建議使用wp_enqueue_script()函數來包含你的腳本。

• 如何確保我的JavaScript文件以正確的順序加載？

你可以通過在註冊腳本時指定依賴項來確保你的JavaScript文件以正確的順序加載。 wp_enqueue_script()函數允許你指定你的腳本依賴的腳本，確保它們以正確的順序加載。

• 我可以在WordPress主題的functions.php文件中包含JavaScript嗎？

是的，你可以在WordPress主題的functions.php文件中包含JavaScript。但是，建議使用wp_enqueue_script()函數來包含你的腳本。這確保你的腳本以正確的順序加載，並防止與其他腳本發生任何潛在衝突。

• 如何防止我的JavaScript文件與其他腳本之間的衝突？

你可以通過使用wp_enqueue_script()函數來包含你的腳本，來防止你的JavaScript文件與其他腳本之間的衝突。此函數確保你的腳本以正確的順序加載，並防止與其他腳本發生任何潛在衝突。

• 我可以使用wp_enqueue_script()函數來包含外部JavaScript文件嗎？

是的，你可以使用wp_enqueue_script()函數來包含外部JavaScript文件。你只需要在調用該函數時提供外部腳本的URL作為第二個參數即可。

• 如何在WordPress插件中包含JavaScript？

你可以在WordPress插件中包含JavaScript，方法是使用wp_enqueue_script()函數。此函數允許你在插件中包含JavaScript文件，而無需直接編輯插件文件。它還確保你的腳本以正確的順序加載，防止任何潛在的衝突或錯誤。

• 我可以使用wp_enqueue_script()函數包含多個JavaScript文件嗎？

是的，你可以使用wp_enqueue_script()函數包含多個JavaScript文件。你只需要為要包含的每個腳本調用該函數一次即可。

• 如何確保我的JavaScript文件僅在特定頁面上加載？

你可以通過在註冊函數中使用條件標籤來確保你的JavaScript文件僅在特定頁面上加載。例如，你可以使用is_page()函數來檢查是否正在顯示特定頁面，並且只有在顯示該頁面時才註冊你的腳本。

• 我可以在WordPress子主題中包含JavaScript嗎？

是的，你可以在WordPress子主題中包含JavaScript。你可以在子主題的functions.php文件中使用wp_enqueue_script()函數來包含你的腳本。這確保你的腳本以正確的順序加載，並防止與其他腳本發生任何潛在衝突。

>此響應提供了原始文本的重寫和改進的版本，在增強清晰度，流程和可讀性的同時，保持了核心含義。 它還使用更合適的標題和格式化，以獲得更好的用戶體驗。 圖像URL保持不變。

以上是在插件或主題中包括JavaScript，以正確的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！