什麼是 WP Enqueue 以及如何使用它？

已發表: 2017-10-28

當您第一次學習 HTML 時，您知道如何插入任何類型的交互的唯一方法是在頁面的頁眉或頁腳中使用腳本標記來設置外部 JavaScript 文件的類型和來源。 （或者，如果你真的只是在學習，那麼腳本標籤之間的整個 JS 函數就在正文本身。這對學習來說很好，但是一旦你進入高級 WordPress 開發，這是非常糟糕的做法。輸入enqueue函數。

一旦你跳過簡單的單頁網站，那些初學者的做法可能會產生一些非常棘手的情況。 隨著您開始添加越來越多的 JavaScript，您的網站會變得越來越慢。 更新它需要更長的時間。 最終，您已經製作了一大堆 JavaScript-getti，無論您多麼努力，這堆麵條都不會解開。

幸運的是，您可以使用 WordPress 中的入隊功能來添加 CMS 為您處理的樣式和腳本。 所有的混亂都為你處理。 雖然它不像在每個頁面的頁眉或頁腳中直接粘貼您想要的腳本或樣式那麼簡單，但這是處理它的正確方法。 WordPress 並不是非常固執己見，絕對有一系列您應該了解的最佳實踐

wp_enqueue_scripts處於這些實踐的最前沿。

有什麼大不了的？

您想要使用wp_enqueue 的主要原因是讓您的網站平穩快速地運行。 頁面速度很重要，一遍又一遍地使用相同的腳本和样式無濟於事。 在所有。

幸運的是， wp_enqueue是函數式編程的一個例子。 這意味著您只需編寫一段要執行的代碼（您的 JavaScript 代碼段），然後使用wp_enqueue調用它，而不必在每次需要時重寫/粘貼整個代碼。

那是。 驚人的。

更棒的是，使用 enqueue 方法使 WordPress 本身自動將 _script_ 標籤插入到它們所屬的頁眉和頁腳中，加載它們而無需在每個頁面上單獨輸入它們。

WP 入隊語法和參數

排隊腳本真的不是那麼困難。 如果您一開始就足夠精通使用 JavaScript，那麼您用於排隊的 PHP 函數將是小菜一碟。

在典型的腳本標籤中，您要么直接導入外部 .js 文件，要么在標籤本身之間粘貼整個長代碼片段。 （如果您將某些內容粘貼到 Divi 代碼模塊或 WP 自定義 HTML 或文本小部件中，這也是您正在執行的操作）。

您只需要了解一些基本參數和語法。

Codex 將此作為基本入隊代碼： 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

總而言之，按參數分解為可用位非常簡單。

  • wp_enqueue_script()是將所有代碼放入其所在頁面的函數。
  • $handle是腳本本身的唯一名稱。
  • $src表示您正在排隊的實際 .js 文件的 URL。
  • $deps是這個需要的任何依賴項的$handle s。
  • $ver將是版本號。 如果沒有指定，您將自動添加 WP 安裝版本。
  • $in_footer或$in_header告訴 WordPress 將腳本放在哪裡。

可以在 Codex 中查看將腳本排入隊列的完整文檔。

學生們注意：WP 註冊現在開始！

除了 _wp_enqueue__ 之外，WP 還有一個方便的方法叫做 _wp_register__。 這兩種方法都使用相同的參數和語法，所以你真的可以一對一地處理它們。 本質上，註冊腳本與在 JavaScript 中命名函數相同。

雖然不是必需的，但註冊您的腳本可以讓您的生活更輕鬆，因為您以後不必將它們聲明為依賴項。 他們已經被註冊了。 因此……_wp_register__。 註冊腳本後，您可以通過其$handle回調它，如下面的示例所示。

您將像這樣註冊您的代碼： 

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

然後，每當您再次需要它時，您都可以像這樣調用它：

wp_enqueue_script( 'jquery' );

此外，註冊意味著即使不需要腳本，您也不必加載它。 WPMU 有一個很棒的短代碼創建示例：如果您將腳本註冊到使用 _wp_enqueue__ 的短代碼，它只會在使用短代碼時使用。 但是，如果您僅通過排隊來調用它，即使不使用短代碼，它也會被加載。

您可以在 Codex 中閱讀有關該方法的所有信息。

此外，如果插件作者想將腳本包含在 WordPress.org 存儲庫中，則需要將它們排入隊列，因此，如果您願意的話……最好加入隊列。

把它放在一起

實現代碼很容易。 只需將如下所示的代碼片段放入您的functions.php 中。 其餘的由 WordPress 處理。 我的意思是，這是調用 jQuery 的一個非常基本的片段，但是您可以看到這些東西是如何組合在一起的。

您通常會使用如下所示的內容： 

<script type="text/javascript" src="jquery.js"></script>

一旦你學會瞭如何使用enqueue_scripts_ ，你會看到更像這樣的東西： 

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

現在，請注意上面的代碼中它如何使用add_scripts()_函數，該函數已經是 WordPress 的一部分，以概述接下來幾個步驟的順序。 首先， wp_register_函數獲取指定的所有細節並將腳本放在頁腳中，然後使用wp_enqueue在一切設置好後最終調用它。

包起來

這就是它的全部內容。 嗯，這不是真的——入隊是 WP 的一個根深蒂固的部分。 但這些是讓您在 WordPress 上做的事情比以前更多的基礎知識。

我們在開始 Web 開發時都學到的關於放入腳本的基礎知識仍然有效，但它們並不總是最好的做事方式。 建立在 PHP 上的 WordPress 的部分優點在於，您可以將這種邏輯帶入您的工作中，同時仍然真正保持與您本來應該擁有的相同的基本結構和工作流程。

文章縮略圖來自 hanss / shutterstock.com