Comment inclure correctement les fichiers jQuery et JavaScript?

16

Je le fais en ce moment 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 dois-je le faire pour tout le monde, comme ça, ou pour tout le monde, mais l'administrateur (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, j'obtiens la version jQuery de WordPress et non celle de Google.

Par conséquent, dois-je annuler l'enregistrement de la jQuery incluse dans WordPress?

De plus, comment ajouter mes propres scripts (scripts de curseur, modernizr et mes propres custom.js) de la bonne façon? Je suppose que je devrais également le faire via functions.php et non dans l'en-tête comme je le fais maintenant, mais je ne sais pas comment je ferais cela.

Johan Dahl
la source

Réponses:

20

Première règle de base: ne désenregistrez pas les scripts intégrés au 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 n'ayez absolument besoin d' une autre version d'un script intégré au noyau, utilisez simplement ce qui est fourni avec le noyau.

Deuxièmement, je vous recommande fortement de vous wp_enqueue_scriptsconnecter pour l'enregistrement de script et la mise en file d'attente, plutôt que init. (Il fonctionne à init, mais d'un jeu-bien-avec-autres point de vue, il est préférable d'utiliser le crochet le plus sémantiquement correct.)

Troisièmement, pour mettre vos propres scripts en file d'attente, 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.

Chip Bennett
la source
4
+1 sur le besoin absolu ! Trop de thèmes (généralement «premium») enregistrent une version obsolète de jQuery. Il casse les plug-ins.
Stephen Harris
L'ajout de ce script dans mon fichier de fonctions (sans les déclarations php car elles sont déjà là) me donne une «Http-error 500 (Internal server error)». Y a-t-il une erreur quelque part?
Johan Dahl
Oui; il y avait une erreur de syntaxe dans les wp_enqueue_script()appels.
Chip Bennett
Merci maintenant ça marche! Cependant, il est toujours sorti dans l'en-tête. N'est-il pas préférable que ce soit dans le pied de page? Si oui, puis-je modifier le code pour qu'il le soit?
Johan Dahl
Vous pouvez certainement faire la queue dans le pied de page. Définissez simplement le $in_footerparamètre sur true dans votre appel à wp_enqueue_script().
Chip Bennett
4

J'espère que cela vous aidera, recherchez le codex wp_enqueue_scriptspour plus d'informations.

  1. Ne pas utiliser initpour mettre en file d' attente . Utilisez wp_enqueue_scriptspour les choses front-end et admin_enqueue_scriptspour le côté administrateur. Vous pouvez cependant utiliser initpour enregistrer des scripts.
  2. Le crochet wp_enqueue_scriptsne se déclenche que sur le front-end (et non sur la page de connexion) - vous n'avez donc pas à vérifier is_admin().
  3. Sauf si vous avez une raison spécifique de faire autrement, je vous suggère d'enregistrer et de mettre en file d'attente des scripts à l'aide functions.phpde thèmes ou dans un plug-in autrement. 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 un script wp_enqueue_scripten file d'attente lorsqu'un shortcode est utilisé, vous pouvez souhaiter l'utiliser dans le rappel de shortcode pour le mettre en file d'attente uniquement lorsque cela est nécessaire (cela l'imprimera dans le pied de page depuis la 3.3 ).

  5. Vous ne devez 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, cela peut casser certains plug-ins si vous enregistrez une ancienne version (peut-être pas maintenant, mais à l'avenir ...)

Stephen Harris
la source
1
Annonce 5) la réinscription n'a pas vraiment d'importance. C'est pourquoi nous avons obtenu les fonctions de mise en file d'attente et d'enregistrement. :)
kaiser
2

Juste avertissement: la désinscription de la version packagée de WP de jQuery en faveur de la vôtre peut causer des problèmes, surtout si vous ne faites pas très attention à vous assurer que vous changez la version vers laquelle vous pointez chaque fois que WP met à jour sa version. Cela vaut doublement pour les plugins, qui souvent (ou souvent 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 accrochée wp_enqueue_scripts. Votre deuxième fonction est accrochée init, ce qui peut expliquer pourquoi elle ne fonctionne pas correctement.

Ajoutez vos propres scripts de manière similaire:

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 à partir d'un jsrépertoire dans votre répertoire de thème actuel; changer le paramètre URI si ce n'est pas vrai. Le troisième paramètre array( 'jquery' )indique que cela bbg-scriptsdépend jqueryet doit donc être chargé par la suite. Voir https://codex.wordpress.org/Function_Reference/wp_enqueue_script pour plus de détails.

Gorges de Boone
la source
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');

Ça ne va rien faire ... Je suppose que tu veux 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, donc ce ne sera pas le cas et si cela le faisait, cela créerait une erreur)

Adam
la source
0

Si, pour des raisons de performances, vous souhaitez charger jquery et d'autres fichiers js de base à partir d'un CDN, assurez-vous de charger la même version pour éviter que des choses désagréables ne se produisent avec les 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');
cjbj
la source
-2

Après avoir vérifié toutes les différentes méthodes de chargement de jquery (pas seulement sur ce post), j'ai réalisé qu'aucune d'entre elles ne faisait tout cela:

  1. Enregistrez (et peut-être mettez en file d'attente) jquery en utilisant une fonction, afin qu'il puisse être utilisé par des plugins.
  2. Chargez-le à partir de Google CDN avec l'URL relative du protocole.
  3. Retour à la copie locale si Google est hors ligne.

Il y a beaucoup de versions alternatives faisant certaines d'entre elles dans la liste, mais pas toutes, j'ai donc écrit ma version en peignant et en modifiant certaines des méthodes déjà disponibles. C'est ici:

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

Afin d'économiser de la bande passante et de ne pas cingler Google à chaque fois que la page est rechargée, il se souvient si Google CDN est en ligne ou non pendant 5 minutes en utilisant l'API Wordpress Transient.

nautilus7
la source
Non recommandé. Vous devez maintenant mettre à jour le script après chaque mise à jour de WordPress pour correspondre à la version exacte de jQuery que WordPress utilise. De plus, Google ne parvient pas à envoyer la bibliothèque compressée dans certains cas, donc votre page se charge plus lentement maintenant.
fuxia
Je n'utilise pas jquery wordpress. Lisez le code s'il vous plaît. J'utilise la version du thème. Et si vous n'aimez pas google, vous pouvez utiliser un autre cdn.
nautilus7
Mais c'est le point: vous devez utiliser le WordPress jQuery pour vous assurer que la version est correcte.
fuxia
Je ne te suis pas. J'attrape la version dont j'ai besoin sur google et je regroupe la même version avec mon thème. Voilà comment tout le monde le fait. Wordpress peut utiliser (dans la section admin) quelle que soit la version fournie.
nautilus7
1
Vous pouvez utiliser la version de jQuery que vous souhaitez, mais si vous le regroupez avec un thème, vous l'imposez à vos utilisateurs. Dans quelques années, lorsque tout le monde utilisera jQuery 1.8.2, vos utilisateurs seront bloqués sur une version obsolète à moins qu'ils ne maintiennent le thème à jour.
Chris_O