了解 WordPress 主題和外掛的排隊腳本

wp_enqueue_script 函數是將 JavaScript 檔案載入到 WordPress 網站的最佳解決方案。如果您正在開發使用 JavaScript 或 JavaScript 程式庫的主題，則可以使用 wp_enqueue_script 函數。如果您以前沒有真正使用過它，那麼可能會感到困惑...所以今天，我們將深入研究如何使用排隊函數將腳本正確加載到您的主題或外掛程式中。

自最初發布以來，本教程中使用的應用程式或技術的某些方面已經發生了變化。這可能會讓後續操作變得有點困難。我們建議您查看同一主題的最新教學：

• 如何在 WordPress 主題和外掛中包含 JavaScript 和 CSS

為什麼要使用入隊函數？

如果您有基本的 HTML 背景，您可能習慣於直接將 Javascript 檔案（包括從 jQuery 到插件腳本的任何內容）直接載入到文件的頁首或頁尾中。當您處於像基本HTML 頁面這樣的獨立環境中時，這很好……但是一旦您引入了可能在WordPress 安裝上運行的無數其他腳本，執行我所說的“人群管理”就會變得更加棘手。使用您的腳本。

那為什麼不在頁首或頁尾載入 JavaScript呢？答案非常簡單：透過像這樣包含 JavaScript，您將面臨在安裝過程中與 JavaScript 發生衝突的風險（想想，多個外掛程式試圖載入相同的腳本或該腳本的不同版本）。此外，即使您不需要，您的 JavaScript 也會載入到每個頁面上。這將導致頁面的載入時間不必要地延長，並且可能會幹擾其他 JavaScript，例如來自外掛程式或儀表板內的 JavaScript…這在 WP 開發中是不可以的。

透過使用 wp_enqueue_script 函數。您將可以更好地控制載入 JavaScript 的方式和時間。您甚至可以決定是否要載入到頁首或頁尾。

了解 wp_enqueue_script 函數

wp_enqueue_script 函數用於將腳本載入到您的 WordPress 網站中。您通常會在 functions.php 檔案中使用它。

wp_enqueue_script 函數本身很簡單，所以讓我們來看看它的結構。

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

• $handle
  • 這是要載入的腳本的句柄（名稱）。應全部小寫。
  • 這是必要的
  • 預設值：無
• $scr
  • 這是腳本的 URL。
  • 如果您從伺服器本地加載，則不應在伺服器上對腳本的 URL 進行硬編碼。主題最好使用content_url、bloginfo("template_url") 或get_template_directory_uri()（WordPress 函式參考推薦），外掛程式最好使用plugins_url。

    <?php wp_enqueue_script('myscript', content_url('/myTheme/js/myScript.js'__FILE__)); // content_url ?>
    
    <?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__); // bloginfo("template_url") ?>
    
    <?php wp_enqueue_script('myscript', get_template_directory_uri().'/js/myScript.js'__FILE__); // get_template_directory_uri() ?>
    
    <?php wp_enqueue_script('myscript', plugins_url('/myPlugin/js/myScript.js'__FILE__)); // plugins_url ?>
    

    登入後複製
  • 如果您從另一台伺服器載入腳本。例如，從 Google CDN 載入 jQuery 函式庫。您只需輸入要載入的文件的 URL 即可。

    <?php wp_enqueue_script('myscript', 'https://www.url/of/file/script.js'__FILE__); ?>
    

    登入後複製
  • 這是可選的
  • 預設值：假
• $deps
  • 這是一個處理任何腳本依賴項的陣列。例如，您的 fade.js 腳本需要 jQuery 才能運作。此參數會將您的腳本關聯到 jQuery 函式庫。
  • 如果您不想使用此參數，但想使用其他參數，請使用「false」。

    <?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '3.1' ); ?>
    

    登入後複製
  • 必須先載入所需的腳本。
  • 您使用陣列所需的腳本句柄。

    <?php 
    wp_enqueue_script('jquerylib', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
    wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquerylib'));
    ?>
    

    登入後複製
  • 這是可選的
  • 預設：陣列()
• $ver
  • 這是您的腳本的版本。
  • 版本作為查詢字串連接到路徑的末端。版本可以是版本號碼、false 或 NULL。
  • 如果您使用 false 作為版本。將使用 WordPress 版本。
  • 如果使用 NULL。什麼都不會被用作版本。 WordPress 函數參考不建議這樣做。
  • 如果不使用$ver參數，則預設使用WordPress版本。

    <?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0' ); ?>
    

    登入後複製
  • 這是可選的
  • 預設值：假
• $in_footer
  • 這將決定您的腳本在頁面上的位置。
  • 此參數是一個布林值（“true”或“false”）
  • 預設情況下，您的腳本將放置在 中，但最好將其放置在 標記結束之前。這是透過將“true”傳遞給參數來完成的。

    <?php
    wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', false ); // placed in the head
    wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', true ); // placed before body close tag
    ?>
    

    登入後複製
  • 這是可選的
  • 預設值：假

如您所見，除了 $handle 之外的所有參數都是可選的。乍看之下這似乎很奇怪。特別是 $scr 參數。 WordPress 如何在沒有 url 的情況下找到腳本？

这背后的原因是 WordPress 附带了内置脚本。例如，jQuery 是 WordPress 核心的一部分，WordPress 开发团队使加载这些内置脚本变得非常简单。您所要做的就是将脚本的句柄传递给 wp_enqueue_script。

<?php wp_enqueue_script('jquery'); ?>

有关内置 WordPress 脚本及其句柄的完整列表。请查看 WordPress 函数参考。

在您的 WordPress 主题中使用排队脚本

现在您已经了解了 wp_enqueue_script 的各个部分。让我们看看您如何在 WordPress 主题中实际使用它。

要事第一

在开始正确排列脚本之前，您还需要了解其他 WordPress 函数。

• wp_register_script
  • wp_register_script 函数用于向 WordPress 注册您的脚本。这意味着，您将能够为您的脚本使用 wp_enqueue_script ，就像 WordPress 附带的内置脚本一样
  • wp_register_script 的参数结构与 wp_enqueue_script 结构完全相同，所以我不再赘述。如果需要，您可以参考上面的部分。
  • 只需设置 wp_register_script，就像设置 wp_enqueue_script 一样。然后通过将句柄传递给 wp_enqueue_script 将脚本排队。

    <?php
    wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', false );
    wp_enqueue_script('myscript');
    ?>
    

    登入後複製
• wp_deregister_script
  • wp_deregister_script 删除已注册的脚本。
  • 您所需要做的就是将句柄传递给它。

    <?php wp_deregister_script('myscript'); ?>
    

    登入後複製
• wp_deregister_script
  • wp_dequeue_script 删除已注册的脚本。
  • 您所需要做的就是将句柄传递给它。

    <?php wp_dequeue_script('myscript'); ?>
    

    登入後複製

加载脚本

加载脚本的最简单方法是将 wp_enqueue_script 放置在页面上您想要的任何位置。

<?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0' ); ?>

足够简单，只是不太优雅。更好的方法是使用 function.php 文件来加载脚本。为此，您需要创建一个自定义函数。然后使用 add_action 来初始化您的函数。

<?php 
function load_my_scripts() {
	wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0', true );
	wp_enqueue_script('myscript');
}
add_action('init', 'load_my_scripts');
?>

• 第 2 行创建一个名为 load_my_scripts 的函数
• 第 3 行注册脚本 myscript
• 第 4 行将脚本 myscript 排入队列
• 第 6 行初始化函数 load_my_scripts

我们刚刚加载的脚本需要当前版本的 jQuery 才能运行，因此让我们注销 WordPress 附带的默认版本，并将新版本添加到我们的函数中。

<?php 
function load_my_scripts() {
	wp_deregister_script( 'jquery' );
	wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
	wp_enqueue_script('jquery');
	wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array("jquery"), '1.0', true );
	wp_enqueue_script('myscript');
}
add_action('init', 'load_my_scripts');
?>

• 第 2 行取消注册 WordPress 附带的默认 jQuery
• 第 3 行注册另一个版本的 jQuery
• 第 4 行将脚本 myscript 排入队列

好的，WordPress 编码的良好实践表明我们需要在运行函数之前检查它是否存在。这样就完成了。

<?php 
if (function_exists('functionName')) {
}
?>

这会检查您的函数是否已存在。如果不存在，它将运行您的函数。

让我们将其添加到我们的 load_my_scripts 函数

<?php 
if (function_exists('load_my_scripts')) {
    function load_my_scripts() {
		wp_deregister_script( 'jquery' );
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
		wp_enqueue_script('jquery');
		wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true );
		wp_enqueue_script('myscript');
    }
}
add_action('init', 'load_my_scripts');
?>

现在，如果您转到管理页面，您不希望加载脚本。它可能会导致冲突并破坏管理页面。一般的经验法则是您不希望自定义脚本加载到管理页面中。插件脚本则是另一回事。我稍后会再讨论这个问题。

我们将使用 !is_admin() 检查加载的页面是否不是管理页面。如果不是，我们的脚本将加载。

<?php 
if (!is_admin()) {
}
?>

现在函数看起来像这样。

<?php 
if (function_exists('load_my_scripts')) {
    function load_my_scripts() {
    	if (!is_admin()) {
		wp_deregister_script( 'jquery' );
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
		wp_enqueue_script('jquery');
		wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true );
		wp_enqueue_script('myscript');
    	}
    }
}
add_action('init', 'load_my_scripts');
?>

给你。一个很好的模板，供您使用来将脚本排入队列

为您的插件使用排队脚本

好的，既然你已经记下来了。让我们添加一个仅在插件的管理页面上加载的脚本。

其实很简单。只需在插件文件中编写脚本函数，就像我们在上一节中所做的那样。只是现在不要在 add_action 中使用“init”，而是使用“admin_init”。

<?php 
if (function_exists('load_my_scripts')) {
    function load_my_scripts() {
    	if (!is_admin()) {
		wp_deregister_script( 'jquery' );
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
		wp_enqueue_script('jquery');
		wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true );
		wp_enqueue_script('myscript');
    	}
    }
}
add_action('admin_init', 'load_my_scripts');
?>

就是这样，现在您的脚本只会在您进入插件的管理页面时加载。

结论

我希望这将帮助您更好地理解 WordPress 中的入队脚本，因此现在您可以走出去并加载一些您自己的脚本！

如果有任何不明白或想继续阅读的内容。我建议访问 WordPress Codex。这里还列出了一些其他相关的法典链接：

• 函数参考/wp 入队脚本
• 函数参考/wp注册脚本
• 函数参考/wp注销脚本
• 函数参考/wp出队脚本

以上是了解 WordPress 主題和外掛的排隊腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章！