web-dev-qa-db-fra.com

Comment inclure correctement les fichiers jQuery et JavaScript?

Je le fais maintenant avec le code suivant:

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

Cela fonctionne, mais devrais-je le faire pour tout le monde, comme ceci, ou pour tout le monde sauf admin (pour que le backend utilise la version WordPress?):

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Cette version ne fonctionne pas du tout, en fait, je reçois la version WordPress jQuery et non celle de Google.

Par conséquent, devrais-je désinscrire le jQuery inclus dans WordPress?

Comment puis-je ajouter mes propres scripts (scripts de curseur, modernizr et mon propre custom.js) de la bonne manière? Je suppose que je devrais le faire aussi via functions.php et non dans l'en-tête comme je le fais maintenant, mais je ne sais pas comment je le ferais.

plugin-developmenttheme-developmentjqueryjavascriptwp-enqueue-script
15
Johan Dahl

Première règle empirique: ne désenregistrez pas les scripts fournis par le noyau et ne les remplacez pas par d'autres versions , sauf si vous êtes absolument certain qu'aucun thème, plug-in ou noyau lui-même ne se cassera en raison du changement de version. Vraiment, à moins que vous ayez absolument besoin d'une autre version d'un script fourni avec le noyau, utilisez simplement ce qui est livré avec le noyau.

Deuxièmement, je vous recommande fortement de vous connecter à wp_enqueue_scripts pour l'enregistrement et la mise en file d'attente de scripts, plutôt que init. (Il fonctionne à init, mais à partir de jouez bien avec les autres perspective, il est préférable d’utiliser le crochet le plus correct sur le plan sémantique.)

Troisièmement, pour mettre en file d'attente vos propres scripts personnalisés, vous utilisez les mêmes méthodes que ci-dessus:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

Ajoutez simplement les scripts dont vous avez besoin pour mettre en file d'attente.

19
Chip Bennett

En espérant que cela vous aide, recherchez le codex pour wp_enqueue_scripts pour plus d'informations.

  1. Ne pas utiliser init à enqueue . Utilisez wp_enqueue_scripts pour les commandes frontales et admin_enqueue_scripts pour le côté administrateur. Vous pouvez cependant utiliser init pour register scripts.
  2. Le hook wp_enqueue_scripts ne se déclenche que sur le front-end (et non sur la page de connexion) - vous n'avez donc pas besoin de vérifier is_admin().

  3. À moins que vous n'ayez une raison spécifique de faire autrement, je suggérerais d'enregistrer et de mettre en file d'attente les scripts en utilisant functions.php pour themes ou dans un plug-in sinon. Vous mettez simplement:

     function myprefix_load_scripts() {
   // Load scripts here
 }
 add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );

  4. Si l'objectif est de mettre en file d'attente un script lorsqu'un code abrégé est utilisé, vous pouvez utiliser wp_enqueue_script dans le rappel de code abrégé pour ne le mettre en file d'attente que lorsque cela est nécessaire (cela l'imprimera dans le pied de page depuis 3.3 ).

  5. Vous ne devriez pas ré-enregistrer le jQuery existant du côté administrateur. Vous pouvez casser quelque chose: D.

  6. Les plug-ins ne doivent pas ré-enregistrer le jQuery existant.

  7. Vous devriez peser le pour et le contre de la réinscription de jQuery. Par exemple, il est possible que certains plug-ins se cassent si vous enregistrez une ancienne version (peut-être pas maintenant, mais dans le futur ...)

4
Stephen Harris

Avertissement raisonnable: l'annulation de l'enregistrement de la version fournie de WP de jQuery au profit de la vôtre peut poser problème, notamment si vous n'êtes pas très attentif pour changer la version que vous pointez lorsque WP met à jour sa version. . Cela vaut doublement pour les plugins, qui écrivent souvent (ou devraient au moins) leurs plugins pour une compatibilité maximale avec la version WP de jQuery.

Cela dit, votre première version est correcte - elle est liée à wp_enqueue_scripts. Votre deuxième fonction est liée à init, ce qui peut expliquer son dysfonctionnement.

Ajoutez vos propres scripts de la même manière:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

Je suppose ici que vous chargez des scripts depuis un répertoire js dans votre répertoire de thème actuel; changez le paramètre URI si ce n'est pas vrai. Le troisième paramètre array( 'jquery' ) indique que bbg-scripts dépend de jquery et devrait donc être chargé par la suite. Voir https://codex.wordpress.org/Function_Reference/wp_enqueue_script pour plus de détails.

2
Boone Gorges
if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Cela ne va rien faire ... Je suppose que vous voulez dire

if (!function_exists('load_my_scripts')) {

Votre exemple ne chargera la fonction load_my_scripts que si elle existe déjà (ce qui n'est pas le cas et si c'était le cas, cela créerait une erreur)

1
Adam

Si, pour des raisons de performances, vous souhaitez charger jquery et d'autres fichiers js principaux à partir d'un CDN, assurez-vous de charger la même version pour éviter les problèmes liés aux fonctions de base et de plug-in. Comme ça:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');
0
cjbj