web-dev-qa-db-fra.com

Déclaration de dépendances de script entre des scripts mis en file d'attente avec différents points d'ancrage d'actions

Considérez ce scénario:

J'ai mis en file d'attente des scripts dans mon thème personnalisé. Ensuite, je me suis mis à construire un plugin que je souhaite utiliser uniquement avec ce thème. Je veux mettre en file d'attente dans mon plugin d'autres scripts qui dépendent des scripts mis en file d'attente dans le thème. La méthode standard pour déclarer des dépendances de script dans wordpress consiste à transmettre un tableau de dépendances à wp_enqueue_script. Par exemple.:

wp_enqueue_script('tagsinput-scripts', plugin_dir_url( __FILE__ ) . 'js/tagsinput/bootstrap-tagsinput.min.js', array('bootstrap-js'), '130215', false);

ne serait pas mis en file d'attente jusqu'à ce que bootstrap-js soit mis en file d'attente.

Imaginez que le script ci-dessus ait été mis en file d'attente par mon plug-in avec le hook d'action admin_enqueue_scripts, alors que bootstrap-js a été mis en file d'attente dans le thème avec le hook d'action wp_enqueue_scripts.

La dépendance entre tagsinput-scripts et bootstrap-js peut-elle être correctement résolue par Wordpress dans ce scénario lorsque les deux scripts ont été mis en file d'attente à l'aide de différents crochets d'action?

pluginsplugin-developmentwp-enqueue-script
2
luqo33

La réponse simple est non". Bien que les crochets admin_enqueue_scripts et wp_enqueue_scripts fassent exactement la même chose, ils travaillent à des endroits distincts, sans aucune référence à l'autre.

  • wp_enqueue_scripts fonctionne du côté public ou frontal

  • admin_enqueue_scripts Comme son nom l'indique, il fonctionne du côté de l'administrateur ou du back-end

Votre script qui, avec la dépendance, ne sera donc jamais chargé s'il dépend d'un script chargé via l'autre hook.

Vous devrez accrocher votre bootstrap-js aux deux crochets pour que cela fonctionne, cela garantira que votre dépendance fonctionnera également

Exemple:

add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap_js' );
add_action( 'admin_enqueue_scripts', 'enqueue_bootstrap_js' );

function enqueue_bootstrap_js()
{
    //Register and enqueue your bootstrap-js script
}

add_action( 'wp_enqueue_scripts', 'tagsinput_scripts' );

function tagsinput_scripts()
{
    wp_enqueue_script('tagsinput-scripts', plugin_dir_url( __FILE__ ) . 'js/tagsinput/bootstrap-tagsinput.min.js', array('bootstrap-js'), '130215', false);
}
0
Pieter Goosen

La réponse simple est oui".

Utiliser wp_enqueue_scripts ou admin_enqueue_scripts fait du script une dépendance, mais il ne sera rappelable que dans l'environnement local. Ainsi, uniquement dans le thème ou le plug-in où vous l'enregistrez. Cependant, ce que Pieter Goosen ni WordPress ne vous disent pas, c'est que vous pouvez utiliser le hook wp_default_scripts pour enregistrer un script d'installation étendu.

Comment utiliser? Voir la note ci-dessous, qu'est-ce qui attend actuellement d'être modéré pour les "Notes fournies par l'utilisateur" du crochet d'action wp_default_scripts chez le développeur WordPress Ressources .

Ajoutez un script auquel vous pouvez vous référer où que vous soyez dans votre installation WordPress en utilisant wp_enqueue_script ou admin_enqueue_script.

Commencez par installer le hook, par exemple dans votre plugin.

add_action('wp_default_scripts', function(&$scripts) {
  // Arguments order: `$scripts->add( 'handle', 'url', 'dependencies', 'version', 'in_footer' );`
  // Set "in_footer" argument to 1 to output the script in the footer.
  $scripts->add('my-plugin-script', '/path/to/my-plugin-script.js', array('jquery'), 'alpha', 1);
});

Maintenant, vous pouvez utiliser le script du plugin n'importe où, par exemple dans votre thème.

add_action('wp_enqueue_scripts', function () {
  // Note the third argument: `array('my-plugin-script')`
  wp_enqueue_script('my-theme-script', '/path/to/my-theme-script.js', array('my-plugin-script'), null, true);
});

Assurez-vous de choisir une chaîne identique pour l'argument "handle". Une bonne pratique consiste à préfixer le nom du descripteur avec le nom de votre plugin ou de votre thème.

1
Fleuv