En savoir plus sur les scripts de mise en file d'attente pour les thèmes et plugins WordPress

wp_enqueue_script 函数是将 JavaScript 文件加载到 WordPress 站点的最佳解决方案。如果您正在开发使用 JavaScript 或 JavaScript 库的主题，则可以使用 wp_enqueue_script fonction. Cela peut être déroutant si vous ne l'avez pas vraiment utilisé auparavant... alors aujourd'hui, nous allons approfondir la façon d'utiliser les fonctions en file d'attente pour charger correctement des scripts dans votre thème ou plugin.

Certains aspects des applications ou techniques utilisées dans ce didacticiel ont changé depuis sa publication initiale. Cela peut rendre les étapes ultérieures un peu difficiles. Nous vous recommandons de consulter le dernier tutoriel sur le même sujet :

• Comment inclure JavaScript et CSS dans les thèmes et plugins WordPress

Pourquoi utiliser la fonction de mise en file d'attente ?

Si vous avez une expérience HTML de base, vous êtes probablement habitué à charger des fichiers Javascript (y compris tout ce qui va de jQuery aux scripts de plug-in) directement dans l'en-tête ou le pied de page de votre document. C'est bien lorsque vous êtes dans un environnement autonome comme une page HTML de base... mais une fois que vous avez introduit la myriade d'autres scripts qui peuvent s'exécuter sur votre installation WordPress, il devient plus délicat d'effectuer ce que j'appelle la « gestion des foules ». Utilisez votre script.

Alors pourquoi ne pas charger JavaScript dans l'en-tête ou le pied de page ? La réponse est très simple : en incluant JavaScript de cette manière, vous courez le risque d'entrer en conflit avec le JavaScript lors de l'installation (pensez à plusieurs plugins essayant de charger le même script ou différentes versions de ce script). De plus, votre JavaScript sera chargé sur chaquepage même si vous n'en avez pas besoin. Cela ralentira inutilement le chargement de la page et pourrait interférer avec d'autres JavaScript, tels que ceux des plugins ou du tableau de bord... ce qui est un non-non dans le développement WP.

En utilisant la fonction wp_enqueue_script. Vous aurez plus de contrôle sur comment et quand JavaScript est chargé. Vous pouvez même décider de charger dans l’en-tête ou le pied de page.

Comprendre la fonction wp_enqueue_script

wp_enqueue_script 函数用于将脚本加载到您的 WordPress 站点中。您通常会在 functions.php est utilisée pour charger des scripts dans votre site WordPress. Vous l'utiliserez généralement dans un fichier functions.php.

wp_enqueue_script La fonction elle-même est très simple, jetons donc un œil à sa structure.

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

• $handle
  • Il s'agit du handle (nom) du script à charger. Doit être entièrement en minuscules.
  • C'est obligatoire
  • Par défaut : Aucun
• $scr
  • Voici l'URL du script.
  • Si vous chargez localement depuis le serveur, vous ne devez pas coder en dur l'URL du script sur le serveur. Le thème est mieux utilisé 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 ?>
    

    Copier après la connexion
  • Si vous chargez le script depuis un autre serveur. Par exemple, chargez la bibliothèque jQuery depuis Google CDN. Tout ce que vous avez à faire est de saisir l'URL du fichier que vous souhaitez charger.

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

    Copier après la connexion
  • C'est facultatif
  • Valeur par défaut : faux
• $deps
  • Il s'agit d'un tableau qui gère toutes les dépendances de script. Par exemple, votre script fade.js nécessite l'exécution de jQuery. Ce paramètre lie votre script à la bibliothèque jQuery.
  • Si vous ne souhaitez pas utiliser ce paramètre, mais souhaitez utiliser d'autres paramètres, utilisez "false".

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

    Copier après la connexion
  • Les scripts requis doivent être chargés en premier.
  • Le handle de script dont vous avez besoin pour utiliser le tableau.

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

    Copier après la connexion
  • C'est facultatif
  • Par défaut : array()
• $ver
  • Voici votre version du script.
  • La version est concaténée à la fin du chemin sous forme de chaîne de requête. version peut être un numéro de version, false ou NULL.
  • Si vous utilisez false comme version. La version WordPress sera utilisée.
  • Si vous utilisez NULL. Rien ne servira de version. La référence des fonctions WordPress ne le recommande pas.
  • Si le paramètre $ver n'est pas utilisé, la version WordPress sera utilisée par défaut.

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

    Copier après la connexion
  • C'est facultatif
  • Valeur par défaut : faux
• $in_footer
  • Cela déterminera la position de votre script sur la page.
  • Ce paramètre est une valeur booléenne ("vrai" ou "faux")
  • Par défaut votre script sera placé en mais il est préférable de le placer avant la fin de la balise . Cela se fait en passant "true" au paramètre.

    <?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
    ?>
    

    Copier après la connexion
  • C'est facultatif
  • Valeur par défaut : faux

Comme vous pouvez le constater, tous les paramètres sauf $handle 之外的所有参数都是可选的。乍一看这似乎很奇怪。特别是 $scr sont facultatifs. Cela peut paraître étrange à première vue. Surtout le paramètre $scr. Comment WordPress trouve-t-il un script sans 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');
    ?>
    

    Copier après la connexion
• wp_deregister_script
  • wp_deregister_script 删除已注册的脚本。
  • 您所需要做的就是将句柄传递给它。

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

    Copier après la connexion
• wp_deregister_script
  • wp_dequeue_script 删除已注册的脚本。
  • 您所需要做的就是将句柄传递给它。

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

    Copier après la connexion

加载脚本

加载脚本的最简单方法是将 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出队脚本

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!