wp_enqueue_script 函数是将 JavaScript 文件加载到 WordPress 站点的最佳解决方案。如果您正在开发使用 JavaScript 或 JavaScript 库的主题，则可以使用 wp_enqueue_script Funktion. Es kann verwirrend sein, wenn Sie es noch nie wirklich verwendet haben. Deshalb werden wir uns heute eingehend mit der Verwendung von Funktionen in der Warteschlange befassen, um Skripte ordnungsgemäß in Ihr Theme oder Plugin zu laden.
Einige Aspekte der in diesem Tutorial verwendeten Anwendungen oder Techniken haben sich seit der ursprünglichen Veröffentlichung geändert. Dies kann nachfolgende Schritte etwas erschweren. Wir empfehlen Ihnen, sich das neueste Tutorial zum gleichen Thema anzusehen:
Wenn Sie über grundlegende HTML-Kenntnisse verfügen, sind Sie wahrscheinlich daran gewöhnt, Javascript-Dateien (einschließlich alles von jQuery bis hin zu Plugin-Skripten) direkt in die Kopf- oder Fußzeile Ihres Dokuments zu laden. Dies ist in Ordnung, wenn Sie sich in einer eigenständigen Umgebung wie einer einfachen HTML-Seite befinden. Sobald Sie jedoch die unzähligen anderen Skripte einführen, die möglicherweise auf Ihrer WordPress-Installation ausgeführt werden, wird es schwieriger, das durchzuführen, was ich „Crowd-Management“ nenne. Verwenden Sie Ihr Skript.
Warum also nicht JavaScript in die Kopf- oder Fußzeile laden? Die Antwort ist ganz einfach: Wenn Sie JavaScript auf diese Weise einbinden, besteht die Gefahr eines Konflikts mit dem JavaScript während der Installation (denken Sie an mehrere Plugins, die versuchen, dasselbe Skript oder verschiedene Versionen dieses Skripts zu laden). Darüber hinaus wird Ihr JavaScript auf jederSeite geladen, auch wenn Sie es nicht benötigen. Dies führt dazu, dass das Laden der Seite unnötig länger dauert, und kann andere JavaScript-Funktionen beeinträchtigen, beispielsweise von Plugins oder im Dashboard … was in der WP-Entwicklung ein Tabu ist.
Mit der Funktion wp_enqueue_script. Sie haben mehr Kontrolle darüber, wie und wann JavaScript geladen wird. Sie können sogar entscheiden, ob in die Kopf- oder Fußzeile geladen werden soll.
wp_enqueue_script 函数用于将脚本加载到您的 WordPress 站点中。您通常会在 functions.php wird zum Laden von Skripten in Ihre WordPress-Site verwendet. Normalerweise verwenden Sie dies in einer functions.php-Datei.
wp_enqueue_script Die Funktion selbst ist sehr einfach, also schauen wir uns ihre Struktur an.
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
?>
Wie Sie sehen, sind alle Parameter außer $handle 之外的所有参数都是可选的。乍一看这似乎很奇怪。特别是 $scr optional. Das mag auf den ersten Blick seltsam erscheinen. Insbesondere der Parameter $scr. Wie findet WordPress ein Skript ohne 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。这里还列出了一些其他相关的法典链接：
Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über das Einreihen von Skripten für WordPress-Themes und -Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
