wp_enqueue_script 函数是将 JavaScript 文件加载到 WordPress 站点的最佳解决方案。如果您正在开发使用 JavaScript 或 JavaScript 库的主题，则可以使用 wp_enqueue_script 기능. 이전에 실제로 사용해 본 적이 없다면 혼란스러울 수 있습니다... 그래서 오늘 우리는 큐에 추가된 함수를 사용하여 테마나 플러그인에 스크립트를 적절하게 로드하는 방법을 자세히 알아볼 것입니다.
이 튜토리얼에 사용된 애플리케이션이나 기술의 일부 측면은 원래 게시된 이후 변경되었습니다. 이로 인해 후속 단계가 약간 어려워질 수 있습니다. 동일한 주제에 대한 최신 튜토리얼을 확인해 보시기 바랍니다:
기본 HTML 배경이 있다면 아마도 Javascript 파일(jQuery에서 플러그인 스크립트까지 포함)을 문서의 머리글이나 바닥글에 직접 로드하는 데 익숙할 것입니다. 기본 HTML 페이지와 같은 독립형 환경에서는 괜찮지만 WordPress 설치에서 실행될 수 있는 수많은 다른 스크립트를 도입하면 "군중 관리"라고 부르는 작업을 수행하기가 더 까다로워집니다. 스크립트를 사용하세요.
그럼 머리글이나 바닥글에 JavaScript를 로드하면 어떨까요? 대답은 매우 간단합니다. 이와 같이 JavaScript를 포함하면 설치 중에 JavaScript와 충돌할 위험이 있습니다(여러 플러그인이 동일한 스크립트 또는 해당 스크립트의 다른 버전을 로드하려고 시도하는 경우). 또한 JavaScript는 필요하지 않더라도 모든페이지에 로드됩니다. 이로 인해 페이지가 불필요하게 로드되는 데 시간이 더 오래 걸리고 플러그인이나 대시보드 내에서와 같은 다른 JavaScript를 방해할 수 있습니다. 이는 WP 개발에서 절대 금기입니다.
wp_enqueue_script 기능을 사용하여. JavaScript가 로드되는 방법과 시기를 더 효과적으로 제어할 수 있습니다. 머리글이나 바닥글에 로드할지 여부도 결정할 수 있습니다.
wp_enqueue_script 函数用于将脚本加载到您的 WordPress 站点中。您通常会在 functions.php 함수는 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.
으아아아
$deps
$ver
$in_footer
보시다시피 $handle 之外的所有参数都是可选的。乍一看这似乎很奇怪。特别是 $scr를 제외한 모든 매개변수는 선택사항입니다. 언뜻 보면 이상하게 보일 수도 있습니다. 특히 $scr 매개변수. WordPress는 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' ); ?>
<?php wp_head(); ?>
足够简单，只是不太优雅。更好的方法是使用 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。这里还列出了一些其他相关的法典链接：
위 내용은 WordPress 테마 및 플러그인의 대기열 스크립트에 대해 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
