WordPress 테마 및 플러그인의 대기열 스크립트에 대해 알아보기-PHP 튜토리얼-php.cn

了解 WordPress 主题和插件的排队脚本

wp_enqueue_script 函数是将 JavaScript 文件加载到 WordPress 站点的最佳解决方案。如果您正在开发使用 JavaScript 或 JavaScript 库的主题，则可以使用 wp_enqueue_script 기능. 이전에 실제로 사용해 본 적이 없다면 혼란스러울 수 있습니다... 그래서 오늘 우리는 큐에 추가된 함수를 사용하여 테마나 플러그인에 스크립트를 적절하게 로드하는 방법을 자세히 알아볼 것입니다.

기술 및 소프트웨어에 대한 후속 변경

이 튜토리얼에 사용된 애플리케이션이나 기술의 일부 측면은 원래 게시된 이후 변경되었습니다. 이로 인해 후속 단계가 약간 어려워질 수 있습니다. 동일한 주제에 대한 최신 튜토리얼을 확인해 보시기 바랍니다:

WordPress 테마 및 플러그인에 JavaScript 및 CSS를 포함하는 방법

인큐 기능을 사용하는 이유는 무엇인가요?

기본 HTML 배경이 있다면 아마도 Javascript 파일(jQuery에서 플러그인 스크립트까지 포함)을 문서의 머리글이나 바닥글에 직접 로드하는 데 익숙할 것입니다. 기본 HTML 페이지와 같은 독립형 환경에서는 괜찮지만 WordPress 설치에서 실행될 수 있는 수많은 다른 스크립트를 도입하면 "군중 관리"라고 부르는 작업을 수행하기가 더 까다로워집니다. 스크립트를 사용하세요.

그럼 머리글이나 바닥글에 JavaScript를 로드하면 어떨까요? 대답은 매우 간단합니다. 이와 같이 JavaScript를 포함하면 설치 중에 JavaScript와 충돌할 위험이 있습니다(여러 플러그인이 동일한 스크립트 또는 해당 스크립트의 다른 버전을 로드하려고 시도하는 경우). 또한 JavaScript는 필요하지 않더라도 모든페이지에 로드됩니다. 이로 인해 페이지가 불필요하게 로드되는 데 시간이 더 오래 걸리고 플러그인이나 대시보드 내에서와 같은 다른 JavaScript를 방해할 수 있습니다. 이는 WP 개발에서 절대 금기입니다.

wp_enqueue_script 기능을 사용하여. JavaScript가 로드되는 방법과 시기를 더 효과적으로 제어할 수 있습니다. 머리글이나 바닥글에 로드할지 여부도 결정할 수 있습니다.

wp_enqueue_script 함수 이해하기

wp_enqueue_script 函数用于将脚本加载到您的 WordPress 站点中。您通常会在 functions.php 함수는 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. 으아아아
- 다른 서버에서 스크립트를 로드하는 경우. 예를 들어 Google CDN에서 jQuery 라이브러리를 로드합니다. 당신이 해야 할 일은 로드하려는 파일의 URL을 입력하는 것뿐입니다. 으아아아
- 선택사항입니다
- 기본값: false
$deps
- 이것은 모든 스크립트 종속성을 처리하는 배열입니다. 예를 들어 fade.js 스크립트를 실행하려면 jQuery가 필요합니다. 이 매개변수는 스크립트를 jQuery 라이브러리에 연결합니다.
- 이 매개변수를 사용하지 않고 다른 매개변수를 사용하려면 "false"를 사용하세요. 으아아아
- 필수 스크립트를 먼저 로드해야 합니다.
- 배열을 사용하는 데 필요한 스크립트 핸들입니다. 으아아아
- 선택사항입니다
- 기본값: 배열()
$ver
- 귀하의 스크립트 버전입니다.
- 버전은 쿼리 문자열로 경로 끝에 연결됩니다. version은 버전 번호, false 또는 NULL일 수 있습니다.
- false를 버전으로 사용하는 경우. WordPress 버전이 사용됩니다.
- NULL을 사용하는 경우. 버전으로 사용되는 것은 없습니다. WordPress Function Reference에서는 이를 권장하지 않습니다.
- $ver 매개변수를 사용하지 않으면 기본적으로 WordPress 버전이 사용됩니다. 으아아아
- 선택사항입니다
- 기본값: false
$in_footer
- 페이지에서 스크립트의 위치가 결정됩니다.
- 이 매개변수는 부울 값("true" 또는 "false")입니다
- 기본적으로 스크립트는 에 배치되지만 태그가 끝나기 전에 배치하는 것이 가장 좋습니다. 이는 매개변수에 "true"를 전달하여 수행됩니다. 으아아아
- 선택사항입니다
- 기본값: false

보시다시피 $handle 之外的所有参数都是可选的。乍一看这似乎很奇怪。特别是 $scr를 제외한 모든 매개변수는 선택사항입니다. 언뜻 보면 이상하게 보일 수도 있습니다. 특히 $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' ); ?>
<?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');
?>

로그인 후 복사

第 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');
?>

로그인 후 복사

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