Comment inclure correctement les fichiers jQuery et JavaScript?

13

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ésenregistrer le jQuery inclus dans WordPress?

Comment puis-je ajouter mes propres scripts (scripts de curseur, modernizr et mon propre fichier custom.js) correctement? 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.

    
posée Johan Dahl 13.03.2012 - 15:28

6 réponses

18

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

Deuxièmement, je vous recommande strongment de vous connecter à wp_enqueue_scripts pour l'enregistrement et la mise en file d'attente de scripts, plutôt que init . ( ça marche à init , mais d’un point de vue jouez bien avec d’autres , il est préférable d’utiliser le hook le plus correct sémantiquement.)

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.

    
réponse donnée Chip Bennett 13.03.2012 - 15:46
4

Si cela vous aide, consultez le codex pour wp_enqueue_scripts pour plus d'informations.

  1. N'utilisez pas init pour mettre en file d'attente . Utilisez wp_enqueue_scripts pour les commandes frontales et admin_enqueue_scripts pour le côté administrateur. Vous pouvez utiliser init pour enregistrer les scripts.
  2. Le crochet wp_enqueue_scripts ne se déclenche que sur le front-end (et non sur le 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 thèmes 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 le but est de mettre en file d'attente un script lorsqu'un shortcode est utilisé, vous pouvez utiliser wp_enqueue_script dans le rappel de shortcode pour le mettre en file d'attente uniquement si nécessaire (cela l'imprimera dans le pied de page 3,3 ).

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

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

  7. Vous devriez peser le pour et le contre de la réenregistrement 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 ...)

réponse donnée Stephen Harris 13.03.2012 - 15:47
2

Mise en garde: l'annulation de l'enregistrement de la version fournie de WP par jQuery au profit de la vôtre peut être source de problèmes, en particulier si vous ne faites pas très attention à la modification de la version à laquelle vous pointez lorsque WP met à jour sa version. Cela vaut particulièrement pour les plugins, qui écrivent souvent (ou devraient au moins) écrire 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èmes 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 doit donc être chargé par la suite. Voir enlace pour plus de détails.

    
réponse donnée Boone Gorges 13.03.2012 - 15:42
1
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, ce qui créerait une erreur)

    
réponse donnée Adam 13.03.2012 - 16:46
0

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 tout problème avec les fonctions principales et les plug-ins. Comme ceci:

$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');
    
réponse donnée cjbj 31.10.2016 - 10:17
-2

Après avoir vérifié les différentes méthodes de chargement de jquery (pas seulement sur ce post), je me suis rendu compte qu'aucune d'entre elles ne remplissait toutes ces conditions:

  1. Enregistre (et peut-être en file d'attente) jquery à l'aide d'une fonction, afin qu'elle puisse être utilisée par les plugins.
  2. Chargez-le à partir de Google CDN avec l'URL relative au protocole.
  3. Retour à la copie locale si Google est hors connexion.

De nombreuses versions alternatives effectuant certaines de ces opérations dans la liste, mais pas toutes, j'ai donc écrit ma version en combinant et en modifiant certaines des méthodes déjà disponibles. La voici:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

Pour économiser la bande passante et ne pas envoyer de requêtes ping à Google chaque fois que la page est rechargée, il se souvient si le CDN de Google est en ligne ou non pendant 5 minutes à l'aide de l'API Wordpress Transient.

    
réponse donnée nautilus7 06.05.2012 - 17:03

Lire d'autres questions sur les étiquettes