web-dev-qa-db-fra.com

Enqueue Javascript correctement pour 3.5

J'essaie de créer des onglets pour la page des paramètres d'administration dans wp, mais je pense que je me trompe. L'exemple ci-dessous montre comment je l'ai fait mais je ne sais pas comment le changer pour l'utiliser correctement sans conflit. $.

function my_plugin_load_js() {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://code.jquery.com/jquery-1.8.3.js');
wp_enqueue_script('jquery');

wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'http://code.jquery.com/ui/1.9.2/jquery-ui.js');
wp_enqueue_script('jquery-ui-core');
}
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );

function mypluginjs() {
echo '<script type="text/javascript">
jQuery(function() {
   jQuery( "#tabs" ).tabs();
});
</script>';
}
add_action( 'admin_print_scripts', 'mypluginjs' );
phpfunctionswp-adminsettingsjquery-ui
1
Jes

Ne désenregistrez jamais les scripts fournis par le noyau dans WP-Admin. Vous ne devriez pas le faire sur le front-end , à moins que vous ne connaissiez vraiment, vraiment ce que vous faites. Mais , en particulier dans WP-Admin, utilisez simplement les scripts fournis par le noyau.

En outre, lorsque vous utilisez l'interface utilisateur jQuery intégrée au noyau, WordPress sait déjà que jQuery est une dépendance.

Il suffit de changer le premier rappel à ceci:

function my_plugin_load_js() {
    wp_enqueue_script('jquery-ui-core');
}
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );

Remarque: vous devriez utiliser ici un crochet spécifique au plugin , pour mettre en file d'attente uniquement sur la page d'administration de votre propre plugin, plutôt que dans l'ensemble de WP-Admin.

De plus, pour l’onglet jQuery UI , vous devez mettre en file d'attente le script jquery-ui-tabs. Le noyau l'enregistre avec tous ses dépôts nécessaires, vous pouvez donc le mettre en file d'attente directement:

function my_plugin_load_js() {
    wp_enqueue_script('jquery-ui-tabs');
}
add_action('admin_enqueue_scripts', 'my_plugin_load_js' );

Pour le second, encapsulez correctement le script dans des wrappers sans conflit :

function mypluginjs() {
    ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
   jQuery( "#tabs" ).tabs();
});
</script>
    <?php
}
add_action( 'admin_print_scripts', 'mypluginjs' );
7
Chip Bennett