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

關(guān)鍵要點

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

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

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

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

問題

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

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

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

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

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

不可避免的腳本插入函數(shù)

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

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

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

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

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

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

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

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

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

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

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

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

wp_enqueue_script('test');

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

一個例子會更清晰，所以想象一下，你需要包含兩個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');

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

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

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

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

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

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

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

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

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

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

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

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

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

使用Action/Filter API

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

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

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

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

然后，在你的action被觸發(fā)時運行它：

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，或者你應(yīng)該嘗試在過濾器中搜索。

使用WordPress函數(shù)的功能！

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

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

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

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

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

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

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

你現(xiàn)在可能有一個問題：什么時候太遲了？

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

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

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

結(jié)論

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

WordPress為我們提供了多種工具，使我們能夠正確地包含我們的腳本，只有在需要時才包含它們。當你想要使用這些工具時，唯一需要問的問題是：我的腳本何時或何地需要？其余部分取決于答案：查找action或過濾器，將wp_enqueue_script()調(diào)用放在正確的函數(shù)中，使用此函數(shù)的功能，或?qū)⑺羞@些結(jié)合起來。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上是在插件或主題中包括JavaScript，以正確的方式的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！