Rumah > Artikel > pembangunan bahagian belakang > Ketahui tentang skrip beratur untuk tema dan pemalam WordPress
Fungsi
wp_enqueue_script
ialah penyelesaian terbaik untuk memuatkan fail JavaScript ke dalam tapak WordPress. Jika anda sedang membangunkan tema yang menggunakan JavaScript atau pustaka JavaScript, anda boleh menggunakan fungsi wp_enqueue_script
. Ia boleh mengelirukan jika anda tidak benar-benar menggunakannya sebelum ini... jadi hari ini, kita akan mendalami cara menggunakan fungsi beratur untuk memuatkan skrip dengan betul ke dalam tema atau pemalam anda. wp_enqueue_script
函数是将 JavaScript 文件加载到 WordPress 站点的最佳解决方案。如果您正在开发使用 JavaScript 或 JavaScript 库的主题,则可以使用 wp_enqueue_script
函数。如果您以前没有真正使用过它,那么可能会感到困惑...所以今天,我们将深入研究如何使用排队函数将脚本正确加载到您的主题或插件中。
自最初发布以来,本教程中使用的应用程序或技术的某些方面已经发生了变化。这可能会让后续操作变得有点困难。我们建议您查看有关同一主题的最新教程:
如果您有基本的 HTML 背景,您可能习惯于直接将 Javascript 文件(包括从 jQuery 到插件脚本的任何内容)直接加载到文档的页眉或页脚中。当您处于像基本 HTML 页面这样的独立环境中时,这很好……但是一旦您引入了可能在 WordPress 安装上运行的无数其他脚本,执行我所说的“人群管理”就会变得更加棘手。使用您的脚本。
那么为什么不在页眉或页脚中加载 JavaScript呢?答案非常简单:通过像这样包含 JavaScript,您将面临在安装过程中与 JavaScript 发生冲突的风险(想想,多个插件试图加载相同的脚本或该脚本的不同版本)。此外,即使您不需要,您的 JavaScript 也会加载到每个页面上。这将导致页面的加载时间不必要地延长,并且可能会干扰其他 JavaScript,例如来自插件或仪表板内的 JavaScript……这在 WP 开发中是不可以的。
通过使用 wp_enqueue_script
函数。您将可以更好地控制加载 JavaScript 的方式和时间。您甚至可以决定是否加载到页眉或页脚中。
wp_enqueue_script
函数用于将脚本加载到您的 WordPress 站点中。您通常会在 functions.php
文件中使用它。
wp_enqueue_script
函数本身非常简单,所以让我们看一下它的结构。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$handle
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 ?>
<?php wp_enqueue_script('myscript', 'https://www.url/of/file/script.js'__FILE__); ?>
$deps
<?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
<?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0' ); ?>
$in_footer
<?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
wp_enqueue_script
. Anda akan mempunyai lebih kawalan ke atas cara dan masa JavaScript dimuatkan. Anda juga boleh memutuskan sama ada untuk memuatkan ke dalam pengepala atau pengaki. 🎜
wp_enqueue_script
digunakan untuk memuatkan skrip ke dalam laman WordPress anda. Anda biasanya akan menggunakan ini dalam fail functions.php
. 🎜
🎜wp_enqueue_script
Fungsi itu sendiri sangat mudah, jadi mari kita lihat strukturnya. 🎜
🎜$handle
content_url
, bloginfo("template_url")
atau get_template_directory_uri()
untuk tema (disyorkan oleh rujukan fungsi WordPress) dan untuk pemalam plugins_url
.
<?php wp_enqueue_script('jquery'); ?>
<?php wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', false ); wp_enqueue_script('myscript'); ?>
$deps
<?php wp_deregister_script('myscript'); ?>
<?php wp_dequeue_script('myscript'); ?>
$ver
<?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0' ); ?>
$in_footer
<?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'); ?>
$handle
adalah pilihan. Ini mungkin kelihatan pelik pada pandangan pertama. Terutamanya parameter $scr
. Bagaimanakah WordPress mencari skrip tanpa url? 🎜
这背后的原因是 WordPress 附带了内置脚本。例如,jQuery 是 WordPress 核心的一部分,WordPress 开发团队使加载这些内置脚本变得非常简单。您所要做的就是将脚本的句柄传递给 wp_enqueue_script
。
<?php wp_enqueue_script('jquery'); ?>
有关内置 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'); ?>
load_my_scripts
的函数
myscript
myscript
排入队列
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'); ?>
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。这里还列出了一些其他相关的法典链接:
Atas ialah kandungan terperinci Ketahui tentang skrip beratur untuk tema dan pemalam WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!